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