语法高亮shiki

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

项目介绍

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

Shiki 的主要特点：

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

官方文档、GitHub地址

官方文档：Shiki Documentation
GitHub 仓库：shikijs/shiki

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

NPM 引入

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

使用 npm 引入 Shiki：

代码语言：javascript复制

npm install shiki

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

例子

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

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

代码语言：javascript复制

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();

代码解析：

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

输出的 HTML：

代码语言：javascript复制

<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，且支持多种主题和编程语言。

应用场景：

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

总结

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

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

渲染博客系统语法网站

0 人点赞