Creating new syntax highlight with custom CSS


#1

Hi,

I am trying to create a new syntax highlight for one of my packages using a custom CSS style. What I want is to change the text color of the the string ‘- Unstranslated Subtitle -’ to red.

Here is my CSON file, which is inside the grammars folder:

'scopeName': 'source.srt'
'name:': 'SRT'
'fileTypes': ['SRT']

'patterns': [
	{
		'match': '^- Untranslated subtitle -$'
		'name': 'unstranslated'
	}
]

And here is my srt-helper.less class inside my styles folder:

@import "ui-variables";

.srt-helper
{
	.block-centered
	{
		text-align: center;
	}

	.panel-heading-centered
	{
		text-align: center;
	}
}


atom-text-editor::shadow
{
	.unstranslated
	{
		color: red;
	}
}

I know that the ‘^- Untranslated subtitle -$’ regex is working, because if I change the ‘name:’ to an existing style, like: ‘constant.numeric.integer.hexadecimal.python’, the syntax highlight works. So, I believe that I am not adding the new ‘unstranslated’ style correctly.

Could you help me?


#2

Atom doesn’t use a shadow-DOM any more. That was changed in an update recently. You should remove the ::shadow and rename .unstranslated to .syntax--unstranslated. Does anything change when you do that?


#3

Hi,

I’ve changed my srt-helper.less to:

@import "ui-variables";

.srt-helper
{
	.block-centered
	{
		text-align: center;
	}

	.panel-heading-centered
	{
		text-align: center;
	}

	.syntax--unstranslated
	{
		color: red;
	}
}

But it is still not working.

Note: I’ve also tried several combinations on the srt.cson file, such as:

'name': 'unstranslated'
'name': 'syntax--unstranslated'
'name': 'srt-helper.unstranslated'
'name': 'srt-helper.syntax--unstranslated'

But none of them worked. The full file is below:

'scopeName': 'source.srt'
'name:': 'SRT'
'fileTypes': ['SRT']

'patterns': [
	{
		'match': '^- Untranslated subtitle -$'
		'name': 'srt-helper.syntax--unstranslated'
	},
	{
		'match': '.{40,}'
		'name': 'constant.numeric.integer.hexadecimal.python'
	}
]

#4

Is the class name really supposed to be unstranslated and not untranslated?


#5

Hi @leedohm

Yes, you are right, it is a typo. But apparently I made a consistent typo, because it is also written unstranslated on the other files. :slight_smile:

Anyway, I’ve just changed everything to untranslated, but unfortunately the problem remains.

I also want to take the opportunity to ask: which name property below (if any) should I put in the srt.cson file?

'name': 'untranslated'
'name': 'syntax--untranslated'
'name': 'srt-helper.untranslated'
'name': 'srt-helper.syntax--untranslated'

#6

Hi,

I got it! :slight_smile:

The problem was that the syntax highlight styles shouldn’t be inside the .srt-helper style. Also, they are only loaded when the actual project is loaded, so I think I should disable lazy loading if I want to have the syntax highlight working from the start…

Thank you all for the help!

Here are the files:

srt-helper.less:

@import "ui-variables";

.srt-helper
{
	.block-centered
	{
		text-align:center;
	}

	.panel-heading-centered
	{
		text-align:center;
	}
}

.syntax--untranslated
{
	color: red;
}

.syntax--copied-text
{
	color: blue;
}

srt.cson:

'scopeName': 'source.srt'
'name:': 'SRT'
'fileTypes': ['SRT']

'patterns': [
	{
		'match': '^- Untranslated subtitle -$'
		'name': 'untranslated'
	},
	{
		'match': '.{40,}'
		'name': 'copied-text'
	}
]

#7

Glad to hear that it is working for you now. I assumed that it was a consistent typo since it was spread everywhere in your examples … but I didn’t think it would hurt to ask :grinning:


#8

I was having the same exact problem, and I was so happy when I found this thread. However, none of the changes proposed above solved my problem, and I cannot even get the final fixed versions to work. Has anything changed in the way styles are loaded since this solution?


#9

Nothing has changed. If you post screenshots of your files or a GitHub link, maybe we can see something there.


#10

I’m an idiot, the styles weren’t loading when I expected them to. Thanks!


#11

Glad you got it to work. :slight_smile: