Using Lezer Markdown extensions breaks code-block highlighting

[acnebs]

Hi, I've found some weird behavior when trying to use Markdown extensions.

Basically, if I use any extension at all alongside the parser, e.g.

markdown({extensions: [Superscript]})

Code-blocks within the markdown will no longer be syntax-highlighted. The other strange behavior is that if I apply a HighlightStyle which targets tags.monospace it works when an extension is supplied (i.e. when syntax highlighting is broken) but not when extensions is absent.

Here is a minimal repro:

import CodeMirror from "@uiw/react-codemirror";

import { markdown } from "@codemirror/lang-markdown";
import { languages } from "@codemirror/language-data";
import {
  defaultHighlightStyle,
  HighlightStyle,
  tags
} from "@codemirror/highlight";

import { Superscript } from "@lezer/markdown";

const highlightStyle = HighlightStyle.define([
  { tag: tags.monospace, fontFamily: "Helvetica", fontSize: "14px" }
]);

const extensions = [
  defaultHighlightStyle,
  highlightStyle,
  markdown({
    codeLanguages: languages,
    // comment out and js highlighting works again,
    // but tags.monospace style stops being applied
    extensions: [Superscript]
  })
];

const defaultValue = `\
# Hello

## foo

\`\`\`javascript
// a function that returns something
function foo() { 
  return 'hi' 
}
\`\`\`
`;

export default () => (<CodeMirror extensions={extensions} value={defaultValue} />);

[marijnh]

Thanks for bringing that to my attention. There was a bug in @lezer/markdown that caused it to drop part of the configuration when multiple aspects were configured. Attached patch (released as 0.15.3) should fix it.

[acnebs]

That's great, the syntax highlighting is fixed for me in 0.15.3. Do you have any thoughts on why my monospace highlight style isn't being applied when the extensions are functioning?

[marijnh]

The parse tree for the code blocks will overlay the CodeText nodes, so you'll get only the highlighting for the inner tree, not the replaced nodes.

[acnebs]

Ah gotcha. Yep this seems to be a more complicated problem than I originally expected.

Seems like there was a previous discussion about this for a prior CM version but not for CM6.

[marijnh]

You should be able to pass an extension that adds some style tag to, for example, the CodeBlock and FencedCode nodes, and then style those.