shiki icon indicating copy to clipboard operation
shiki copied to clipboard

A beautiful yet powerful syntax highlighter

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

Contributing

See the Contributing Guide.

Credits

Sponsorship

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

https://github.com/sponsors/octref

License

MIT © Pine Wu