/pre-highlighted

Custom element that extends <pre> with syntax highlighting

Primary LanguageJavaScriptMIT LicenseMIT

pre-highlighted

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

Screen.Recording.2021-12-08.at.13.41.16.mov

Installation

  1. Load Shiki into DOM
<script src="https://unpkg.com/shiki@latest/dist/index.unpkg.iife.js"></script>
  1. 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