custom syntax highlighting [JS]

Wolf War

I would like to create custom syntax highlighting for

chrome.storage.local.get
chrome.i18n
chrome.runtime.sendMessage
//etc...

and to keep defined coloring for keywords, so that those custom ones stick out in some different color (eg. bluish).
So far I only manage to add my words to KEYWORDS, but in that case, color is the same like the rest of the keywords.
So how to create my own syntax highlighting for custom keywords?
language: JavaScript
theme from SS: Waher-style

Claudia Frank

Hello @Wolf-War,

in langs.xml add a new keywords tag with your keywords.
Depending if you use a different theme then it is your_theme.xml or default stylers.xml add a new Wordstyle tag.
Name and styleID must be unique. Add keywordClass=“instreX” at the end of the tag. X needs to be replaced with
the actual number, of course.

Cheers
Claudia

Wolf War

@Claudia-Frank said:

keywordClass=“instreX”

Hi @Claudia-Frank
I’ve manged to do something but not good enough
In theme that I’m using Waher-style I added new WordsStyle tag with unique name and ID…
and it is recognized by app style editor (shown in list as MY_KEYWORDS)
http://prntscr.com/anqf7m

but any word that I add to it it, behaves like old predefined keywords style
http://prntscr.com/anqfw5
in this case chrome should be green as my costume keyword, but its colored as default keyword

I think that klassKeyword plays roll in it… if I add keywordClass=“instre1” it’s like old keyword
if I change instre to another number, no coloring… do I need to define that new instre eg instre2 somwhere else?

Claudia Frank

Yes, in langs.xml add a new keywords tag with your keywords.

Cheers
Claudia

Wolf War

@Claudia-Frank
hmm I tried but without luck

Claudia Frank

Hello @Wolf-War,

as an example what I have done for python

in langs.xml

    <Language name="python" ext="py pyw" commentLine="#">
        <Keywords name="instre1">and as assert break class continue def del elif else except exec False finally for from global if import in is lambda None not or pass print raise return True try while with yield</Keywords>
        <Keywords name="instre2">editor editor1 editor2 notepad console</Keywords>
    </Language>

I added the a second keywords tag and named it instre2 with a given list of keywords.

In Dark2012.xml (the theme that I use) I modified

    <LexerType name="python" desc="Python" ext="">
        <WordsStyle name="DEFAULT" styleID="0" fgColor="C8C8C8" bgColor="1E1E1E" fontName="" fontStyle="0" fontSize="" />
        <WordsStyle name="COMMENTLINE" styleID="1" fgColor="57A64A" bgColor="1E1E1E" fontName="" fontStyle="0" fontSize="" />
        <WordsStyle name="NUMBER" styleID="2" fgColor="BD63C5" bgColor="1E1E1E" fontName="" fontStyle="1" fontSize="" />
        <WordsStyle name="STRING" styleID="3" fgColor="D69D85" bgColor="1E1E1E" fontName="" fontStyle="0" fontSize="" />
        <WordsStyle name="CHARACTER" styleID="4" fgColor="D69D85" bgColor="1E1E1E" fontName="" fontStyle="0" fontSize="" />
        <WordsStyle name="KEYWORDS" styleID="5" fgColor="367DC6" bgColor="1E1E1E" fontName="" fontStyle="0" fontSize="" keywordClass="instre1" />
        <WordsStyle name="TRIPLE" styleID="6" fgColor="C8C8C8" bgColor="1E1E1E" fontName="" fontStyle="0" fontSize="" />
        <WordsStyle name="TRIPLEDOUBLE" styleID="7" fgColor="C8C8C8" bgColor="1E1E1E" fontName="" fontStyle="0" fontSize="" />
        <WordsStyle name="CLASSNAME" styleID="8" fgColor="8080FF" bgColor="1E1E1E" fontName="" fontStyle="0" fontSize="" />
        <WordsStyle name="DEFNAME" styleID="9" fgColor="8080FF" bgColor="1E1E1E" fontName="" fontStyle="0" fontSize="" />
        <WordsStyle name="OPERATOR" styleID="10" fgColor="FF8000" bgColor="1E1E1E" fontName="" fontStyle="0" fontSize="" />
        <WordsStyle name="IDENTIFIER" styleID="11" fgColor="8DA6CE" bgColor="1E1E1E" fontName="" fontStyle="0" fontSize="" />
        <WordsStyle name="COMMENTBLOCK" styleID="12" fgColor="57A64A" bgColor="1E1E1E" fontName="" fontStyle="0" fontSize="" />
        <WordsStyle name="DECORATOR" styleID="13" fgColor="D69D85" bgColor="1E1E1E" fontName="" fontStyle="0" fontSize="" />
        <WordsStyle name="USERDEFINED" styleID="14" fgColor="D69D85" bgColor="1E1E1E" fontName="" fontStyle="0" fontSize="" keywordClass="instre2"/>
    </LexerType>

the lexertype tag by adding a new word style with name USERDEFINED (can be any other name), styleID=14 (which was the next in row)
and added keywordClass=“instre2” to reflect the changes in langs.xml.

Did you do the same?

Cheers
Claudia

Wolf War

@Claudia-Frank
thanx for your effort
yes, I did that but in actual code there is not effect
in Style Configurator everything is recognized (MY_KEYWORDS) but the words are not colored (green)

Alt

Claudia Frank

@Wolf-War
can you point me to the location from where you’ve downloaded the waher style?
I would give it a try to test and see what the problem is.

Cheers
Claudia

Wolf War

@Claudia-Frank
I’m not sure where I download it from, long time ago
but here is the file that I’m using (uploaded to Gdrive)

Claudia Frank

@Wolf-War

you are right, it doesn’t work with javascript.
First I tried my python changes, which worked fine but changing the same for javascript doesn’t work.
As you said, we are seeing the new keywords but different coloring doesn’t happen.

Need to investigate this.

Cheers
Claudia

Wolf War

@Claudia-Frank
thank you for confirming this

Claudia Frank

@Wolf-War

ok, short answer, javascript doesn’t support it.

Longer answer javascript doesn’t support all keyword class names, which would be

instre1
instre2
type1
type2
type3
type4
type5

It only supports instre1, instre2 and type1 - hardcoded in source (),
the same applies to the styles names like number, word, keyword …
You can define a new style name but it never gets used.

Beside this, waher.xml has to name it javascript.js

<LexerType name="javascript.js" desc="JavaScript" ext="">

as javascript has become the embedded one.

Cheers
Claudia

Wolf War

@Claudia-Frank
ok, tnx again
at least I didn’t screw it :)
cheers