VS Code Style Syntax Highlighter – shiki.js

Category: Javascript , Recommended , Text | August 19, 2021
Author:shikijs
Views Total:322 views
Official Page:Go to website
Last Update:August 19, 2021
License:MIT

Preview:

VS Code Style Syntax Highlighter – shiki.js

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’

You Might Be Interested In:


Leave a Reply