Code Block
A syntax-highlighted code viewer. Powered by Prism, supports 14 languages out of the box, with optional filename header, copy button, line numbers, and line highlighting.
greet.ts
Multi-language
Pass an array via languages to render a switcher in the header — useful for showing the same example in TypeScript and JavaScript, or React and Vue.
Highlight Lines
1 Installation
Props
| Prop | Type | Default | Description |
|---|---|---|---|
code* | string | — | The source code to render. Ignored when languages is provided. |
language | Language | "text" | Prism language id. Supports tsx, ts, jsx, js, css, json, bash, python, java, go, rust, sql, markdown, yaml, text. |
languages | { language, code, label? }[] | — | Multiple language variants of the same snippet. Renders a switcher in the header. |
filename | string | — | Filename shown in the header. |
showLineNumbers | boolean | false | Show a left gutter with line numbers. |
showCopyButton | boolean | true | Show a copy-to-clipboard button. |
highlightLines | number[] | [] | 1-based line numbers to highlight. |