VS Code Style Syntax Highlighter – shiki.js

Preview:

Description:

shiki.js is a fresh new VS Code style syntax highlighter that uses Text Mate grammars to tokenize strings.

More Features:

• 22 themes
• Supports more than 120 programming languages.

How to use it:

1. Install the shiki.js with package managers.

# Yarn
$ yarn add shiki
# NPM
$ npm install shiki --save

2. Import the shiki.js library.

const shiki = require('shiki')

// or
<script src="dist/index.iife.js"></script>

3. Create a container to hold the Syntax Highlighter.

<div id="output"></div>

4. Initialize the shiki.js and insert the source code to be highlighted.

shiki
.getHighlighter({
  theme: 'nord'
})
.then(highlighter => {
  // codeToHtml(code, language)
  const code = highlighter.codeToHtml(`console.log('shiki');`, 'js')
  document.getElementById('output').innerHTML = code
})

5. All possible themes:

• ‘dark-plus’
• ‘dracula-soft’
• ‘dracula’
• ‘github-dark’
• ‘github-light’
• ‘light-plus’
• ‘material-darker’
• ‘material-default’
• ‘material-lighter’
• ‘material-ocean’
• ‘material-palenight’
• ‘min-dark’
• ‘min-light’
• ‘monokai’
• ‘nord’
• ‘poimandres’
• ‘slack-dark’
• ‘slack-ochin’
• ‘solarized-dark’
• ‘solarized-light’
• ‘vitesse-dark’
• ‘vitesse-light’