# Implementing GFM Strikethrough on Markdown

**URL:** <https://discuss.codemirror.net/t/implementing-gfm-strikethrough-on-markdown/3196>\
**Category:** v6\
**Created:** [May 16, 2021, 5:50am UTC](https://discuss.codemirror.net/t/implementing-gfm-strikethrough-on-markdown/3196 "2021-05-16T05:50:51Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![Keen](https://discuss.codemirror.net/user_avatar/discuss.codemirror.net/keen/32/1257_2.png) [@Keen](https://discuss.codemirror.net/u/Keen)\
**Post date:** [May 16, 2021, 5:50am UTC](https://discuss.codemirror.net/t/implementing-gfm-strikethrough-on-markdown/3196/1 "2021-05-16T05:50:51Z")

</div>

I am trying to implement the strike-through but can’t get it to work.  
Following this [lezer-markdown - npm](https://www.npmjs.com/package/lezer-markdown#user-content-github-flavored-markdown), i imported Strikethrough

`import { Strikethrough } from 'lezer-markdown';`

and added it as an extension

```auto
EditorState.create({
  doc: '',
  extensions: [
    ...
    markdown({
      base: markdownLanguage,
      extensions: [
        Strikethrough
      ]
    }),
  ],
});

```

still doesn’t work as if i never added it as an extension.

This is what the html looks like for the supposedly strike-through line:

```auto
<div class="cm-line">
  <span class="ͼp ͼ11">~~</span>
  <span class="ͼp">test</span>
  <span class="ͼp ͼ11">~~</span>
</div>

```

also i have no idea where or why the classes has a prefix of `ͼ`

other references:

- [Adding support for the additional inline syntax to Markdown - #2 by marijn](https://discuss.codemirror.net/t/adding-support-for-the-additional-inline-syntax-to-markdown/3099/2)

---

<div class="post-metadata">

**Author:** ![Keen](https://discuss.codemirror.net/user_avatar/discuss.codemirror.net/keen/32/1257_2.png) [@Keen](https://discuss.codemirror.net/u/Keen)\
**Post date:** [May 16, 2021, 7:38am UTC](https://discuss.codemirror.net/t/implementing-gfm-strikethrough-on-markdown/3196/2 "2021-05-16T07:38:37Z")

</div>

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:

```js
// 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

```js
// 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

```js
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](https://www.npmjs.com/package/lezer-markdown)

---

<div class="post-metadata">

**Author:** ![marijn](https://discuss.codemirror.net/user_avatar/discuss.codemirror.net/marijn/32/136_2.png) [@marijn](https://discuss.codemirror.net/u/marijn)\
**Post date:** [May 17, 2021, 8:32am UTC](https://discuss.codemirror.net/t/implementing-gfm-strikethrough-on-markdown/3196/3 "2021-05-17T08:32:47Z")

</div>

Reimplementing the strikethrough extension should definitely not be necessary for this. You should be able to just add your custom style tag for the existing extenion’s node type (just the `{props: [styleTags({"Strikethrough/...": strikethroughTags.strikethrough})]}` part).

The current setup assigns the `tags.deleted` style tag to strike-through text, so you could also just style that. But I guess, since none of the current themes style that with strike-through, I guess that is a bit confusing. Maybe a separate style tag for strike-through would be worthwhile.

---

<div class="post-metadata">

**Author:** ![Keen](https://discuss.codemirror.net/user_avatar/discuss.codemirror.net/keen/32/1257_2.png) [@Keen](https://discuss.codemirror.net/u/Keen)\
**Post date:** [May 17, 2021, 3:06pm UTC](https://discuss.codemirror.net/t/implementing-gfm-strikethrough-on-markdown/3196/4 "2021-05-17T15:06:04Z")

</div>

Never knew i could extend an existing node type with this setup:

```js
export const Strikethrough = {
    defineNodes: ["Strikethrough"],
    props: [
        styleTags({
            'Strikethrough/...': tags.deleted
        })
    ]
}

```

and

```js
{
    tag: tags.deleted,
    textDecoration: 'line-through',
},

```

this works but is this the correct way of extending a node type?

> Maybe a separate style tag for strike-through would be worthwhile.

I can vouch for this.

---

<div class="post-metadata">

**Author:** ![marijn](https://discuss.codemirror.net/user_avatar/discuss.codemirror.net/marijn/32/136_2.png) [@marijn](https://discuss.codemirror.net/u/marijn)\
**Post date:** [May 17, 2021, 4:14pm UTC](https://discuss.codemirror.net/t/implementing-gfm-strikethrough-on-markdown/3196/5 "2021-05-17T16:14:26Z")

</div>

You don’t need the `defineNodes` part (the node is already defined by the strikethrough extension in the library).

---

<div class="post-metadata">

**Author:** ![voraciousdev](https://discuss.codemirror.net/user_avatar/discuss.codemirror.net/voraciousdev/32/949_2.png) [@voraciousdev](https://discuss.codemirror.net/u/voraciousdev)\
**Post date:** [May 17, 2021, 5:49pm UTC](https://discuss.codemirror.net/t/implementing-gfm-strikethrough-on-markdown/3196/6 "2021-05-17T17:49:52Z")

</div>

What other use does `deleted` serve? If there is a potential conflict where applying a strikethrough doesn’t make sense, I’d also opt for a separate tag.

---

<div class="post-metadata">

**Author:** ![Keen](https://discuss.codemirror.net/user_avatar/discuss.codemirror.net/keen/32/1257_2.png) [@Keen](https://discuss.codemirror.net/u/Keen)\
**Post date:** [May 18, 2021, 2:06am UTC](https://discuss.codemirror.net/t/implementing-gfm-strikethrough-on-markdown/3196/7 "2021-05-18T02:06:03Z")

</div>

Right, i also don’t know other use cases for having deleted and strikethrough tag, in HTML since `del` tag performs a strikethrough.

But i also think its better to have a separate tag since CM 5 does it, and for future use cases.

---

<div class="post-metadata">

**Author:** ![Keen](https://discuss.codemirror.net/user_avatar/discuss.codemirror.net/keen/32/1257_2.png) [@Keen](https://discuss.codemirror.net/u/Keen)\
**Post date:** [May 18, 2021, 2:10am UTC](https://discuss.codemirror.net/t/implementing-gfm-strikethrough-on-markdown/3196/8 "2021-05-18T02:10:35Z")

</div>

Got it, works now. I misunderstood earlier how this thing works.

```auto
export const Strikethrough = {
    props: [
        styleTags({
            'Strikethrough/...': tags.deleted
        })
    ]
}

```

---

<div class="post-metadata">

**Author:** ![marijn](https://discuss.codemirror.net/user_avatar/discuss.codemirror.net/marijn/32/136_2.png) [@marijn](https://discuss.codemirror.net/u/marijn)\
**Post date:** [May 18, 2021, 8:11am UTC](https://discuss.codemirror.net/t/implementing-gfm-strikethrough-on-markdown/3196/9 "2021-05-18T08:11:30Z")

</div>

> [@Keen](#):
>
> Right, i also don’t know other use cases for having deleted and strikethrough tag, in HTML sense `del` tag performs a strikethrough.

The deleted style tag mostly exists for things like a diff/patch language mode, where you’d used it for the removed parts. I feel that styling all of those with strikethrough would get annoying/unreadable.

I’ve added a separate strikethrough tag, similar to emphasis/strong/link, to @codemirror/highlight to make this easier in the future.

---

<div class="post-metadata">

**Author:** ![Keen](https://discuss.codemirror.net/user_avatar/discuss.codemirror.net/keen/32/1257_2.png) [@Keen](https://discuss.codemirror.net/u/Keen)\
**Post date:** [May 18, 2021, 12:14pm UTC](https://discuss.codemirror.net/t/implementing-gfm-strikethrough-on-markdown/3196/10 "2021-05-18T12:14:20Z")

</div>

That makes sense. Thanks!

---

<div class="post-metadata">

**Author:** ![voraciousdev](https://discuss.codemirror.net/user_avatar/discuss.codemirror.net/voraciousdev/32/949_2.png) [@voraciousdev](https://discuss.codemirror.net/u/voraciousdev)\
**Post date:** [May 18, 2021, 3:09pm UTC](https://discuss.codemirror.net/t/implementing-gfm-strikethrough-on-markdown/3196/11 "2021-05-18T15:09:22Z")

</div>

I just tested this out, and it’s working as expected. When will the next version of `@codemirror/lang-markdown` be released?

---

<div class="post-metadata">

**Author:** ![marijn](https://discuss.codemirror.net/user_avatar/discuss.codemirror.net/marijn/32/136_2.png) [@marijn](https://discuss.codemirror.net/u/marijn)\
**Post date:** [May 19, 2021, 7:05am UTC](https://discuss.codemirror.net/t/implementing-gfm-strikethrough-on-markdown/3196/12 "2021-05-19T07:05:21Z")

</div>

I’ve tagged `lang-markdown` 0.18.3 which includes this.

---

<div class="post-metadata">

**Author:** ![fk1blow](https://discuss.codemirror.net/user_avatar/discuss.codemirror.net/fk1blow/32/1423_2.png) [@fk1blow](https://discuss.codemirror.net/u/fk1blow)\
**Post date:** [August 10, 2021, 5:06pm UTC](https://discuss.codemirror.net/t/implementing-gfm-strikethrough-on-markdown/3196/13 "2021-08-10T17:06:56Z")

</div>

@marijn shouldn’t this be enough to style it?

`{ tag: tags.strikethrough, fontStyle: 'italic', color: 'red' }` where `tags` come from ‘@codemirror/highlight’

i’m using @codemirror/lang-markdown@0.18.4 atm