Disable HTML language support in lang-markdown

1

How do I go about disabling the HTML syntax highlighter when using lang-markdown extension?

In my editor, I want to enable Liquid and Commonmark, but disable HTML syntax highlighting (as we’re disabling that for our implementation).

This is what my current configuration looks like:

export const editorSetup = ((settings) => {
  const options = deepMerge({
    liquid: {
      base: markdown({
        base: commonmarkLanguage
        , completeHTMLTags: false
      })
    }
    , autocompletion: {}
  }, settings);

  return [
    lineNumbers(),
    highlightActiveLineGutter(),
    highlightSpecialChars(),
    history(),
    foldGutter(),
    drawSelection(),
    dropCursor(),
    EditorState.allowMultipleSelections.of(true),
    indentOnInput(),
    syntaxHighlighting(defaultHighlightStyle, {fallback: true}),
    bracketMatching(),
    closeBrackets(),
    autocompletion(options.autocompletion),
    rectangularSelection(),
    crosshairCursor(),
    highlightActiveLine(),
    highlightSelectionMatches(),
    keymap.of([
      ...closeBracketsKeymap,
      ...defaultKeymap,
      ...searchKeymap,
      ...historyKeymap,
      ...foldKeymap,
      ...completionKeymap,
      ...lintKeymap,
      // allow the tab to accept autocompletion
      { key: "Tab", run: acceptCompletion },
      indentWithTab
    ]),
    liquid(options.liquid),
    // set the indentation behavior
    indentUnit.of("\t"),
    EditorState.tabSize.of(2),
  ]
});

I think I need to override the htmlTagLanguage in the markdown() call, but not sure how to effectively “disable” the setting.

2

Do you want it to not parse HTML, or to not highlight it? The first sounds more reasonable, and can be done by configuring the Markdown parser with an extensions that removes the "HTMLBlock" and "HTMLTag" parsers.

3

I tried adding remove: ["HTMLBlock", "HTMLTag"] to my configuration, but that did not change the behavior.

My goal is to treat HTML as plain text in the editor, as that’s the way it’s treated when rendering.

(Technically, we support a few custom tags in our Commonmark implementation, so it would be great to define just some specific tags that get syntax support, but I’d be okay with just treating all HTML as plain text because I don’t want users thinking that standard HTML tags have any rendering behavior.)

4

I think the reason it might not be doing anything is that I added the remove as a config option to @codemirror/lang-markdown and it needs to be set on the @lezer/markdown, but I’m not sure how to apply the lezer config options to the extension.

5

See this example.

6

Amazing!

That is what I needed!

Thank you so much, this has saved me a lot of time!

7

So using a MatchDecorator, I was able to add color highlighting for my special tag that’s supported.

example

Using a MatchDecorator, is there a way I could apply different styles to the attributes?

It looks like the decorator callback gets the arguments (add, from, to, match, view), so it would seem possible.

8

If you want to add multiple decorations for a single match, the decorate method is what you want.