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.

Bundle Size

[!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/prismjs@1.30.0"></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.

包详细信息

va-code-block

自述文件