61 lines
3 KiB
TypeScript
61 lines
3 KiB
TypeScript
import { markdown } from '@codemirror/lang-markdown'
|
|
import { yamlFrontmatter } from '@codemirror/lang-yaml'
|
|
import { HighlightStyle, syntaxHighlighting } from '@codemirror/language'
|
|
import { tags } from '@lezer/highlight'
|
|
import type { Extension } from '@codemirror/state'
|
|
|
|
const SYNTAX_COLORS = {
|
|
atom: 'var(--syntax-highlight-number)',
|
|
comment: 'var(--syntax-highlight-comment)',
|
|
foreground: 'var(--text-primary)',
|
|
heading: 'var(--syntax-heading)',
|
|
keyword: 'var(--syntax-highlight-keyword)',
|
|
link: 'var(--syntax-link)',
|
|
monospace: 'var(--syntax-monospace)',
|
|
monospaceBackground: 'var(--syntax-monospace-bg)',
|
|
muted: 'var(--syntax-muted)',
|
|
number: 'var(--syntax-highlight-number)',
|
|
operator: 'var(--syntax-muted)',
|
|
string: 'var(--syntax-highlight-string)',
|
|
title: 'var(--syntax-highlight-title)',
|
|
type: 'var(--syntax-highlight-type)',
|
|
}
|
|
|
|
const markdownHighlightStyle = HighlightStyle.define([
|
|
{ tag: tags.heading1, color: SYNTAX_COLORS.heading, fontWeight: '700', fontSize: '1.4em' },
|
|
{ tag: tags.heading2, color: SYNTAX_COLORS.heading, fontWeight: '700', fontSize: '1.25em' },
|
|
{ tag: tags.heading3, color: SYNTAX_COLORS.heading, fontWeight: '600', fontSize: '1.1em' },
|
|
{ tag: tags.heading4, color: SYNTAX_COLORS.heading, fontWeight: '600' },
|
|
{ tag: tags.heading5, color: SYNTAX_COLORS.heading, fontWeight: '600' },
|
|
{ tag: tags.heading6, color: SYNTAX_COLORS.heading, fontWeight: '600' },
|
|
{ tag: tags.strong, fontWeight: '700' },
|
|
{ tag: tags.emphasis, fontStyle: 'italic' },
|
|
{ tag: tags.strikethrough, textDecoration: 'line-through' },
|
|
{ tag: tags.link, color: SYNTAX_COLORS.link, textDecoration: 'underline' },
|
|
{ tag: tags.url, color: SYNTAX_COLORS.link },
|
|
{ tag: tags.monospace, color: SYNTAX_COLORS.monospace, backgroundColor: SYNTAX_COLORS.monospaceBackground, borderRadius: '3px' },
|
|
{ tag: tags.quote, color: SYNTAX_COLORS.muted, fontStyle: 'italic' },
|
|
{ tag: tags.separator, color: SYNTAX_COLORS.muted },
|
|
{ tag: tags.processingInstruction, color: SYNTAX_COLORS.monospace, fontWeight: '600' },
|
|
{ tag: tags.contentSeparator, color: SYNTAX_COLORS.monospace, fontWeight: '600' },
|
|
{ tag: tags.comment, color: SYNTAX_COLORS.comment, fontStyle: 'italic' },
|
|
{ tag: tags.keyword, color: SYNTAX_COLORS.keyword, fontWeight: '600' },
|
|
{ tag: [tags.atom, tags.bool, tags.null], color: SYNTAX_COLORS.atom },
|
|
{ tag: tags.number, color: SYNTAX_COLORS.number },
|
|
{ tag: [tags.string, tags.special(tags.string)], color: SYNTAX_COLORS.string },
|
|
{ tag: [tags.variableName, tags.propertyName], color: SYNTAX_COLORS.foreground },
|
|
{ tag: [tags.function(tags.variableName), tags.definition(tags.variableName)], color: SYNTAX_COLORS.title },
|
|
{ tag: [tags.typeName, tags.className], color: SYNTAX_COLORS.type },
|
|
{ tag: [tags.operator, tags.punctuation], color: SYNTAX_COLORS.operator },
|
|
])
|
|
|
|
export function rawEditorSyntaxHighlighting(): Extension {
|
|
return syntaxHighlighting(markdownHighlightStyle)
|
|
}
|
|
|
|
export function markdownLanguage(): Extension {
|
|
return [
|
|
yamlFrontmatter({ content: markdown() }),
|
|
rawEditorSyntaxHighlighting(),
|
|
]
|
|
}
|