SoneSone
Advanced

Shiki integration

Syntax-highlighted code blocks via the sone/shiki entry.

For documents that include code samples — technical reports, blog social cards, code screenshots — Sone ships a Shiki integration on the sone/shiki subpath.

Install

npm install shiki

shiki is a peer dependency.

Use

import { Column, sone } from "sone";
import { createSoneHighlighter } from "sone/shiki";

// Pre-load themes and languages once
const highlight = await createSoneHighlighter({
  themes: ["github-dark"],
  langs: ["typescript", "javascript", "bash"],
});

// Code() returns a Sone node — compose like any other
const doc = Column(
  highlight.Code(`const greet = (name: string) => \`Hello, \${name}!\``, {
    lang: "typescript",
    theme: "github-dark",
    fontSize: 13,
    fontFamily: ["GeistMono", "monospace"],
    lineHeight: 1.6,
  }),
).padding(24).bg("white");

await sone(doc).pdf();

CodeOptions

OptionTypeDefaultDescription
langBundledLanguageShiki language identifier.
themeBundledThemefirst loaded themeShiki theme.
fontSizenumber12Font size in pixels.
fontFamilystring[]["monospace"]Font families in priority order.
lineHeightnumberinheritedLine-height multiplier.
paddingXnumber12Horizontal padding inside the block.
paddingYnumber8Vertical padding inside the block.

Performance

createSoneHighlighter is a one-time async setup that loads themes and grammars. After that, highlight.Code(...) is synchronous and cheap — call it as many times as you want during a single render.

For high-throughput pipelines, share one highlighter across many documents.