Shiki

Shiki is a phenomenal Syntax Highlighter.

It makes use of TextMate grammar to tokenize strings, and colours the tokens with VS Code themes. Briefly, Shiki generates HTML that appears precisely like your code in VS Code, and it really works nice in your static web site generator (or your dynamic web site).

It is easy to make use of:

const shiki = require('shiki')

shiki.getHighlighter({
  theme: 'nord'
}).then(highlighter => {
  console.log(highlighter.codeToHtml(`console.log('shiki');`, { lang: 'js' }))
})

// <pre class="shiki" type="background-color: #2e3440"><code>
//   <!-- Highlighted Code -->
// </code></pre>

Here is me utilizing Shiki and markdown-it to generate this web page:

const fs = require('fs')
const markdown = require('markdown-it')
const shiki = require('shiki')

shiki.getHighlighter({
  theme: 'nord'
}).then(highlighter => {
  const md = markdown({
    html: true,
    spotlight: (code, lang) => {
      return highlighter.codeToHtml(code, { lang })
    }
  })

  const html = md.render(fs.readFileSync('index.md', 'utf-8'))
  const out = `
    <title>Shiki</title>
    <hyperlink rel="stylesheet" href="type.css">
    ${html}
    <script src="index.js"></script>
  `
  fs.writeFileSync('index.html', out)

  console.log('finished')
})

Why Shiki although? Check out this monstrous TextMate grammar. It is what highlights TypeScript code in VS Code. Insane, I do know. But it surely will get the colour proper.

import * as React from 'react';
import './App.css';
import Hi there from './parts/Hi there';

const emblem = require('./emblem.svg');

operate App() {
  return (
    <div className="App">
      <div className="App-header">
        <img src={emblem} className="App-logo" alt="emblem" />
        <h2>Welcome to React</h2>
      </div>
      <p className="App-intro">
        To get began, edit <code>src/App.tsx</code> and save to reload.
      </p>
      <Hi there identify="TypeScript" />
    </div>
  );
}

export default App;

Apart from VS Code, TextMate (after all), Elegant Textual content and Atom all help TextMate grammar. If you may get syntax highlighting to work for your favorite language in any one in all them, attempt to find its grammar and cargo it in Shiki to syntax spotlight it:

const shiki = require('shiki')

shiki.getHighlighter({
  theme: 'nord',
  langs: [
    {
      id: 'rockstar',
      scopeName: 'source.rockstar',
      path: './rockstar.tmLanguage.json' // or `plist`
    }
  ]
}).then(highlighter => {
  highlighter.codeToHtml('Shout Rockstar', { lang: 'rockstar' })
})

Over 100 programming languages are supported out of the field, together with a conventional Chinese language one, 文言:

Shiki can load any VS Code themes. Simply change this line:

shiki.getHighlighter({
  theme: 'material-theme-palenight'
})

And also you get the above code in Material Palenight.

Yow will discover all bundled themes in shiki-themes, and use them like:

shiki.getHighlighter( 'light-plus'     => for the traditional VS Code really feel
  // 'github-dark' )

However actually, any VS Code theme will do. Here is anotherglitchinthematrix/monochrome:

Embedded language like Vue works nice, too:

<template>
  <div id="app">
    <h1>My Todo App!</h1>
    <TodoList/>
  </div>
</template>

<script>
import TodoList from './parts/TodoList.vue'

export default {
  parts: {
    TodoList
  }
}
</script>

<type lang="scss">
#app {
  max-width: 400px;
  margin: 0 auto;
  line-height: 1.4;
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  shade: $vue-blue;

  h1 {
    text-align: middle;
  }
}
</type>

For these visually attentive, render your code to SVG,

drop the SVG into Figma, Affinity Designer or Adobe Illustrator,

See Also

How a lot reminiscence bandwidth do giant Amazon cases provide? – Daniel Lemire’s weblog

and use the complete arsenal of vector enhancing instruments to reinforce your code presentation:

You may as well construct customized renderers to generate something — a unique HTML construction, SVG, and even photos:

const shiki = require('shiki')

shiki.getHighlighter({
  theme: 'nord'
}).then(highlighter => {
  const tokens = highlighter.codeToThemedTokens(`console.log('shiki');`, 'js')
  // default renderer, substitute with yours
  const html = shiki.renderToHtml(tokens) 
})

Shiki is now used on VS Code website to show VS Code API, and on TypeScript website to show TypeScript:

Amongst all usages of Shiki, I like Fatih Kalifa’s beautiful presentation most. Leandro Facchinetti has made shiki-latex to format his PhD dissertation, which makes me really feel extremely impressed.

Made by Pine. I get pleasure from constructing instruments to assist others. When you’ve got discovered Shiki helpful, please contemplate sponsoring my Open Supply improvement. Thanks.