pre-highlighted v1.0.2

pre-highlighted

HTML5 custom element that extends <pre> element with syntax highlighting using ShikiJS

Installation

1. Load Shiki into DOM

<script src="https://unpkg.com/shiki@latest/dist/index.unpkg.iife.js"></script>

2. Load the custom element

<script src="https://unpkg.com/pre-highlighted@latest"></script>

Using npm

npm i pre-highlighted

Usage

<pre-highlighted lang="css" theme="github-dark">
  .red {
    background: red;
  }
</pre-highlighted>

Or alternatively:

<pre is="pre-highlighted" lang="css" theme="github-dark">
  .red {
    background: red;
  }
</pre>

Attributes

• lang, programming language
• theme, theme, consult Shiki docs for more