JSPM

va-code-block

0.1.1
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
    • 0
  • Score
    100M100P100Q32901F
  • License MIT

A Web Component for rendering syntax-highlighted code blocks with a copy button.

Package Exports

  • va-code-block

Readme

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.

NPM Version GitHub License TypeDoc 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.

License

MIT License © 2024 Marc Mariné