CodeMirror 6 RunMode

highlight.ts

// Reimplementation of runmode util https://codemirror.net/5/demo/runmode.html
// https://lezer.codemirror.net/examples/highlight/#running-a-highlighter

import { Parser } from "@lezer/common";
import { Highlighter, highlightTree } from "@lezer/highlight";

export function highlight<Output>(
  text: string,
  parser: Parser,
  highlighter: Highlighter,
  callback: (
    text: string,
    classes: string | null,
    from: number,
    to: number,
  ) => Output,
): Output[] {
  const tree = parser.parse(text);
  const output: Array<Output> = [];
  let pos = 0;
  highlightTree(tree, highlighter, (from, to, classes) => {
    if (from > pos)
      output.push(callback(text.slice(pos, from), null, pos, from));
    output.push(callback(text.slice(from, to), classes, from, to));
    pos = to;
  });
  pos != tree.length &&
    output.push(callback(text.slice(pos, tree.length), null, pos, tree.length));
  return output;
}

export default highlight;

Highlight.tsx

// Copy of https://github.com/craftzdog/react-codemirror-runmode
// with support for custom languages

import React from "react";

import { Parser } from "@lezer/common";
import { Highlighter } from "@lezer/highlight";
import { StyleModule } from "style-mod";

import highlight from "./highlight";
import { HighlightStyle } from "@codemirror/language";

export const Highlight = React.memo<{
  parser: Parser;
  text: string;
  highlighter: Highlighter;
}>(function Highlight(props) {
  const { parser, text, highlighter } = props;

  const [high, setHigh] = React.useState<React.ReactNode[] | null>([text]);

  React.useEffect(
    function highlightText() {
      setHigh(
        highlight(text, parser, highlighter, (text, classes, from) => (
          <span key={from} className={classes || ""}>
            {text}
          </span>
        )),
      );
    },
    [parser, text, highlighter],
  );

  // https://github.com/codemirror/language/blob/main/src/highlight.ts
  // outside of the editor, you may want to manually mount this module
  React.useEffect(
    function mountHighlightStyle() {
      if (highlighter instanceof HighlightStyle) {
        StyleModule.mount(document, highlighter.module);
      }
    },
    [highlighter],
  );

  return <>{high}</>;
});