| 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 |
Learn more from the GitHub repo: [](https://github.com/shikijs/shikishikijs/shiki](https://github.com/shikijs/shiki](https://github.com/shikijs/shiki). |
| 47 |
|
| 48 |
|
| 49 |
## Credits |
| 50 |
|
| 51 |
- Shiki uses [](https://github.com/microsoft/vscode-onigurumavscode-oniguruma](https://github.com/microsoft/vscode-oniguruma](https://github.com/microsoft/vscode-oniguruma) |
| 52 |
- 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) |
| 53 |
|
| 54 |
## Sponsorship |
| 55 |
|
| 56 |
If you find Shiki useful, please consider sponsoring my Open Source development. Thank you 🙏 |
| 57 |
|
| 58 |
https://github.com/sponsors/octref |
| 59 |
|
| 60 |
## License |
| 61 |
|
| 62 |
MIT © [](https://github.com/octrefPine Wu](https://github.com/octref](https://github.com/octref) |
| 63 |
|
