Tip: Debugging HighlightStyle classes for Themes

Lezer
1

If (like me) you’re a bit stuck determining what Lezer tag applies to each piece of syntax, you can utilize this minimal HighlightStyle along with your browser’s DevTools inspector to see exactly what each tag is.

import { HighlightStyle, syntaxHighlighting } from "@codemirror/language";
import { tags } from "@lezer/highlight";

// Helpful "theme" to debug what Lezer tag properly matches each piece of the syntax.
// https://lezer.codemirror.net/docs/ref/#highlight.tags
const debugHighlightStyle = HighlightStyle.define(
  Object.entries(tags).map(([key, value]) => {
    return { tag: value, "--tag": `tag.${key}` };
  })
);

const debugTheme = [syntaxHighlighting(debugHighlightStyle)];

export { debugTheme, debugHighlightStyle };

Then apply it in your extensions:

let myView = new EditorView({
  state: EditorState.create({
    doc: "hello",
    extensions: [debugTheme]
  }),
  parent: document.body
})

Then inspect your code in the browser and look for the CSS property --tag

Example: Screen Recording 2022-06-16 at 2.mp4 - Droplr

3 Likes
2

Followup: You can more easily inspect using psuedo elements and a regular theme.

import { EditorView } from "codemirror";
import { HighlightStyle, syntaxHighlighting } from "@codemirror/language";
import { tags } from "@lezer/highlight";

// Helpful "theme" to debug what Lezer tag properly matches each piece of the syntax.
// https://lezer.codemirror.net/docs/ref/#highlight.tags
const debugTheme = EditorView.theme({
  ".cm-line span": {
    position: "relative",
  },
  ".cm-line span:hover::after": {
    position: "absolute",
    bottom: "100%",
    left: 0,
    background: "black",
    color: "white",
    border: "solid 2px",
    borderRadius: "5px",
    content: "var(--tags)",
    width: `max-content`,
    padding: "1px 4px",
    zIndex: 10,
    pointerEvents: "none",
  },
});
const debugHighlightStyle = HighlightStyle.define(
  Object.entries(tags).map(([key, value]) => {
    return { tag: value, "--tags": `"tag.${key}"` };
  })
);

const debug = [debugTheme, syntaxHighlighting(debugHighlightStyle)];

export { debug, debugTheme, debugHighlightStyle };

let myView = new EditorView({
  state: EditorState.create({
    doc: "hello",
    extensions: [debug]
  }),
  parent: document.body
});
4 Likes