How do I highlight a particular match in a grammar?


First I understand how grammar is defined in the cson file. And I know a way to modify the highlight is: 1) enter the develop mode and “inspect element” the classnames of your selected text; 2) in css style file add color for that class.

However, I don’t understand how the grammar match names are associated with the css class names. What should I do if I want to highlight a particular match in the grammar?

For example, in the restructuredtext plugin, their match for a python code is

			contentName: "source.embedded.python"
			patterns: [include: "source.python"]
			begin: "^([ \\t]*)(\\.\\.)\\s(code(?:-block)?)(::)\\s+(py(thon)?|sage)\\s*$"
			end:   "^(?!\\s*$|\\1[ \\t]+\\S)"
				2: name: "punctuation.definition.directive.restructuredtext"
				3: name: "support.directive.restructuredtext"
				4: name: "punctuation.separator.key-value.restructuredtext"
				5: name: ""

Now if I want to add some background color to the python code block, what should I do? Which css class I should define the color for? I

I tried to inspect the HTML of the code block, however, it is not inside a single class, but broken into multiple

s, each corresponding to one line of the code, and the most outside
does not even come with a class.


The Python Block in a restructuredText file whose background I want to highlight .

… code-block:: python

from recommonmark.parser import CommonMarkParser
source_parsers = {
    '.md': CommonMarkParser,
source_suffix = ['.rst', '.md']



You need to create a style description somewhere.

If it is your own grammar then…

Else you can override someone else’s…

Your master style sheet styles.css can override any style - but it has to be identified correctly first.



Thanks a lot! Is there any tutorial on this like the grammar tutorial on


I downloaded the scl package. The current one does not contain a styles directory.

For example, if I want to highlight a capture named


What would be the css class I should declare in the language-scl.less file?


Just prepend syntax-- to each part of the scope.

But this should be in you stylesheet file. I don’t think a file like you are making is needed.



You have been led onto the garden path with my previous reply - sorry.

The focus was meant to be on the technique and not the SCL language package that I customized for my own purposes. It is not published for public consumption.

The best I can come up with does not do exactly what you are hoping for. It does give you a hint on where to look for an answer - I hope. Please see the image below.

If I understand correctly you would want to colour the background of the whole PYTHON code block with a colour… not only the section where words are written. I do not know how to do that - my version only has a black background for the words. Someone here might know how the LESS coding should look like.



How about this one?
(note the display: block;)

@tonyriverms - Is that anything close to what you are hoping to get?


Thanks a lot!! Problem solved!


Thanks a lot! Yes, adding “syntax–” to each part!