Adding support for the additional inline syntax to Markdown

Hi,

I’ve got a question about adding additional inline formats to Markdown. I’m currently initializing the editor with GFM syntax, by calling:

markdown({ base: markdownLanguage })

As far as I understood, the Markdown parser is extensible, but I failed to extend the GFM syntax further. The highlighting. The inline format, I’m trying to add is (my Markdown converter will wrap this in <mark> tags):

This is some ==highlighted text==.

This markdown parser should add a Highlight syntax node around the whole format and the == should become HighlightMark nodes.

Any help is very welcome. :slight_smile:

You should be able to do something like this (slight change to the GFM strikethrough extension in the markdown parser);

import {MarkdownConfig} from "lezer-markdown"
import {styleTags, tags} from "@codemirror/highlight"

const HighlightDelim = {resolve: "Highlight", mark: "Highlight"}

const Highlight: MarkdownConfig = {
  defineNodes: ["Highlight", "HighlightMark"],
  parseInline: [{
    name: "Highlight",
    parse(cx, next, pos) {
      if (next != 61 /* '=' */ || cx.char(pos + 1) != 61) return -1
      return cx.addDelimiter(HighlightDelim, pos, pos + 2, true, true)
    },
    after: "Emphasis"
  }],
  props: [
    styleTags({
      HighlightMark: tags.processingInstruction,
      Highlight: tags.special(tags.strong)
    })
  ]
}

And then add an extension like this to your editor:

  markdown({
    base: markdownLanguage,
    extensions: [Highlight]
  })
1 Like

Thank you very much (again)! Works pretty great, just made a few adjustments:

export const tags = {
  highlight: Tag.define(), // define custom tag, that can be picked up by the style configuration
};

const HighlightDelim = { resolve: "Highlight", mark: "HighlightMark" };

const Highlight = {
  defineNodes: ["Highlight", "HighlightMark"],
  parseInline: [{
    name: "Highlight",
    parse(cx, next, pos) {
      if (next != 61 /* '=' */ || cx.char(pos + 1) != 61) {
        return -1;
      }
      return cx.addDelimiter(HighlightDelim, pos, pos + 2, true, true);
    },
    after: "Emphasis"
  }],
  props: [
    styleTags({
      HighlightMark: defaultTags.processingInstruction,
      "Highlight/...": tags.highlight,
    })
  ]
}