https://github.com/43081j/shiki-element

A web component to syntax highlight text using the Shiki library
https://github.com/43081j/shiki-element

Last synced: about 2 months ago
JSON representation

A web component to syntax highlight text using the Shiki library

• Host: GitHub
• URL: https://github.com/43081j/shiki-element
• Owner: 43081j
• Created: 2021-01-14T14:28:22.000Z (almost 4 years ago)
• Default Branch: master
• Last Pushed: 2024-06-17T20:14:11.000Z (6 months ago)
• Last Synced: 2024-10-12T03:17:35.099Z (3 months ago)
• Language: TypeScript
• Size: 113 KB
• Stars: 2
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# shiki-element

A simple web component to render code using the

[shiki](https://github.com/shikijs/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:

```ts

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

```

You may then use the element like so:

```html

  {

    console.log('Hello world!');

  }

```

You can specify the language:

```html

...

```

You can specify shiki options via the `options` property:

```ts

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 |