| 1 |
<p> |
| 2 |
<h2 align="center">Shiki</h2> |
| 3 |
</p> |
| 4 |
<p align="center"> |
| 5 |
Shiki is a beautiful Syntax Highlighter. <a href="http://shiki.matsu.io">Demo</a>. |
| 6 |
</p> |
| 7 |
|
| 8 |
## Usage |
| 9 |
|
| 10 |
```sh |
| 11 |
npm i shiki |
| 12 |
``` |
| 13 |
|
| 14 |
```js |
| 15 |
const shiki = require('shiki') |
| 16 |
|
| 17 |
shiki |
| 18 |
.getHighlighter({ |
| 19 |
theme: 'nord' |
| 20 |
}) |
| 21 |
.then(highlighter => { |
| 22 |
console.log(highlighter.codeToHtml(`console.log('shiki');`, { lang: 'js' })) |
| 23 |
}) |
| 24 |
|
| 25 |
// <pre class="shiki" style="background-color: #2e3440"><code> |
| 26 |
// <!-- Highlighted Code --> |
| 27 |
// </code></pre> |
| 28 |
``` |
| 29 |
|
| 30 |
```html |
| 31 |
<script src="https://unpkg.com/shiki"></script> |
| 32 |
<script> |
| 33 |
shiki |
| 34 |
.getHighlighter({ |
| 35 |
theme: 'nord' |
| 36 |
}) |
| 37 |
.then(highlighter => { |
| 38 |
const code = highlighter.codeToHtml(`console.log('shiki');`, { lang: 'js' }) |
| 39 |
document.getElementById('output').innerHTML = code |
| 40 |
}) |
| 41 |
</script> |
| 42 |
``` |
| 43 |
|
| 44 |
Clone [](https://github.com/shikijs/shiki-startershikijs/shiki-starter](https://github.com/shikijs/shiki-starter](https://github.com/shikijs/shiki-starter) to play with Shiki, or try it out on [](https://repl.it/@octref/shiki-starterRepl.it](https://repl.it/@octref/shiki-starter](https://repl.it/@octref/shiki-starter). |
| 45 |
|
| 46 |
## Seen |
| 47 |
|
| 48 |
- Shiki Docs: https://shiki.matsu.io |
| 49 |
- Interactive Demo on CodeSandbox (with Next.js): https://codesandbox.io/s/shiki-next-js-cir0y |
| 50 |
- [](https://code.visualstudio.comVS Code website](https://code.visualstudio.com](https://code.visualstudio.com), such as in the [](https://code.visualstudio.com/api/extension-guides/notebookNotebook API page](https://code.visualstudio.com/api/extension-guides/notebook](https://code.visualstudio.com/api/extension-guides/notebook). |
| 51 |
- [](https://www.typescriptlang.orgTypeScript website](https://www.typescriptlang.org](https://www.typescriptlang.org), such as in the [](https://www.typescriptlang.org/docs/handbook/basic-types.html#tupleBasic Types documentation page](https://www.typescriptlang.org/docs/handbook/basic-types.html#tuple](https://www.typescriptlang.org/docs/handbook/basic-types.html#tuple). |
| 52 |
- [](https://marketplace.visualstudio.com/items?itemName=bierner.markdown-ShikiMarkdown Preview Shiki Highlighting](https://marketplace.visualstudio.com/items?itemName=bierner.markdown-Shiki](https://marketplace.visualstudio.com/items?itemName=bierner.markdown-Shiki), a VS Code plugin to use Shiki's highlighting in Markdown preview. |
| 53 |
- [](https://www.npmjs.com/package/shiki-latexShiki LaTeX](https://www.npmjs.com/package/shiki-latex](https://www.npmjs.com/package/shiki-latex), a Shiki renderer for [](https://www.latex-project.orgLaTeX](https://www.latex-project.org](https://www.latex-project.org). Compatible with [](https://github.com/gpoore/mintedminted](https://github.com/gpoore/minted](https://github.com/gpoore/minted), replacing [](https://pygments.orgPygments](https://pygments.org](https://pygments.org). |
| 54 |
- [](https://fatihkalifa.com/typescript-twoslashFatih Kalifa's website](https://fatihkalifa.com/typescript-twoslash](https://fatihkalifa.com/typescript-twoslash) |
| 55 |
- [](https://docs.blockstack.org/Blockstack Documentation](https://docs.blockstack.org/](https://docs.blockstack.org/) |
| 56 |
|
| 57 |
## Contributing |
| 58 |
|
| 59 |
- [](./docs/themes.md#addAdd a theme](./docs/themes.md#add](./docs/themes.md#add) |
| 60 |
- [](./docs/languages.md#addAdd a language grammar](./docs/languages.md#add](./docs/languages.md#add) |
| 61 |
|
| 62 |
## Credits |
| 63 |
|
| 64 |
- Shiki uses [](https://github.com/microsoft/vscode-onigurumavscode-oniguruma](https://github.com/microsoft/vscode-oniguruma](https://github.com/microsoft/vscode-oniguruma) |
| 65 |
- A lot of code is based on [](https://github.com/Microsoft/vscode-textmatevscode-textmate](https://github.com/Microsoft/vscode-textmate](https://github.com/Microsoft/vscode-textmate) |
| 66 |
|
| 67 |
## Sponsorship |
| 68 |
|
| 69 |
If you find Shiki useful, please consider sponsoring my Open Source development. Thank you 🙏 |
| 70 |
|
| 71 |
https://github.com/sponsors/octref |
| 72 |
|
| 73 |
## License |
| 74 |
|
| 75 |
MIT © [](https://github.com/octrefPine Wu](https://github.com/octref](https://github.com/octref) |
| 76 |
|
