New grammar / syntax highlighting in Atom

Question

I'm trying to make a new, quite simple grammar for Atom, just for my text editing needs. Either that or be able to modify the Markdown grammar. My problem is I cannot seem to even get a test working...

This is the guide I followed, I've also tried Atom's flight manual.

Here's my package.json:

{
  "name": "language-mylanguage",
  "version": "0.0.0",
  "description": "Mylanguage language support in Atom",
  "engines": {
    "atom": "*"
  },
  "dependencies": {},
  "repository": {
    "type": "git",
    "url": ""
  },
  "bugs": {
    "url": ""
  },
  "license": "MIT"
}

And styles/language-mylanguage.less:

@import "ui-variables";

.mylanguage {
  color: red;
}
.text {
  color: blue;
}

And grammars/mylanguage.cson:

'scopeName': 'source.mylanguage'
'name': 'Mylanguage'
'fileTypes': ['md', 'txt']

'patterns': [
    {
        'match': '\\bLorem\\b'
        'name': 'text.mylanguage'
    }
]

And finally my test file:

# H1
## H2
### H3
#### H4
Lorem Ipsum
[Text 1]
{Text 2}
%Text 3%
^Text 4^
> Text 5
++ Comment ++

Those are the only files I have in the package folder. I have so far tried refreshing through view menu, and quitting & restarting. Please help!

Edit: From the code I have currently I expected Lorem to be in blue, while rest is in red.

@Mandy8055 edited it in. :) – reanseih Jun 20 '20 at 01:38 — reanseih, Jun 20 '20 at 01:38

score 0 · Answer 1 · answered Jun 20 '20 at 21:21

First of all, you should never mix language grammars and themes in a single package, they are meant to be separate. That way, others can still make use your grammar definitions with a syntax theme of their own preference or ability (think of accessibility issues).

Secondly, stick to the TextMate naming conventions (which are also used by Atom and many other editors), so other themes can highlight your grammar. So, rather than using the .text selector, you should probably use something like .string.unquoted.*. As a side-effect, you will notice that you don't need your own style-sheet in order to highlight your language.

Here's another tip: place the cursor anywhere in your syntax and run Editor: Log Cursor Scope from the command palette. This will reveal the syntax scope used at the cursor position.

New grammar / syntax highlighting in Atom

1 Answers1