It uses TextMate grammar to tokenize strings, and colors the tokens with VS Code themes. In short, Shiki generates HTML that looks exactly like your code in VS Code, and it works great in your static website generator.
It's simple to use:
const shiki = require('shiki')
-
+
shiki.getHighlighter({
theme: 'nord'
}).then(highlighter => {
console.log(highlighter.codeToHtml(`console.log('shiki');`, 'js'))
})
-
+
// <pre class="shiki" style="background-color: #2e3440"><code>
// <!-- Highlighted Code -->
-// </code></pre>Here's me using Shiki and markdown-it to generate this page:
const fs = require('fs')
const markdown = require('markdown-it')
const shiki = require('shiki')
-
+
shiki.getHighlighter({
theme: 'nord'
}).then(highlighter => {
@@ -30,7 +31,7 @@ shiki
return highlighter.codeToHtml(code, lang)
}
})
-
+
const html = md.render(fs.readFileSync('index.md', 'utf-8'))
const out = `
<title>Shiki</title>
@@ -39,16 +40,17 @@ shiki
<script src="index.js"></script>
`
fs.writeFileSync('index.html', out)
-
+
console.log('done')
-})Why Shiki though? Take a look at this monstrous TextMate grammar. It's what highlights TypeScript code in VS Code. Insane, I know. But it gets the color right.
import * as React from 'react';
import './App.css';
import Hello from './components/Hello';
-
+
const logo = require('./logo.svg');
-
+
function App() {
return (
<div className="App">
@@ -63,11 +65,12 @@ shiki
</div>
);
}
-
-export default App;Besides VS Code, TextMate (of course), Sublime Text and Atom all support TextMate grammar. If you can get syntax highlighting to work for your favorite language in any one of them, try to find its grammar and load it in Shiki to syntax highlight it:
const shiki = require('shiki')
-
+
shiki.getHighlighter({
theme: 'nord',
langs: [
@@ -79,14 +82,16 @@ shiki
]
}).then(highlighter => {
highlighter.codeToHtml('Shout Rockstar', 'rockstar')
-})Over 100 programming languages are supported out of the box, including a traditional Chinese one, 文言:
Shiki can load any VS Code themes. Just change this line:
shiki.getHighlighter({
theme: 'material-theme-palenight'
-})And you get the above code in Material Palenight.
@@ -97,7 +102,8 @@But really, any VS Code theme will do. Here's anotherglitchinthematrix/monochrome:
Embedded language like Vue works great, too:
@@ -107,17 +113,17 @@For those visually attentive, render your code to SVG,
drop the SVG into Figma, Affinity Designer or Adobe Illustrator,
@@ -141,14 +148,15 @@
You can also build custom renderers to generate anything — a different HTML structure, SVG, or even images:
const shiki = require('shiki')
-
+
shiki.getHighlighter({
theme: 'nord'
}).then(highlighter => {
const tokens = highlighter.codeToThemedTokens(`console.log('shiki');`, 'js')
// default renderer, replace with yours
const html = shiki.renderToHtml(tokens)
-})Shiki is now used on VS Code website to teach VS Code API, and on TypeScript website to teach TypeScript:
Among 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 feel incredibly inspired.
diff --git a/packages/site/mono.html b/packages/site/mono.html index 848482607..4a3c43370 100644 --- a/packages/site/mono.html +++ b/packages/site/mono.html @@ -1,5 +1,6 @@const shiki = require('shiki')
-
+
shiki.getHighlighter({
theme: JSON.parse(fs.readfileSync('./monochrome-dark-subtle.json', 'utf-8'))
-})import * as React from 'react';
import './App.css';
import Hello from './components/Hello';
-
+
const logo = require('./logo.svg');
-
+
function App() {
return (
<div className="App">
@@ -18,5 +18,6 @@
</div>
);
}
-
-export default App;Midnight takes your heart and your soul
While your heart is as high as your soul
Put your heart without your soul into your heart
-
+
Give back your heart
-
-
+
+
Desire is a lovestruck ladykiller
My world is nothing
Fire is ice
@@ -14,13 +14,14 @@
If Midnight taking my world, Fire is nothing and Midnight taking my world, Hate is nothing
Shout "FizzBuzz!"
Take it to the top
-
+
If Midnight taking my world, Fire is nothing
Shout "Fizz!"
Take it to the top
-
+
If Midnight taking my world, Hate is nothing
Say "Buzz!"
Take it to the top
-Whisper my world吾有一言。曰「「春日宴。」」。書之。
有數九。名之曰「酒數」。
-
+
恆為是。若「酒數」等於零者乃止也。
-
+
吾有三言。曰「「與君」」。曰「酒數」。
曰「「杯酒。可以窮歡宴。綠酒一杯歌一遍。」」。書之。
-
+
減「酒數」以一。昔之「酒數」者。今其是矣云云。
-
+
吾有一言。曰「「綠酒千杯腸已爛。」」。書之。