highlight-block

<tosi-highlight> pretty-prints a static code sample. It is not an editor — for that use <tosi-code>, which wraps CodeMirror and weighs accordingly.

Use this when code arrives at runtime: a fetched snippet, a generated example, an API response, a chat message. If the code is in your markdown, you do not need this at all — tosijs-ui/site highlights static fences at build time, so the tokens are already in the pre-rendered HTML, the ePub and the printed page, where a runtime component could never reach them.

<tosi-highlight language="rust" style="display:block"></tosi-highlight>

const block = preview.querySelector('tosi-highlight')
block.value = `fn main() {
    let greeting = "hello";
    println!("{}", greeting);
}`

Set value (the source) and language (a fence-style name — js, ts, rust, python, bash, yaml, …). Grammars load on demand, so a page pays only for the languages it shows, and an unknown language renders as plain, readable code rather than failing.

Styling

Token colours come from the doc-system stylesheet's .token.* rules, which derive from the theme — so highlighting follows a re-themed site and dark mode is a recomputation rather than a second palette. Outside a doc site, style .token.keyword, .token.string and friends yourself, or import the doc-system CSS.

This element renders in the LIGHT DOM deliberately: token styling has to be reachable from a page stylesheet, and a shadow root would make every consumer re-declare the palette.