How to customize existing language.hjson to add my own custom syntax highlighting?


#1

Hi,

I’m trying to customize the custom language HJSON package to support some custom highlighting of syntaxes using regex. I think it’s this one:

HJSON supports multiline strings. I’m trying to add some custom highlighting. Take the following as an example:

{
datafile: "This is a human-readable JSON file",
multilineStr: '''
    This is a multiline string with some custom commands.
    c "hello world"
    i star move up
'''
} 

So as you can see, I want to highlight:

c "hello world"

in red. and the other one:

i star move up

in blue.

Since they’re in a multliline string already, how do I go about this?


#2

You do it using embedded patterns. Take the multiline string definition.

    "mstring":
    {
      "name": "string.quoted.multiline.hjson",
      "begin": "'''",
      "end": "'''",
      "beginCaptures": { "0": { "name": "punctuation.definition.string.begin.hjson" } },
      "endCaptures": { "0": { "name": "punctuation.definition.string.end.hjson" } }
    }

The following modification searches inside the block for child patterns:

    "mstring":
    {
      "name": "string.quoted.multiline.hjson",
      "begin": "'''",
      "end": "'''",
      "beginCaptures": { "0": { "name": "punctuation.definition.string.begin.hjson" } },
      "endCaptures": { "0": { "name": "punctuation.definition.string.end.hjson" } },
      "patterns":
      [
        {
          "name": "message.custom.hjson",
          "match": "c \\".*\\"$"
        },
        {
          "name": "action.custom.hjson",
          "match": "i .*$"
        }
      ]
    }

You can see an example here.


#3

Hey thanks for that! How do I apply the colors in the style.less file? I’ve tried the following and I don’t see any changes to the text color:

.message.custom.hjson,
message.custom.hjson {
  color: #FF000;
}

atom-text-editor .message.custom.hjson {
color: #FF000;
}

#4

Until the shadow DOM removal is released, you have to use a special selector to get inside the text editor. To future-proof it, you can use both.

atom-text-editor .message.custom.hjson,
atom-text-editor::shadow .message.custom.hjson {
  color: #FF000;
}

#5

Yep. Got it to work. There was an error in the string regex. In the example, it’s supposed to be:

“c \”.*\"$"

It seems I needed to escape the escape character.


#6

The double escapes are correct in the original snippet I posted.