阿超 > 语法高亮shiki

语法高亮shiki

2024-09-11

前端

即使断了一条弦，其余的三条弦还是要继续演奏，这就是人生。——爱默生

  1. 项目介绍

Shiki 是一个基于 VS Code 语法高亮引擎的代码高亮库，它通过使用 TextMate 语法和 VS Code 的主题，生成极为准确和美观的高亮代码。Shiki 提供了一种非常灵活的方式来在静态网站生成器、文档系统或 Web 应用中进行代码高亮渲染，支持多种编程语言和主题。

Shiki 的主要特点：

  • 精确的高亮效果：基于 VS Code 引擎，支持 TextMate 语法和多种语言的高亮，保证与编辑器中一致的高亮效果。
  • 丰富的主题：支持多种 VS Code 主题，能够为代码提供深浅色主题选择。
  • 轻量级和快速：尽管功能强大，但 Shiki 仍然保持轻量和高效，适合在 Web 项目中使用。
  • 适用性广泛：可以轻松集成到静态网站生成器、博客、文档系统等项目中，提升代码展示的视觉体验。
  1. 官方文档、GitHub地址

Shiki 的官方文档提供了详细的使用说明、配置选项和主题列表，帮助开发者快速上手。同时，GitHub 仓库提供了源码和社区贡献资源。

  1. NPM 引入

要在项目中使用 Shiki，可以通过 npm 进行安装。Shiki 的 NPM 包使得它可以快速集成到任何基于 Node.js 的项目中，尤其是静态网站生成器和博客系统。

使用 npm 引入 Shiki：

1
npm install shiki

安装完成后，可以在项目中使用 Shiki 渲染高亮代码。以下是一个基本的使用示例。

  1. 例子

下面是一个简单的示例，展示了如何使用 Shiki 对 JavaScript 代码进行语法高亮并将其渲染为 HTML。

示例：使用 Shiki 渲染高亮代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
const shiki = require('shiki');

async function renderCode() {
    // 加载 Shiki 并选择主题
    const highlighter = await shiki.getHighlighter({ theme: 'nord' });

    // 高亮 JavaScript 代码
    const code = `
    function helloWorld() {
        console.log('Hello, World!');
    }
    helloWorld();
    `;

    // 渲染为带高亮的 HTML
    const highlightedCode = highlighter.codeToHtml(code, { lang: 'javascript' });

    // 输出渲染结果
    console.log(highlightedCode);
}

renderCode();

代码解析：

  1. 加载高亮器：通过 shiki.getHighlighter() 方法加载 Shiki 高亮器，并指定使用的主题（如 nord）。
  2. 高亮代码：调用 highlighter.codeToHtml() 方法对指定的代码进行高亮，并渲染为 HTML 片段。可以指定 lang 选项来定义代码的编程语言。
  3. 输出渲染结果：将渲染后的 HTML 输出，可以在网页中直接使用，展示带高亮的代码块。

输出的 HTML：

1
2
3
4
<pre class="shiki" style="background-color: #2E3440FF"><code><span class="line"><span style="color: #88C0D0">function</span> <span style="color: #8FBCBB">helloWorld</span><span style="color: #D8DEE9">()</span> <span style="color: #D8DEE9">{</span></span>
<span class="line"><span style="color: #D8DEE9">    </span><span style="color: #88C0D0">console</span><span style="color: #D8DEE9">.</span><span style="color: #8FBCBB">log</span><span style="color: #D8DEE9">(</span><span style="color: #ECEFF4">'Hello, World!'</span><span style="color: #D8DEE9">);</span></span>
<span class="line"><span style="color: #D8DEE9">}</span></span>
<span class="line"><span style="color: #8FBCBB">helloWorld</span><span style="color: #D8DEE9">();</span></span></code></pre>

通过这种方式，Shiki 将代码块渲染为带有高亮效果的 HTML，且支持多种主题和编程语言。

应用场景：

  1. 博客和文档系统：在技术博客或文档中展示高亮代码片段，提升阅读体验。
  2. 静态网站生成器：集成到如 Hexo、Gatsby 等静态网站生成器中，用于渲染文档中的代码。
  3. Web 应用：在 Web 应用中动态展示代码示例，帮助用户理解代码逻辑。

总结

Shiki 是一个非常灵活的代码高亮工具，能够轻松集成到多种类型的 JavaScript 项目中。通过使用 Shiki，你可以确保代码的展示效果与 VS Code 编辑器中的高亮一致，给读者提供最佳的阅读体验。

如果你正在构建博客、技术文档系统或者需要在网页中展示代码示例，Shiki 无疑是一个强大且易用的工具。它支持多种编程语言、主题配置，并且可以快速生成漂亮的高亮代码块，使得你的项目更加专业和美观。