Extensions
codeHighlight
Syntax highlighting for code blocks, as decorations.
The tokens never enter the document — a code block's content stays plain text, which is what copying it out and saving it both want. Each block is tokenised when it changes and remembered until it does again, keyed on the block node itself; typing in one code block does not re-colour another.
1 · Install
One package for every extension · there is no @matrajs/codeHighlight to install.
npm i @matrajs/core2 · Add it to the editor
Import it and put it in the extensions array. That array is the whole feature list:
what is not in it is not in your bundle and not in the document's schema.
import { createEditor, document, paragraph, text, codeHighlight } from '@matrajs/core'
const editor = createEditor({
extensions: [document, paragraph, text, codeHighlight({ … })],
element: document.querySelector('#editor'),
})3 · Use it
Nothing to call · this one works once it is in the array. Syntax highlighting for code blocks, as decorations.
Options
codeHighlight is a function · call it with an options object.
| Option | Type | What it does |
|---|---|---|
highlight | Highlighter | Tokenise code. Left off, a small built-in tokeniser colours comments, strings, numbers and the keywords most languages share. Plug in lowlight, Prism or Shiki here for the real thing. |
types | readonly string[] | Which node types are code. Default `codeBlock`. |
Styling
This one needs CSS to look right, and ships the minimum as a string rather than a file · nothing loads unless you load it, and you can ignore it and write your own.
import { codeHighlightCSS } from '@matrajs/core'
const style = document.createElement('style')
style.textContent = codeHighlightCSS
document.head.append(style)