@halo-dev/shiki-code-element

@halo-dev/shiki-code-element

A custom web component powered by Lit and Shiki for beautiful syntax highlighting in your web applications. This component provides an elegant code rendering experience with features like light/dark theme support and different visual variants.

Features

• 📦 Web Component: Easy to integrate into any framework or vanilla JS project
• 🎨 Theme Support: Light and dark theme support with 60+ bundled themes
• 🌈 Syntax Highlighting: Support for 200+ programming languages
• 💅 Visual Variants: Choose between "simple" and "mac" UI styles
• 🔄 Auto Dark/Light Mode: Automatically switches between themes based on system preferences
• 🧩 Customizable: Set font size and other styling options

Installation

# npm
npm install @halo-dev/shiki-code-element @shikijs/transformers shiki

# pnpm
pnpm add @halo-dev/shiki-code-element @shikijs/transformers shiki

# yarn
yarn add @halo-dev/shiki-code-element @shikijs/transformers shiki

Usage

Basic Usage

<script type="module">
  import '@halo-dev/shiki-code-element';
</script>

<shiki-code>
  <pre><code class="language-javascript">
  const greeting = "Hello, world!";
  console.log(greeting);
  </code></pre>
</shiki-code>

Customizing Themes

<shiki-code 
  light-theme="github-light" 
  dark-theme="github-dark">
  <pre><code class="language-typescript">
  interface User {
    name: string;
    age: number;
  }
  
  const user: User = {
    name: "John",
    age: 30
  };
  </code></pre>
</shiki-code>

Mac Window Style

<shiki-code variant="mac">
  <pre><code class="language-python">
  def greet(name):
      return f"Hello, {name}!"
      
  print(greet("World"))
  </code></pre>
</shiki-code>

Code Highlighting Features

This component integrates with Shiki Transformers to provide advanced code highlighting features. The following transformers are supported:

• Line highlighting: // [!code highlight]
• Line focus: // [!code focus]
• Error/warning annotations: // [!code error], // [!code warning]
• Code diff (additions/deletions): // [!code ++], // [!code --]

For more details on how to use these features, please refer to the Shiki Transformers documentation.

API

Properties

Property	Attribute	Type	Default	Description
lightTheme	light-theme	string	"github-light"	Theme to use in light mode
darkTheme	dark-theme	string	"github-dark"	Theme to use in dark mode
variant	variant	"simple" | "mac"	"simple"	Visual style variant
fontSize	font-size	string	"0.875em"	Font size for the code block

Browser Support

This component works in all modern browsers that support Custom Elements v1 and Shadow DOM v1.

License

MIT License