Shiki：前端代码高亮的深度解析与应用

饺子不放糖
1,923 阅读4分钟

在前端开发领域，代码高亮不仅能够提升代码的可读性，还能增强用户的视觉体验。Shiki，作为一个现代的代码高亮库，它以其出色的性能和美观的界面，逐渐成为开发者的新选择。本文将深入探讨Shiki的内部机制、高级特性，并提供详细的使用指南。

Shiki的内部机制

Shiki的核心是基于TextMate语法和VS Code的高亮引擎构建的。TextMate语法是一种通用的语法高亮系统，它通过正则表达式定义语言的语法规则。VS Code的高亮引擎则是基于TextMate语法进行扩展和优化的。

Shiki的工作原理可以概括为以下几个步骤：

  1. 加载语言包：Shiki为每种支持的编程语言提供了一个语言包，其中包含了该语言的语法规则。
  2. 加载主题：Shiki允许用户选择不同的颜色主题，每个主题定义了不同语法元素的颜色和样式。
  3. 解析代码：Shiki使用语言包中的规则对代码进行解析，识别出不同的语法元素。
  4. 应用主题：根据选择的主题，Shiki为不同的语法元素应用相应的颜色和样式。
  5. 生成高亮后的代码：Shiki将解析和着色后的代码生成HTML，可以直接在网页中展示。

Shiki的高级特性

Shiki提供了一些高级特性，以满足不同场景下的需求：

  1. 细粒度捆绑：Shiki允许用户按需加载语言和主题，减少了不必要的资源加载。
  2. 转换器API：Shiki提供了转换器API，允许用户自定义代码的转换逻辑，例如添加行号、代码折叠等。
  3. 装饰器API：Shiki的装饰器API允许用户在代码上添加自定义的装饰，如高亮特定行、添加注释等。
  4. TypeScript集成：Shiki与TypeScript的Twoslash集成，为TypeScript代码提供了更好的高亮效果。

Shiki的使用指南

下面是一个详细的Shiki使用指南，展示如何在网页中集成Shiki，并使用其高级特性。

引入Shiki

首先，在HTML文档中引入Shiki的核心库和主题样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Shiki Code Highlighting</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/shiki@1.1.6/dist/themes/material-theme-light.min.css">
</head>
<body>
    <pre id="code-container" class="shiki material-theme-light">
    // 这里是你的代码
    </pre>

    <script src="https://cdn.jsdelivr.net/npm/shiki@1.1.6/dist/index.min.js"></script>
    <script src="your-script.js"></script>
</body>
</html>
使用转换器API

在your-script.js中，我们可以使用Shiki的转换器API来添加行号和代码折叠。

window.addEventListener('load', () => {
    const codeContainer = document.getElementById('code-container');
    const code = `
function fibonacci(n) {
    return n <= 1 ? n : fibonacci(n - 1) + fibonacci(n - 2);
}
    `;

    shiki.getHighlighter().then((highlighter) => {
        const highlightedCode = highlighter.codeToHtml(code, { lang: 'javascript' });

        // 使用转换器API添加行号
        const converter = highlighter.getConverter();
        converter.hooks.add('place', (place, node) => {
            if (node.type === 'text') {
                const lineNumber = place.lineNumber;
                const line = document.createElement('span');
                line.textContent = `${lineNumber + 1}. `;
                line.className = 'line-number';
                place.appendChild(line);
            }
        });

        // 使用转换器API添加代码折叠
        converter.hooks.add('finalize', (code) => {
            const firstLine = document.createElement('span');
            firstLine.textContent = '...';
            firstLine.className = 'code-fold';
            firstLine.onclick = () => {
                codeContainer.classList.toggle('folded');
            };
            code.insertBefore(firstLine, code.firstChild);
        });

        codeContainer.innerHTML = highlightedCode;
    });
});

在上述代码中，我们首先使用Shiki的getHighlighter方法获取高亮器实例，然后使用codeToHtml方法将代码高亮。接着，我们使用转换器API的hooks属性添加了两个自定义的转换逻辑：

  1. 添加行号：我们在每个代码行的开始添加了一个行号。
  2. 添加代码折叠：我们在代码的第一行添加了一个"..."的折叠按钮，点击它可以折叠和展开代码。
使用装饰器API

Shiki的装饰器API允许我们在代码上添加自定义的装饰。例如，我们可以高亮显示特定的代码行。

// 在获取高亮器实例后
highlighter.codeToHtml(code, { lang: 'javascript' }).then((highlightedCode) => {
    // 使用装饰器API高亮特定行
    const decorations = highlighter.decorate(code, { lang: 'javascript' });
    decorations.forEach((deco) => {
        if (deco.range.start.line === 1) { // 高亮第一行
            deco.node.classList.add('highlight');
        }
    });

    codeContainer.innerHTML = highlightedCode;
});

在上述代码中，我们使用装饰器API的decorate方法对代码进行了装饰。然后，我们遍历了所有的装饰，对于第一行的装饰，我们添加了一个highlight的CSS类。

结语

Shiki作为一个现代的代码高亮库，以其出色的性能、美观的界面和丰富的特性，为前端代码展示提供了新的可能性。本文深入探讨了Shiki的内部机制、高级特性，并提供了详细的使用指南。Shiki不仅能够提升代码的可读性，还能增强用户的视觉体验。无论你是在构建个人博客、文档站点还是在商业项目中，Shiki都能帮助开发者以优雅的方式展示代码。希望本文能够帮助你更好地理解和使用Shiki，为你的项目增添一抹亮色。

avatar
文章
阅读
粉丝