Implementing GFM Strikethrough on Markdown

v6
2

So apparently GFM doesn’t actually render line-through to its strike-through elements. Correct me if I’m wrong, one reason why is because they felt it should be done manually through CSS styling.

Anyways i have this working by implementing my own Markdown inline parser:

Create a markdown extension and export your custom tags:

// strikethrough.js

import { styleTags, Tag, tags } from "@codemirror/highlight"

export const strikethroughTags = {
    strikethrough: Tag.define(),
};

const StrikethroughDelim = { resolve: "Strikethrough", mark: "StrikethroughMark" };

export const Strikethrough = {
    defineNodes: ["Strikethrough", "StrikethroughMark"],
    parseInline: [{
        name: "Strikethrough",
        parse(cx, next, pos) {
            if (next != 126 /* '~' */ || cx.char(pos + 1) != 126) {
                return -1;
            }
            return cx.addDelimiter(StrikethroughDelim, pos, pos + 2, true, true);
        },
        after: "Emphasis"
    }],
    props: [
        styleTags({
            StrikethroughMark: tags.processingInstruction,
            'Strikethrough/...': strikethroughTags.strikethrough
        })
    ]
}

Add the custom tags to your highlight styles

// highlight.js

import { HighlightStyle, tags } from '@codemirror/highlight';
import { strikethroughTags } from './strikethrough';

export const myHighlightStyle = HighlightStyle.define([
  ...,
  { tag: strikethroughTags.strikethrough, textDecoration: 'line-through' }
]);

Finally add your custom strikethrough custom extension

import { Strikethrough } from './strikethroughHighlight';
...

const initialState = EditorState.create({
  doc: '',
  extensions: [
   ...,
    markdown({
      base: markdownLanguage,
      extensions: [
        Strikethrough,
      ]
    }),
    myHighlightStyle,
  ],
});

Honestly it’s hard to follow the docs alone, but fortunately with the active help of the maintainer and others in answering to all of the questions in the forum, it can guide me to the right direction.

Add’tl references: https://www.npmjs.com/package/lezer-markdown