shiki-transformer-icon-highlight

Shiki transformer that highlights icons like i-lucide-rocket or lucide:rocket, inspired by shiki-transformer-color-highlight.

Please check the docs: https://shiki-transformer-icon-highlight.vercel.app/

Install

npm i shiki-transformer-icon-highlight

Usage

import { createHighlighter } from 'shiki'
import { transformerIconHighlight } from 'shiki-transformer-icon-highlight'

const shiki = await createHighlighter({
  themes: [/* ... */],
  langs: [/* ... */],
})

const html = shiki.codeToHtml(code, {
  lang: 'vue',
  theme: 'vitesse-dark',
  transformers: [
    transformerIconHighlight()
  ],
})

The transformer prepends an <i class="shiki-icon-highlight"> element to tokens containing an icon name, with the icon URL exposed as a --shiki-icon-url CSS variable. Add this CSS to render the icons:

.shiki-icon-highlight {
  display: inline-block;
  width: 1.25em;
  height: 1.25em;
  vertical-align: -0.25em;
  margin-right: 0.125em;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-image: var(--shiki-icon-url);
  mask-image: var(--shiki-icon-url);
}

License

MIT License © 2026-PRESENT Benjamin Canac