shiki

What is shiki?

The shiki npm package is a beautiful syntax highlighter powered by the same syntax engine that Visual Studio Code uses. It can tokenize code in over 150 languages and comes with multiple themes. It is often used to generate syntax-highlighted code snippets for documentation, blogs, and other applications where displaying code is necessary.

What are shiki's main functionalities?

Syntax Highlighting

This feature allows you to highlight syntax of code snippets. The code sample demonstrates how to use shiki to highlight a JavaScript code snippet with the 'nord' theme.

const shiki = require('shiki');
shiki.getHighlighter({ theme: 'nord' }).then(highlighter => {
  const code = `console.log('Hello, world!');`;
  const language = 'javascript';
  const html = highlighter.codeToHtml(code, language);
  console.log(html);
});

Loading Different Themes

Shiki allows you to load different themes for syntax highlighting. This code sample shows how to initialize the highlighter with the 'material-palenight' theme.

const shiki = require('shiki');
shiki.getHighlighter({ theme: 'material-palenight' }).then(highlighter => {
  // Use the highlighter with the 'material-palenight' theme
});

Loading Custom Themes

Shiki also supports loading custom themes. In this code sample, a custom theme is loaded from a local JSON file.

const shiki = require('shiki');
const myTheme = require('./myTheme.json');
shiki.getHighlighter({ theme: myTheme }).then(highlighter => {
  // Use the highlighter with a custom theme
});

Highlighting with Line Numbers

Shiki can include line numbers in the highlighted code output. This code sample demonstrates how to generate HTML with line numbers for a given code snippet.

const shiki = require('shiki');
shiki.getHighlighter({ theme: 'nord' }).then(highlighter => {
  const code = `function sayHello() {\n  console.log('Hello, world!');\n}`;
  const language = 'javascript';
  const html = highlighter.codeToHtml(code, { lang: language, lineNumbers: true });
  console.log(html);
});

Other packages similar to shiki

highlight.js

Highlight.js is a widely-used syntax highlighter that supports many languages and themes. It is often considered to be less accurate than shiki in terms of tokenization because it uses regex-based matching rather than a proper language grammar.

prismjs

Prism is another popular syntax highlighter that is lightweight and extensible. It supports a wide range of languages and plugins for additional functionality. Unlike shiki, Prism does not use the TextMate grammar for tokenization.

rouge

Rouge is a Ruby library for syntax highlighting that can be used in a variety of applications. It is not an npm package but can be used in Jekyll and other Ruby-based static site generators. It is known for its simplicity and ease of use compared to shiki.

README

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>

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

Learn more from the GitHub repo: shikijs/shiki.

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

Changelog

0.14.3 | 2023-06-25

🚀 Features & Fixes

• fix: exclude dark/light modern themes for now
• fix: fix unzipping issue with unzipper. fix #478

🙌 Contributions

• feat: add narrat grammar | #489 | @liana-p
• feat: add glimmer js/ts language | #486 | @IgnaceMaes
• feat: add displayName to BUNDLED_LANGUAGES | #470 | @lawvs
• Specify langs in browser based example | #477 | @wesbos
• feat: add hjson | #471 | @AkaraChen
• feat: add nextflow grammar | #472 | @mashehu
• feat: add cypher grammar | #465 | @KevinBatdorf
• feat: add vyper grammar | #466 | @KevinBatdorf
• feat: add beancount grammar | #468 | @KevinBatdorf