I’m trying to create an instance CodeMirror 6 with the Liquid templating extension. In my use case, I’m going to allow HTML-style comments in the editor, but other HTML is not allowed.
What I’m trying to do is get the editor to apply syntax highlight to the HTML comment blocks, but not have it apply Liquid syntax highlighting inside the comment.
Right now if the editor has something like:
<!--// here is a comment with a liquid {{ name }} variable //-->
The editor will end up applying Liquid syntax highlighting to {{ name }}.
I’ve been reading through the documentation and searching, but none of the solutions I have tried are working.
How would I get the Liquid extension to ignore parsing HTML comments?
Here’s an example that shows off the issue:
import {basicSetup, EditorView} from "codemirror"
import {liquid} from "@codemirror/lang-liquid";
import {languages} from "@codemirror/language-data"
// The Markdown parser will dynamically load parsers
// for code blocks, using @codemirror/language-data to
// look up the appropriate dynamic import.
let view = new EditorView({
doc: "hello\n<!-- a comment is {{ name }} here -->\nworld",
extensions: [
basicSetup,
liquid()
],
parent: document.body
})
How would I go about updating that example so that the liquid command are ignored in the comments?
I don’t think @codemirror/lang-liquid is going to be able to help with that. You could configure it with a base language that is plain text with just HTML comments, but it won’t skip those comments when looking for Liquid directives.
Thanks for the quick response, it’s very appreciated!
I thought there might be a way to get the parser to process comments before it tried applying formatting and then maybe I could exclude the Liquid extension from parsing that content or at least have the comment style applied to the line so I could override the color coding.
I technically don’t care if it’s parsing the comments, I just want the color coding to match that of a comment, not a Liquid variable.
Is it possible somehow possible to at least get the commenting color applied?
What I’m seeing is the comment class is not applied to the liquid tokens, nor are they in a parent element that has the comment class applied, so maybe there’s no way to do that either.
Indeed, Liquid tree structure isn’t a child of the base language’s tree structure (there’s no real hierarchical nesting between them). So styling cannot be ‘inherited’ between those.