Every extension

codeHighlight

Behaviour takes options 0.63 kB gzipped

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.

Adding it

import { createEditor, document, paragraph, text, codeHighlight } from '@matrajs/core'

const editor = createEditor({
  extensions: [document, paragraph, text, codeHighlight({ … })],
  element: document.querySelector('#editor'),
})

There is no separate package · codeHighlight is already in @matrajs/core, and an extension you do not import is not in your bundle. document, paragraph and text are the floor every document needs.

Options

Field	Type
`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`.

Styles

This one needs a stylesheet to look right, and ships the minimum as a string rather than a file · nothing is loaded unless you load it.


          import { codeHighlightCSS } from '@matrajs/core'

const style = document.createElement('style')
style.textContent = codeHighlightCSS
document.head.append(style)

← All 81 extensions

Edit this page on GitHub