code-block

Varvara 🤦‍♀️ Code Block

A Custom HTML Element that renders code blocks with 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.

Installation

Using NPM

npm i va-code-block

Usage

In HTML

You can use the component directly in your HTML:

<va-code-block
  language="html"
  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 display.	''
language	Language of the code.	'text'

Changelog

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

License

MIT License © 2024 Marc Mariné