Shiki — A beautiful Syntax Highlighter

[octref]

Shiki

• Demo: http://shiki.matsu.io
• GitHub: https://github.com/octref/shiki

VS Code / 旧版 Atom / Sublime Text / TextMate 使用的都是 Oniguruma 和 TextMate grammar 來做 syntax highlighting。在各种 API 文档以及博客上，大家现在使用的一般是 Highlight.js 或者 Prism.js ，但它们的缺点是：

• 无法达到 TextMate grammar + TextMate theme 高亮的准确性。
• 无法使用 VS Code 的 theme。

最近有人把 Oniguruma 编译成 WASM，于是就基于这个做了一个 Syntax Highlighter。

• 支持各种常用语言。
• 支持所有 VS Code theme。
• 已经用于 VS Code 的官方 API 文档，比如 https://code.visualstudio.com/api/extension-guides/command
• 正在和 TypeScript team 建议使用于 TS 的 docs / handbook。这里是用 Vuepress 和 vuepress-plugin-shiki 做的两个 Tutorial 的预览： https://shiki-ts-handbook.netlify.com 。

各位可以试试用于自己的 static site generator。
GitHub 欢迎 star / feature-request / issue。

---

TS Handbook in Material Theme:

[MartinWu]

vscode 用户表示，我可以怎么用这个东西？

[octref]

@MartinWu

- `yarn add shiki`
- 按 demo 或者 GitHub 里的例子运行，比如:

```js
const shiki = require('shiki')

shiki.getHighlighter({
theme: 'nord'
}).then(highlighter => {
console.log(highlighter.codeToHtml(`console.log('shiki');`, 'js'))
})
```

[MartinWu]

@octref #2 完全不懂。。。路过好了。

[aaronly]

nice, 关注了