Varvara 🤦‍♀️ Code Block

A Custom HTML Element that renders code blocks with syntax highlighting and a copy button. See the full documentation for usage details and a live demo.

[!IMPORTANT] This component is in an early development stage. The API is not yet stable and may change in future releases.

The syntax highlighting is powered by Prism.js.

Installation

Using CDN

Include both Prism.js and va-code-block via <script> tags:

<script src="https://unpkg.com/[email protected]"></script>
<script src="https://unpkg.com/va-code-block"></script>

Using NPM

npm i va-code-block

Usage

In HTML

You can use the component directly in your HTML:

<va-code-block
  language="html"
  theme="nord"
  text='<link
  href="https://unpkg.com/varvara-css"
  rel="stylesheet"
  type="text/css"
/>'
></va-code-block>

The text attribute should contain the code snippet as a single string. Escaping is handled internally.

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. | 'one-dark' |

Changelog

For a detailed record of changes, new features, and fixes in each version, see our CHANGELOG.md.

License

MIT License © 2024 Marc Mariné