爱意满满的作品展示区。

This topic created in 2703 days ago, the information mentioned may be changed or developed.

Shiki

octref · 2019-01-04T05:41:32Z

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 :

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 replies • 2019-01-04 14:09:37 +08:00

MartinWu

Jan 4, 2019

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

octref

Jan 4, 2019

@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

Jan 4, 2019

@octref #2

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

aaronly

Jan 4, 2019

nice, 关注了

Shiki — A beautiful Syntax Highlighter

Shiki