随着前端技术的不断发展，代码高亮成为了提升代码可读性的重要工具。Shiki，作为一个现代、高效且美观的代码高亮器，正逐渐成为前端开发者的新宠。本文将介绍Shiki的基本概念、功能，并提供一个简单的使用示例。
Shiki简介
Shiki是一个基于TextMate语法和VS Code高亮引擎的代码高亮库。它支持几乎所有主流编程语言的语法高亮，并且能够提供快速且准确的高亮效果。Shiki的设计哲学是简洁和高效，它避免了自定义正则表达式、CSS和HTML的繁琐，允许开发者直接使用VS Code的颜色主题。
Shiki的功能亮点
- 纯ESM模块：Shiki的所有语法、主题和WASM模块都是纯ESM，支持懒加载，对现代JavaScript捆绑器友好。
- 通用性：不依赖Node.js的API和文件系统，可以在任何现代JavaScript运行时上运行。
- 细粒度捆绑：支持语言和主题的细粒度捆绑，优化加载性能。
- 深浅色模式：支持浅色和深色模式，适应不同用户的视觉偏好。
- API丰富：提供转换器API和代码装饰API，方便开发者进行个性化定制。
- TypeScript集成：与TypeScript的Twoslash集成，增强类型语言的高亮体验。
Shiki演练场
Shiki提供了一个在线演练场，允许用户试用Shiki来高亮自己的代码。这个演练场在浏览器端渲染，而文档站点的其他代码块则是在构建时渲染并静态托管的。
捆绑包大小
Shiki注重性能和效率，提供了不同大小的捆绑包以适应不同的使用场景。用户可以在pkg-size.dev/shiki上查看不同捆绑包的详细大小。
使用Shiki
下面是一个简单的Shiki使用示例，展示如何在网页中集成Shiki来高亮一段代码。
HTML部分
首先，在HTML文档中添加一个容器来显示高亮后的代码。
<!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>
JavaScript部分
然后，创建一个your-script.js文件来加载并高亮代码。
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高亮代码
shiki.getHighlighter().then((highlighter) => {
const highlightedCode = highlighter.codeToHtml(code, { lang: 'javascript' });
codeContainer.innerHTML = highlightedCode;
});
});
在上述代码中，我们首先从CDN引入了Shiki的核心库和主题样式。然后在页面加载完成后，我们获取了code-container元素，并将要高亮的代码传递给Shiki的highlighter。Shiki会返回一个Promise，其中包含了高亮后的HTML代码，我们将其设置为code-container的innerHTML。
结语
Shiki作为一个现代的代码高亮库，以其简洁、高效和强大的功能，为前端代码展示提供了新的可能性。无论是在个人博客、文档站点还是在商业项目中，Shiki都能帮助开发者以优雅的方式展示代码，提升用户体验。通过本文的介绍和示例，你应该对如何使用Shiki有了基本的了解。不妨在你的下一个项目中尝试Shiki，体验它带来的便利和美观吧。
