How to integrate YAML front matter in CodeMirror 6 with Markdown?

v6
1

I’m looking to extend CodeMirror 6 to support YAML front matter within Markdown files, using @codemirror/lang-markdown and @codemirror/lang-yaml . I need the editor to highlight YAML front matter at the top and the rest as Markdown. Does anyone know how to set this up or is there any working example for CM6

Regards,
Frank

2

I’ve added a utility for this @codemirror/lang-yaml

3

This works just fine:

const frontMatter = yamlFrontmatter( { content: markdown() } )

let markdownEditor = new EditorView({
doc : “# Hello World”,
extensions: [basicSetup, theme, frontMatter ],
parent: document.getElementById(“markdown-1”)
});

I also tried to add “basicSetup” for embedded markdown to support code folding.

Could you provide a snipped?

Regards,
Frank

4

Folks, I am trying to understand if for a Markdown editor, adding frontmatter support like this is expected:

const frontmatter = yamlFrontmatter( { content: markdown(...) } );

const view = new EditorView({
  doc: "# Hello World",
  extensions: [basicSetup, theme, frontmatter],
});

I tested this and the behavior appears correct. However, the design seems counterintuitive and I would like to clarify my understanding.

The Markdown language is extensible through MarkdownConfig. In this case, we are wrapping the Markdown language with another language named yamlFrontmatter. Structurally, this makes frontmatter appear to be the primary language while Markdown becomes the embedded one, which seems opposite to the intended purpose.

Am I misunderstanding the design here? Thanks for reading!

5

Yes, the frontmatter parser wraps the markdown parser. It’s fine.

1 Like