all repos — snow-editor @ main

small and cozy markdown, and orgmode editor

src/lib/markdownHighlight.js (view raw)

 1
 2
 3
 4
 5
 6
 7
 8
 9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 
import { HighlightStyle, syntaxHighlighting } from '@codemirror/language';
import { tags } from '@lezer/highlight';

// Syntax colors for the Markdown editor, tuned to the snow palette.
// Kept in JS (CodeMirror HighlightStyle) but pointing at CSS variables where
// possible so dark mode follows the stylesheet.
const markdownHighlightStyle = HighlightStyle.define([
  {
    tag: tags.heading1,
    fontWeight: '700',
    fontSize: '1.25em',
    color: 'var(--text-heading)',
  },
  {
    tag: tags.heading2,
    fontWeight: '700',
    fontSize: '1.15em',
    color: 'var(--text-heading)',
  },
  {
    tag: tags.heading3,
    fontWeight: '600',
    fontSize: '1.05em',
    color: 'var(--text-heading)',
  },
  { tag: tags.heading4, fontWeight: '600', color: 'var(--text-heading)' },
  { tag: tags.heading5, fontWeight: '600', color: 'var(--text-heading)' },
  { tag: tags.heading6, fontWeight: '600', color: 'var(--text-heading)' },
  { tag: tags.strong, fontWeight: '700', color: 'var(--text-heading)' },
  { tag: tags.emphasis, fontStyle: 'italic' },
  { tag: tags.strikethrough, textDecoration: 'line-through' },
  { tag: tags.monospace, color: 'var(--accent-hover)' },
  { tag: tags.link, color: 'var(--accent-hover)' },
  { tag: tags.url, color: 'var(--accent)' },
  { tag: tags.quote, color: 'var(--text-muted)', fontStyle: 'italic' },
  { tag: tags.contentSeparator, color: 'var(--accent)' },
  { tag: tags.meta, color: 'var(--text-muted)' },
  { tag: tags.processingInstruction, color: 'var(--accent)' },
  { tag: tags.labelName, color: 'var(--accent-hover)' },
]);

export const markdownHighlight = syntaxHighlighting(markdownHighlightStyle);