Adding support for the additional inline syntax to Markdown

v6
1

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:

2

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
3

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,
    })
  ]
}
4

been looking for answers on how to enable strikethrough in GFM and found this thread. With that statement, does that mean we’ll have to create a markdown parser for the strikethrough, just like the example you’ve given for == delimiters? or if strikethrough is already baked in the CM 6 and GFM, i couldn’t figure out for hours how to implement/enable it.

I have created a new topic for this: Implementing GFM Strikethrough on Markdown