prosemirror-highlight

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

Usage

With Shiki

Static loading of a fixed set of languages

import { getHighlighter } from 'shiki'

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

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

Dynamic loading of arbitrary languages

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

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

let highlighterPromise: Promise<void> | undefined
let highlighter: Highlighter | undefined
let parser: Parser | undefined
const loadedLanguages = new Set<string>()

/**
 * 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 (!highlighterPromise) {
    highlighterPromise = getHighlighter({
      themes: ['github-light'],
      langs: [],
    }).then((h) => {
      highlighter = h
    })
    return highlighterPromise
  }

  if (!highlighter) {
    return highlighterPromise
  }

  const language = options.language
  if (language && !loadedLanguages.has(language)) {
    return highlighter.loadLanguage(language as BuiltinLanguage).then(() => {
      loadedLanguages.add(language)
    })
  }

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

  return parser(options)
}

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

With Shikiji

Static loading of a fixed set of languages

import { getHighlighter } from 'shikiji'

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

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

Dynamic loading of arbitrary languages

import { getHighlighter, type Highlighter, type BuiltinLanguage } from 'shikiji'

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

let highlighterPromise: Promise<void> | undefined
let highlighter: Highlighter | undefined
let parser: Parser | undefined
const loadedLanguages = new Set<string>()

/**
 * 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 (!highlighterPromise) {
    highlighterPromise = getHighlighter({
      themes: ['vitesse-light'],
      langs: [],
    }).then((h) => {
      highlighter = h
    })
    return highlighterPromise
  }

  if (!highlighter) {
    return highlighterPromise
  }

  const language = options.language
  if (language && !loadedLanguages.has(language)) {
    return highlighter.loadLanguage(language as BuiltinLanguage).then(() => {
      loadedLanguages.add(language)
    })
  }

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

  return parser(options)
}

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

With lowlight (based on Highlight.js)

Static loading of all languages

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)

Static loading of all languages

import { refractor } from 'refractor'

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

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

Online demo

Credits

• prosemirror-highlightjs - Highlight.js syntax highlighting for ProseMirror

License

MIT