🙏 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.
Demonstration
Code
The syntax highlighting is powered by Prism.js v1.30.0
Attributes
| Attribute | Description | Default value |
|---|---|---|
text | The code snippet you want to highlight. | '' |
language | Language for syntax highlighting. | 'text' |
theme | (Optional) Syntax highlighting theme. See available themes below. | 'one-dark' |
Installation
Using CDN
Include both Prism.js and va-code-block via <script> tags:
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.
Themes
Choose from a variety of Prism themes. Below are a few supported options:
| Name | Value |
|---|---|
| A11y Dark | a11y-dark |
| Atom Dark | atom-dark |
| Base16 AS Light | base16-ateliersulphurpool.light |
| CB | cb |
| Coldark Cold | coldark-cold |
| Coldark Dark | coldark-dark |
| Coy Without Shadows | coy-without-shadows |
| Darcula | darcula |
| Dracula | dracula |
| Duotone Dark | duotone-dark |
| Duotone Earth | duotone-earth |
| Duotone Forest | duotone-forest |
| Duotone Light | duotone-light |
| Duotone Sea | duotone-sea |
| Duotone Space | duotone-space |
| GitHub Colors | ghcolors |
| Gruvbox Dark | gruvbox-dark |
| Gruvbox Light | gruvbox-light |
| Holi Theme | holi-theme |
| Hopscotch | hopscotch |
| Laserwave | laserwave |
| Lucario | lucario |
| Material Dark | material-dark |
| Material Light | material-light |
| Material Oceanic | material-oceanic |
| Night Owl | night-owl |
| Nord | nord |
| One Dark | one-dark |
| One Light | one-light |
| Pojoaque | pojoaque |
| Shades of Purple | shades-of-purple |
| Solarized Dark Atom | solarized-dark-atom |
| Synthwave 84 | synthwave84 |
| VS | vs |
| VS Code Dark+ | vsc-dark-plus |
| Xonokai | xonokai |
| Z Touch | z-touch |
You can customize the theme using the theme attribute.