Shiki

Shiki is a beautiful Syntax Highlighter. Demo.

Usage

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>

• Themes
• Languages
• SVG Renderer
• vuepress-plugin-shiki

Clone shikijs/shiki-starter to play with Shiki, or try it out on Repl.it.

Seen

• Shiki Docs: https://shiki.matsu.io
• Shiki Twoslash: https://shikijs.github.io/twoslash/ Playground: https://shikijs.github.io/twoslash/playground
• 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
• VPC Shiki, Shiki codeblocks on Discord. Powered by Powercord
• Torchlight, a syntax highlighting API powered by the Shiki tokenizer.
• CodeChalk, A neat terminal code highlighting tool powered by Shiki tokenizer and Chalk.
• shiki-renderer-pdf, a Shiki renderer for PDFs. Used in pdfc to compile your source code to PDFs.
• Code Hike, a collection of components and mods for MDX codeblocks.
• Scarbon, an elegant code renderer made using Shiki for highlighting, Prettier for formatting, and Canvas for rendering
• shiki-renderer-canvas, a Canvas renderer for Shiki that works in Node.js and the browser

Contributing

See the Contributing Guide.

Credits

• Shiki uses vscode-oniguruma
• A lot of code is based on vscode-textmate

Sponsorship

If you find Shiki useful, please consider sponsoring my Open Source development. Thank you 🙏

https://github.com/sponsors/octref

License

MIT © Pine Wu