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.
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);
});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.
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 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.
A beautiful syntax highlighter based on TextMate grammars, accurate and powerful.
FAQs
A beautiful Syntax Highlighter.
The npm package shiki receives a total of 1,802,290 weekly downloads. As such, shiki popularity was classified as popular.
We found that shiki demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 4 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.
Security News
The Ultralytics' PyPI Package was compromised four times in one weekend through GitHub Actions cache poisoning and failure to rotate previously compromised API tokens.
Security News
Research
Socket researchers found a malicious Maven package impersonating the legitimate ‘XZ for Java’ library, introducing a backdoor for remote code execution.
