Shiki is a beautiful Syntax Highlighter. Demo.
npm i shiki
const shiki = require('shiki')
shiki
.getHighlighter({
theme: 'nord'
})
.then(highlighter => {
console.log(highlighter.codeToHtml(`console.log('shiki');`, { lang: 'js' }))
})
// <pre class="shiki" style="background-color: #2e3440"><code>
// <!-- Highlighted Code -->
// </code></pre>
<script src="https://unpkg.com/shiki"></script>
<script>
shiki
.getHighlighter({
theme: 'nord'
})
.then(highlighter => {
const code = highlighter.codeToHtml(`console.log('shiki');`, { lang: 'js' })
document.getElementById('output').innerHTML = code
})
</script>
Clone shikijs/shiki-starter to play with Shiki, or try it out on Repl.it.
- Shiki Docs: https://shiki.matsu.io
- Interactive Demo on CodeSandbox (with Next.js): https://codesandbox.io/s/shiki-next-js-cir0y
- VS Code website, such as in the Notebook API page.
- TypeScript website, such as in the Basic Types documentation page.
- Markdown Preview Shiki Highlighting, a VS Code plugin to use Shiki's highlighting in Markdown preview.
- Shiki LaTeX, a Shiki renderer for LaTeX. Compatible with minted, replacing Pygments.
- Fatih Kalifa's website
- Blockstack Documentation
- Shiki uses vscode-oniguruma
- A lot of code is based on vscode-textmate
If you find Shiki useful, please consider sponsoring my Open Source development. Thank you 🙏
https://github.com/sponsors/octref
MIT © Pine Wu