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.
Shiki 式
EJS-like Javascript template engine for Node.js
License
MIT/X Consortium License
(c) 2014 Eon S. Jeon esjeon@hyunmu.am
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.