highlighting markdown mark only?

v6
1

I’m going to highlight Markdown’s mark using @codemirror/highlight and @codemirror/lang-markdown.

For example, I want to highlight the mark of heading(#, ##, ### and so on), but I don’t know how to select only a specific mark.

This is my code right now.

import { markdown, markdownLanguage } from '@codemirror/lang-markdown'
import { languages } from '@codemirror/language-data'
import { EditorState } from '@codemirror/state'

const highlightStyle = HighlightStyle.define([
    {
      tag: tags.heading1,
      color: 'black',
      fontSize: '1.75em',
      fontWeight: '700',
    },
   {
      tag: tags.processingInstruction,
      color: 'blue',
    },
   // …
]);

  return EditorState.create({
    doc: options.doc,
    selection: options.selection,
    extensions: [
      markdown({
        base: markdownLanguage,
        codeLanguages: languages,
      }),
     highlightStyle,
    ],
  });
2

Those aren’t currently tagged with a specific highlighting tag, so you can’t target them in a highlight style. But it should be possible to pass the return value of styleTags to your markdown configuration (via an extension with a props property).

3

This is how it’s done:

import { markdown, markdownLanguage } from '@codemirror/lang-markdown'
import { languages } from '@codemirror/language-data'
import { EditorState } from '@codemirror/state'
import { MarkdownConfig } from '@lezer/markdown';

const customTags = {
  headingMark: Tag.define(),
};

const MarkStylingExtension: MarkdownConfig = {
  props: [
    styleTags({
      HeadingMark: customTags.headingMark,
    }),
  ],
};

const highlightStyle = HighlightStyle.define([
 {
    tag: customTags.headerMark,
    color: 'blue',
  },
  {
    tag: tags.heading1,
    color: 'black',
    fontSize: '1.75em',
    fontWeight: '700',
  },
]);

const editorState = EditorState.create({
  doc: options.doc,
  selection: options.selection,
  extensions: [
    markdown({
      base: markdownLanguage,
      codeLanguages: languages,
      extensions: [MarkStylingExtension],
    }),
   highlightStyle,
  ],
});

You can find the other names like HeadingMark in the @lezer/markdown package, around here.

1 Like
4

For me isn’t working, I got this error any time I add highlightStyle as an extension.

Uncaught Error: Unrecognized extension value in extension set ([object Object]). This sometimes happens because multiple instances of @codemirror/state are loaded, breaking instanceof checks.

May you help me over here?.

5

syntaxHighlighting from @codemirror/language has to be called on the HighlightStyle to obtain an extension, i.e. the extension should be syntaxHighlighting(highlightStyle) in the above example