Code Highlight Plugin

Code blocks can be syntax highlighted using one of two plugins: CodeHighlightPrismPlugin (backed by Prism) or CodeHighlightShikiPlugin (backed by Shiki). Include exactly one of them in your editor.

Note

To get out of the code block, press Enter twice on the last line. Ensure there is no indentation in the last line before pressing Enter for the new line to be created outside of the code block.

CodeHighlightPrismPlugin

Uses Prism for syntax highlighting.

Usage

<Composer {initialConfig}>
  <div class="editor-shell">
    <ToolbarRichText />
    <div class="editor-container">
      <div class="editor-scroller">
        <div class="editor">
          <ContentEditable />
        </div>
      </div>
      <RichTextPlugin />
      <CodeHighlightPrismPlugin />
    </div>
  </div>
</Composer>

CodeHighlightShikiPlugin

Uses Shiki under the hood. Shiki produces more accurate highlighting and supports a much wider range of themes and languages (including TextMate grammars).

Caution

Shiki is a larger package and will increase the bundle size of your application significantly. It adds approximately 1.4 MB to the bundle size. Considering the total svelte-lexical package size is around 200 KB (including Prism based code highlighting), this is a huge increase. Use it only if you need the richer theme and better language support it provides.

Usage

<Composer {initialConfig}>
  <div class="editor-shell">
    <ToolbarRichText />
    <div class="editor-container">
      <div class="editor-scroller">
        <div class="editor">
          <ContentEditable />
        </div>
      </div>
      <RichTextPlugin />
      <CodeHighlightShikiPlugin />
    </div>
  </div>
</Composer>

Code Block Actions

Both plugins are compatible with CodeActionMenuPlugin, which adds Copy and Prettier action buttons to code blocks. Include it alongside whichever highlight plugin you choose.

<CodeHighlightShikiPlugin />
<CodeActionMenuPlugin />

Choosing between Prism and Shiki

	Prism	Shiki
Plugin	CodeHighlightPrismPlugin	CodeHighlightShikiPlugin
Highlighting engine	Prism	Shiki / TextMate grammars
Theme support	Limited (no support to change themes in the editor)	Extensive
Package size	Few KBs	~1.4 MB

Use CodeHighlightPrismPlugin for a lightweight setup. Use CodeHighlightShikiPlugin when you need richer theme or language support.