Prosemirror-highlight NPM

prosemirror-highlight

Highlight your ProseMirror code blocks with any syntax highlighter you like!

Usage

With Shiki

import { getSingletonHighlighter } from 'shiki'

import { createHighlightPlugin } from 'prosemirror-highlight'
import { createParser } from 'prosemirror-highlight/shiki'

const highlighter = await getSingletonHighlighter({
  themes: ['github-light'],
  langs: ['javascript', 'typescript', 'python'],
})
const parser = createParser(highlighter)
export const shikiPlugin = createHighlightPlugin({ parser })

import {
  getSingletonHighlighter,
  type BuiltinLanguage,
  type Highlighter,
} from 'shiki'

import { createHighlightPlugin } from 'prosemirror-highlight'
import { createParser, type Parser } from 'prosemirror-highlight/shiki'

let highlighter: Highlighter | undefined
let parser: Parser | undefined

/**
 * Lazy load highlighter and highlighter languages.
 *
 * When the highlighter or the required language is not loaded, it returns a
 * promise that resolves when the highlighter or the language is loaded.
 * Otherwise, it returns an array of decorations.
 */
const lazyParser: Parser = (options) => {
  if (!highlighter) {
    return getSingletonHighlighter({
      themes: ['github-light'],
      langs: [],
    }).then((h) => {
      highlighter = h
    })
  }

  const language = options.language as BuiltinLanguage
  if (language && !highlighter.getLoadedLanguages().includes(language)) {
    return highlighter.loadLanguage(language)
  }

  if (!parser) {
    parser = createParser(highlighter)
  }

  return parser(options)
}

export const shikiLazyPlugin = createHighlightPlugin({ parser: lazyParser })

When using Shiki, two CSS variables are set automatically to the <pre> element:

--prosemirror-highlight: The text color of the code block
--prosemirror-highlight-bg: The background color of the code block

You can use these variables to set the background color and text color of the code block.

.ProseMirror pre {
  color: var(--prosemirror-highlight, inherit);
  background-color: var(--prosemirror-highlight-bg, inherit);
}

With lowlight (based on Highlight.js)

import 'highlight.js/styles/default.css'

import { common, createLowlight } from 'lowlight'

import { createHighlightPlugin } from 'prosemirror-highlight'
import { createParser } from 'prosemirror-highlight/lowlight'

const lowlight = createLowlight(common)
const parser = createParser(lowlight)
export const lowlightPlugin = createHighlightPlugin({ parser })

With refractor (based on Prism)

import { refractor } from 'refractor/all'

import { createHighlightPlugin } from 'prosemirror-highlight'
import { createParser } from 'prosemirror-highlight/refractor'

const parser = createParser(refractor)
export const refractorPlugin = createHighlightPlugin({ parser })

With Sugar high

import { createHighlightPlugin } from 'prosemirror-highlight'
import { createParser } from 'prosemirror-highlight/sugar-high'

const parser = createParser()
export const sugarHighPlugin = createHighlightPlugin({ parser })

:root {
  --sh-class: #2d5e9d;
  --sh-identifier: #354150;
  --sh-sign: #8996a3;
  --sh-property: #0550ae;
  --sh-entity: #249a97;
  --sh-jsxliterals: #6266d1;
  --sh-string: #00a99a;
  --sh-keyword: #f47067;
  --sh-comment: #a19595;
}