custom syntax highlighting [JS]



  • 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



  • 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



  • @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?



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

    Cheers
    Claudia



  • @Claudia-Frank
    hmm I tried but without luck



  • 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



  • @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



  • @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



  • @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)



  • @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



  • @Claudia-Frank
    thank you for confirming this



  • @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



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


Log in to reply