prosemirror-highlight
v0.5.0
Published
A ProseMirror plugin to highlight code blocks
Downloads
4,312
Maintainers
Readme
prosemirror-highlight
Highlight your code blocks in ProseMirror, with any syntax highlighter you like!
Usage
With Shiki
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 })
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
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 })
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)
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'
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