Demonstration
Code
This component is in an early development stage. The API is not yet stable and may change in future releases. Check the CHANGELOG.md to stay up to date with the latest changes.
Attributes
| Attribute | Description | Default value |
|---|---|---|
text | The code snippet to display. | '' |
language | Language for syntax highlighting. | 'text' |
All attributes are reactive — changing text or language after render will update the component automatically.
Supported languages
Syntax highlighting is built-in with a lightweight tokenizador. No external dependencies required.
| Language | Values |
|---|---|
| JavaScript | javascript, js, jsx |
| TypeScript | typescript, ts, tsx |
| CSS | css |
| HTML | html, markup, xml |
Unsupported languages will render as plain text without errors.
Installation
Using NPM
Usage
In HTML
You can use the component directly in your HTML:
The text attribute should contain the code snippet as a single string. Escaping is handled internally.
Dynamic updates
Attributes are reactive. You can change them after the initial render: