How to use GFM mode in codemrror6

First of all, thank you for providing such excellent code. In codemirror 5, I use GFM mode to highlight with markdown. But in codemirror6, I didn’t find an example of GFM. So I want to ask how to use GFM mode in codemirror6. thank you!

Hi, you can set the markdown parser when creating the editor state. Instead of just using markdown(), you can set the base language, which is commonmarkLanguage by default. GFM (wich a few extras) is called markdownLanguage in CM, so this should do the trick:

import { markdown, markdownLanguage } from "@codemirror/lang-markdown";

const state = EditorState.create({
  extensions: [
    markdown({ base: markdownLanguage }),
  ],
  ...
});

Thank you very much

Thank you very much, but I have another question here. What I want to achieve is to highlight code blocks in markdown. How can I do that. I tried the following, but it didn’t seem to work。

import { javascript } from '@codemirror/lang-javascript';
import { markdown, markdownLanguage } from "@codemirror/lang-markdown";
const state = EditorState.create({
  extensions: [
    markdown({ base: markdownLanguage }),
    javascript(),
    ...
  ],
  ...
});

The picture below is my markdown content

The Markdown language pack does not add any line styles by default. The way how I achieved this, was by getting the block token of each lines and using a separate plugin, extension, which adds line styles.

Feel free to have a look at my code. Might take a bit to dig through it, because it is spread across different files. If you just want line styles for code blocks, you can probably get away with much less, than me: https://github.com/sylvainjule/kirby-markdown-field/blob/next/src/components/theme/line-styles.js

What I want to achieve is to highlight code blocks in markdown.

I just asked this question yesterday.

This example should help you too.

https://codemirror.net/6/examples/zebra/