prosemirror-highlight

prosemirror-highlight

Highlight your code blocks in ProseMirror, with any syntax highlighter you want.

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

Online demo

Credits

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

License

MIT

Changelog

0.1.0 (2023-12-10)

Features

• support lowlight (5bab86d)
• support shiki (5adab02)

Documentation

• update readme (cedbc68)