Sublime Forum

Mixing default JS syntax with HTML tagged function

#1

I’ve researched about this a lot and there’s lit element package which does a great job but it defines its own syntax. let me explain what I want

html`<div>${myobj.getText({simple: true})}</div>`

this should start the basic html syntax after html and a basic template literal expression syntax for javascript after ${. the expression syntax should be popped with a top level (in the expression) curly brace ending } since there can be a multiple curly braces. the same for the string itself - the last top level backtick should pop the html syntax.

but these should extend or use the default syntax definitions. I don’t want the highlighting change colors when I switch from default js syntax.

I think this should really be simple but I’m not familiar with this yaml synax definition stuff so can anyone help me on this?

0 Likes
#2

You may want to look into JSCustom and see if that will work for you.

I’ve used it in the past for exactly this thing; my JS Custom.sublime-settings file is:

{
    "configurations": {
        "Default": {},
        "Lit": {
            "flow_types": true,
            "jsx": true,
            "custom_templates": {
                "tags": {
                    "css": "scope:source.css",
                    "html": "scope:text.html.basic"
                },
            }
        },
    },   
}

This, in a nutshell would use a template function like html to mark off content that should be treated as HTML and css as a template function to mark off content that should be CSS.

It has been a while since I did anything with Lit so I can’t recall offhand how the template literal expressions highlight, so extra tweaking of the config may be required.

0 Likes