feat: add markdown syntax highlighting in raw editor

Wire up @codemirror/lang-markdown with a custom HighlightStyle to
highlight headings, bold, italic, strikethrough, links, lists,
blockquotes, and inline code in the raw CodeMirror editor. The custom
frontmatter plugin is kept for YAML highlighting; its heading
decoration is removed in favour of the language-based parser.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Test
2026-03-31 10:30:44 +02:00
parent 4d0e7469b9
commit b78e42272e
7 changed files with 85 additions and 32 deletions

View File

@@ -3,6 +3,7 @@ import { EditorView, lineNumbers, highlightActiveLine, keymap } from '@codemirro
import { EditorState } from '@codemirror/state'
import { defaultKeymap, history, historyKeymap } from '@codemirror/commands'
import { frontmatterHighlightPlugin, frontmatterHighlightTheme } from '../extensions/frontmatterHighlight'
import { markdownLanguage } from '../extensions/markdownHighlight'
import { zoomCursorFix } from '../extensions/zoomCursorFix'
const FONT_FAMILY = '"JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace'
@@ -109,6 +110,7 @@ export function useCodeMirror(
keymap.of([...defaultKeymap, ...historyKeymap]),
buildSaveKeymap(callbacksRef),
buildBaseTheme(),
markdownLanguage(),
frontmatterHighlightTheme(),
frontmatterHighlightPlugin,
zoomCursorFix(),