shiki-element

A simple web component to render code using the shiki library for syntax highlighting.

Install

$ npm i -S shiki-element

Usage

You can load the shiki-highlight element by importing it in an ES module:

import 'shiki-element'; // registers the shiki highlight element

You may then use the element like so:

<shiki-highlight>
  {
    console.log('Hello world!');
  }
</shiki-highlight>

You can specify the language:

<shiki-highlight language="ts">
...
</shiki-highlight>

You can specify shiki options via the options property:

const node = document.querySelector('shiki-highlight');
node.options = {
  theme: 'nord',
  lang: 'ts'
};

Styling

The following CSS variables are available:

| Name | Default | Summary | | -- | -- | -- | | --shiki-padding | .4em | Padding of the inner pre tag | | --shiki-overflow | auto | Overflow of the inner pre tag |