Extend a grammar (in small words)


I found the other posts on extending grammar, but as a newbie, I wasn’t able to follow them. I want to add a very simple marker to markdown, which is that phrases bounded by a dot on either end should appear in green. So far, I’ve added this to /usr/share/atom/resources/app/node_modules/language-gfm/grammars/gfm.json …

"patterns": [
  "begin": "·",
  "end": "·",
  "name": "markup.translation.gfm"

…and then this to my stylesheet:

atom-text-editor {
.markup.translation.gfm {
color: #00ff00;

This isn’t working, and I’m stumped on what to try next.


Beware that "." in a regexp doesn’t match a point but any char. Use "\\." to match a point.


I’m not talking about a period, but a floating dot: ·. It should definitely not need to be escaped. I was able to do this in vim, and I’m confident it can be done in Atom. I just don’t (yet) know how.


I have no idea. But the first thing I would do is to use the Inspector to see if the DOM was annotated with the pattern you just added – it should be a span with the class you specified.

At least that tells you whether the pattern is wrong or the CSS is wrong…


Oh sorry, I didn’t noticed that the dot baseline was different.

@kgrossjo is right, inspecting the DOM should be the first thing to try.
Also I would consider using the unicode hex form (\xC2\xB7) rather than · in the regexp string as grammars use oniguruma regexes and not JS ones (not sure about that, but at least you’ll make sure to avoid any encoding issues with your files).
The last thing would be to check whether you’re using the shadow DOM or not, if yes, the CSS rule you wrote won’t be able to target the created scope in the editor content, you should use atom-text-editor, atom-text-editor::shadow {...} instead.


I’m pretty certain that the grammars use the Oniguruma regular expressions too, not JS ones.


Yes, I’m sure about that too. My sentence was indeed confusing. I meant that I wasn’t sure that using hex form would change anything about the problem at hand ^^.


Good news: the magnifying glass in the Developer Tools shows I set up the grammar pattern correctly.

Better news: with your help, and particularly @abe’s shadowy advice, I have it working!

Thank you all, and Happy New Year!


OK, here’s a very strange thing. It works… up to a point. I have a lot of marked phrases per line, and Atom correctly colors them for the first 25 or so, and then stops. I can turn it off and on (by adding and removing the dot) within those, but not after that. Has anyone else seen CSS simply give up after a given point?


Reposting in a new thread.


Just so that I’m sure I understand: You have a long line like this:

yadda ·marked· yadda ·marked· yadda

The “marked” bits are highlighted. You can add more ·marked· yadda snippets, and the new ones are also highlighted. But once you are at 25 occurrences of “marked”, then number 26 will not be highlighted anymore?

Or is it that all 26 are suddenly unhighlighted when you add number 26?

In any case, it sounds a lot like an Atom bug. Perhaps if you could invent a new little grammar just for presentation purposes, that would be good.

Or perhaps it happens with the built-in bold or italics highlighting, too?


Strike! I created a file x.md, I typed

bla *bold* 

into it, and then I copied that over and over, and the first 25 occurrences of “bold” were highlighted, everything starting from number 26 was not.

Should be easy to create a bug report.


See my reply in the new topic:


Turns out someone has made a package to fix it. I’ve had good results doubling the number of tokens from 100 to 200.