shikijs

一款漂亮而强大的语法高亮器

基本使用

通常用于在 markdown 中解析代码块

原始代码

// 定义一个简单的函数，用于计算两个数字的和
function add(a: number, b: number): number {
    return a + b;
}

转换逻辑

直接使用导出的 codeToHtml 进行代码转换

import { codeToHtml } from 'shiki'

const html = await codeToHtml(code, {
  lang: 'javascript',
  theme: 'vitesse-dark'
})

console.log(html) // highlighted html string

输出结果

输出的 HTML 结构分为三层：

• 外层的 <pre> 和 <code> 标签，负责包裹内部代码
• 带有 class="line" 的 span 行，负责换行
• 最小高亮粒度的 token 块

<pre
  class="shiki vitesse-light" style="background-color:#ffffff;color:#393a34" tabindex="0"
>
  <code>
    <span class="line"><span style="color:#A0ADA0">// 定义一个简单的函数，用于计算两个数字的和</span></span>
    <span class="line"><span style="color:#AB5959">function</span><span style="color:#59873A"> add</span><span style="color:#999999">(</span><span style="color:#B07D48">a</span><span style="color:#999999">: </span><span style="color:#2E8F82">number</span><span style="color:#999999">,</span><span style="color:#B07D48"> b</span><span style="color:#999999">: </span><span style="color:#2E8F82">number</span><span style="color:#999999">):</span><span style="color:#2E8F82"> number</span><span style="color:#999999"> {</span></span>
    <span class="line"><span style="color:#1E754F">    return</span><span style="color:#B07D48"> a</span><span style="color:#AB5959"> +</span><span style="color:#B07D48"> b</span><span style="color:#999999">;</span></span>
    <span class="line"><span style="color:#999999">}</span></span>
  </code>
</pre>

主题切换

可以使用多种主题渲染，主题切换也相当容易

const html = await codeToHtml(code, {
  lang: 'typescript',
  themes: {
    light: 'min-light',
    dark: 'nord',
  },
})

主题 id 被渲染在了 <pre> 标签上，每个 token 的 span 上通过 css 变量记录了另一个主题的颜色

<pre
  class="shiki shiki-themes min-light nord"
  style="background-color:#ffffff;--shiki-dark-bg:#2e3440ff;color:#24292eff;--shiki-dark:#d8dee9ff" tabindex="0"
>
  <code>
    <span class="line"><span style="color:#C2C3C5;--shiki-dark:#616E88">// 定义一个简单的函数，用于计算两个数字的和</span></span>
    <span class="line"><span style="color:#D32F2F;--shiki-dark:#81A1C1">function</span><span style="color:#6F42C1;--shiki-dark:#88C0D0"> add</span><span style="color:#24292EFF;--shiki-dark:#ECEFF4">(</span><span style="color:#24292EFF;--shiki-dark:#D8DEE9">a</span><span style="color:#D32F2F;--shiki-dark:#81A1C1">:</span><span style="color:#1976D2;--shiki-dark:#8FBCBB"> number</span><span style="color:#212121;--shiki-dark:#ECEFF4">,</span><span style="color:#24292EFF;--shiki-dark:#D8DEE9"> b</span><span style="color:#D32F2F;--shiki-dark:#81A1C1">:</span><span style="color:#1976D2;--shiki-dark:#8FBCBB"> number</span><span style="color:#24292EFF;--shiki-dark:#ECEFF4">)</span><span style="color:#D32F2F;--shiki-dark:#81A1C1">:</span><span style="color:#1976D2;--shiki-dark:#8FBCBB"> number</span><span style="color:#24292EFF;--shiki-dark:#ECEFF4"> {</span></span>
    <span class="line"><span style="color:#D32F2F;--shiki-dark:#81A1C1">    return</span><span style="color:#24292EFF;--shiki-dark:#D8DEE9"> a</span><span style="color:#D32F2F;--shiki-dark:#81A1C1"> +</span><span style="color:#24292EFF;--shiki-dark:#D8DEE9"> b</span><span style="color:#24292EFF;--shiki-dark:#81A1C1">;</span></span>
    <span class="line"><span style="color:#24292EFF;--shiki-dark:#ECEFF4">}</span></span>
  </code>
</pre>

当处于暗黑模式的时候，切换 span 的样式为对应暗黑模式下的样式：

html.dark .shiki,
html.dark .shiki span {
  color: var(--shiki-dark) !important;
  background-color: var(--shiki-dark-bg) !important;
}