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。

shiki

TS Handbook in Material Theme:

ts handbook material theme

4 条回复 • 2019-01-04 14:09:37 +08:00

MartinWu

2019-01-04 13:50:24 +08:00

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

octref

2019-01-04 14:00:37 +08:00

@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

2019-01-04 14:02:39 +08:00

@octref #2

完全不懂。。。路过好了。

aaronly

2019-01-04 14:09:37 +08:00

nice, 关注了

Shiki — A beautiful Syntax Highlighter

Shiki