b78e42272e
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>
29 lines
1.5 KiB
TypeScript
29 lines
1.5 KiB
TypeScript
import { markdown } from '@codemirror/lang-markdown'
|
|
import { HighlightStyle, syntaxHighlighting } from '@codemirror/language'
|
|
import { tags } from '@lezer/highlight'
|
|
import type { Extension } from '@codemirror/state'
|
|
|
|
const markdownHighlightStyle = HighlightStyle.define([
|
|
{ tag: tags.heading1, color: '#0969da', fontWeight: '700', fontSize: '1.4em' },
|
|
{ tag: tags.heading2, color: '#0969da', fontWeight: '700', fontSize: '1.25em' },
|
|
{ tag: tags.heading3, color: '#0969da', fontWeight: '600', fontSize: '1.1em' },
|
|
{ tag: tags.heading4, color: '#0969da', fontWeight: '600' },
|
|
{ tag: tags.heading5, color: '#0969da', fontWeight: '600' },
|
|
{ tag: tags.heading6, color: '#0969da', fontWeight: '600' },
|
|
{ tag: tags.strong, fontWeight: '700' },
|
|
{ tag: tags.emphasis, fontStyle: 'italic' },
|
|
{ tag: tags.strikethrough, textDecoration: 'line-through' },
|
|
{ tag: tags.link, color: '#0969da', textDecoration: 'underline' },
|
|
{ tag: tags.url, color: '#0969da' },
|
|
{ tag: tags.monospace, color: '#c9383e', backgroundColor: 'rgba(175,184,193,0.15)', borderRadius: '3px' },
|
|
{ tag: tags.list, color: '#c9383e' },
|
|
{ tag: tags.quote, color: '#636c76', fontStyle: 'italic' },
|
|
{ tag: tags.separator, color: '#636c76' },
|
|
{ tag: tags.processingInstruction, color: '#c9383e', fontWeight: '600' },
|
|
{ tag: tags.contentSeparator, color: '#c9383e', fontWeight: '600' },
|
|
])
|
|
|
|
export function markdownLanguage(): Extension {
|
|
return [markdown(), syntaxHighlighting(markdownHighlightStyle)]
|
|
}
|