prosemirror-highlight

prosemirror-highlight

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

Usage

With Shiki

import { getHighlighter, setCDN } from 'shiki'

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

setCDN('https://unpkg.com/shiki@0.14.6/')

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

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 })

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

Changelog

0.3.0 (2023-12-10)

Features

• support refractor (#4) (ffee694)