search

Thom1729 / Sublime-JS-Custom

Customizable JavaScript syntax highlighting for Sublime Text.
MIT License
137 stars 9 forks source link

How can we highlight template literals as JavaScript? #140

Closed kireerik closed 1 year ago

kireerik commented 1 year ago

To highlight as HTML it works like this:

"custom_template_tags": {
    "": "scope:text.html.basic"
}

  To highlight as JavaScript I tried the following for example:

"custom_template_tags": {
    "": "scope:source.js"
}
Thom1729 commented 1 year ago

It's not clear to me what you're asking. You might be looking for the default configuration option.

kireerik commented 1 year ago

It works like that. Thank you!

"custom_templates": {
    "default": "scope:source.js"
}
kireerik commented 1 year ago

How can I restore the default highlighting for template strings (in lookaheads)?

I know how to set lookaheads, but I don't know what should the value be to reset to the default (in a js file).

Thom1729 commented 1 year ago

You want e.g. templates to be highlighted as HTML by default, but as plain template strings with a lookahead? I'm having trouble envisioning the use case; can you provide an example?

If that's what you mean, then I'm not sure there's a clean solution at the moment. You could do it as follows:

"custom_templates": {
  "default": "scope:text.html.basic",
  "lookaheads": {
    "foo": "string-content"
  }
},

But a) you won't get the proper string scope, and b) this is kind of hacky and brittle. If this is a real use case for you, then it might not be too much of a code change to support it.

kireerik commented 1 year ago

Yes, but not as HTML (but as JavaScript), yes.

I have tried what you suggest, but it is not working. So yes it would be nice to have this.

This is how I am trying:

"custom_templates": {
    "default": "scope:source.js"
    , "lookaheads": {
        "\\<": "scope:text.html.basic"
        , ".": "string-content"
    }
}

I would like to restore the default highlighting for these type of dynamic imports for example:

Thom1729 commented 1 year ago

Rather than ".": "string-content", you need "\\.": "string-content". The key there is interpreted as a regexp, so the dot will match anything; you need a backslash to escape the dot, and then another backslash for JSON escaping. Without that, any string will match the lookahead, so you'll never see the default.

This seems to work for me, with the caveat that (as mentioned above) e.g. ./foo won't get the normal string scope (and color).

Alternatively, what about:

"custom_templates": {
  "lookaheads": {
    "\\<": "scope:text.html.basic",
    "import": "scope:source.js",
  },
},
kireerik commented 1 year ago

The alternative is not working.

kireerik commented 1 year ago

Seems like the solution is to not define the default at all. Like this for example:

"custom_templates": {
    "lookaheads": {
        "\\<|.\\>": "scope:text.html.basic"

        , "var": "scope:source.js"
    }
}
Thom1729 commented 1 year ago

Yeah, that's what I meant. Sorry it wasn't clear. Does that work for your use case? If not I can create a feature ticket.

kireerik commented 1 year ago

Yes, it works like this for me. Thank you!

kireerik commented 1 year ago

Similarly to template strings can I set (custom) highlighting (using lookaheads) for regular strings?

Thom1729 commented 1 year ago

That is not currently a feature. Given that you can use template strings anywhere, I suspect that custom embedding for single/double-quoted strings would not be useful enough to justify the complexity. In addition, there might be substantial performance implications. What is your use case for this?

kireerik commented 1 year ago

Yes, it would be just nice to have. I have some single line html strings and ' looks simpler and it is easier to type in these cases compared to `.

kireerik commented 1 year ago

I am implementing JavaScript Extensible Markup Language usage for some parts that are currently modules and will become (SolidJS) components in the Refo static site example.

So for example the following line:

will look like this:

{template(`<!DOCTYPE HTML>`)}

and unfortunately this line too for example:

{template(`<head>`)}