genesis-editor

Code blocks

A language picker and syntax highlighting, with HTML that still round-trips as a pre and code tag.

Highlighting#

Code blocks highlight with Shiki once a language other than Plain Text is set. The highlighter loads on first use, so it stays out of the editor's initial JavaScript. Themes follow the editor: github-light and github-dark.

The dropdown includes JavaScript, TypeScript, Python, HTML, CSS, JSON, Shell, and the other common languages in CODE_LANGUAGES. Shortcut ``` still inserts a plain code block; pick a language afterwards, or load HTML that already has a language-* class.

HTML#

<pre><code class="language-typescript">export const n = 1;</code></pre>

Export writes the canonical id, so a paste of language-ts or language-js comes back as language-typescript and language-javascript. Unknown names are kept by the parser and become Plain Text in the editor, so the picker never throws.

{ "type": "codeBlock", "props": { "language": "typescript" }, "content": [{ "type": "text", "text": "export const n = 1;", "styles": {} }] }