I have a problem with Lit code. I’d like to use html context (proper indentions, autocompletion, comments etc.) within a template string in a Lit component (the same is for css context).
Lit code example:
...
render() {
return html`
<div>
<div>
</div>
</div>
`
}
...
So my question: is it possible to customize existing js language and specify rules for other languages context (e.g. html, css).
Thanks for any help!
Yes, you should be able to register new mixed parsers like this.
It helped a lot, thanks
Hey Thanks for this works perfect, but what i try to add is css praser inside the html with
what i come up so far is:
function mixedHTML() {
const mixedHTMLParser = javascriptLanguage.parser.configure({
wrap: parseMixed((ref, input) => {
if (ref.name != 'TaggedTemplateExpression') return null;
let { node } = ref,
tag = node.getChild('Expression'),
templ = tag?.nextSibling;
if (
!tag ||
!templ ||
tag.name != 'VariableName' ||
templ.name != 'TemplateString' ||
input.read(tag.from, tag.to) != 'html'
)
return null;
let ranges = [],
pos = templ.from + 1,
cur = templ.cursor();
if (cur.firstChild())
for (;;) {
if (cur.from > pos) ranges.push({ from: pos, to: cur.from });
pos = cur.to;
if (!cur.nextSibling()) break;
}
if (pos < templ.to - 1) ranges.push({ from: pos, to: templ.to - 1 });
return {
parser: htmlLanguage.parser.configure({
nestedLanguages: [
{
tag: 'style',
parser: cssLanguage.parser
}
]
}),
overlay: ranges
};
}),
dialect: 'ts'
});
return LRLanguage.define({ parser: mixedHTMLParser });
}
not sure if i can use the nesdedLanguages in this case
my Lit return code looks like this:
render() {
return html`
<style>
</style>
<div>
<div>
</div>
</div>
`
}
Assuming htmlLanguage comes from @codemirror/lang-html, that will already be configured to parse nested <style> and <script> tags, so there shouldn’t be a need to reconfigure it. Also, nestedLanguages is not a valid option to LRParser.configure.
Hello @marijn, yes htmlLanguage is from @codemirror/lang-html and what i use is:
but for me it looks like the css is not prased as css in
… I can see CSS syntax highlighting in that screenshot.
bum! Thanks! looks like i need only change the hightlight Theme?
