shiki-component

Web Component for showing code with syntax highlighting, using Shiki.

Live Example: https://codepen.io/JRJurman/pen/xxeQQxa

<script type="module" src="https://unpkg.com/shiki-component@1"></script>

<shiki-component lang="html" theme="night-owl">
  <template>
    <!-- interesting code -->
    <h1>Your Project Here!</h1>
  </template>
</shiki-component>

<shiki-component lang="js" theme="rose-pine">
  <template>
    // super simple to add to any project
    const myLabel = 'New Project Here!'
  </template>
</shiki-component>

API

lang

Attribute for setting the language for syntax highlighting. You can see all supported languages here: https://shiki.style/languages

theme

Attribute for setting the theme for the syntax highlighting. You can see all themes here: https://shiki.style/themes

*-theme

Attribute for setting multiple themes for the syntax highlighting. You can learn about setting multiple themes here: https://shiki.style/guide/dual-themes