Security News
Introducing the Socket Python SDK
The initial version of the Socket Python SDK is now on PyPI, enabling developers to more easily interact with the Socket REST API in Python projects.
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.
shiki
Experimental Onigasm based Syntax Highlighter.
const shiki = require('shiki')
async function go() {
const themedTokenizer = await shiki.getCodeTokenizer('light_plus')
const tokenizingInfo = themedTokenizer("console.log('foo');", 'javascript')
const html = shiki.buildHTML(tokenizingInfo, 'JavaScript')
console.log(html)
console.log(JSON.stringify(tokenizingInfo, null, 2))
}
go()
html
<pre class="shiki"><div class="language-id">JavaScript</div><code><span style="color: #267F99">console</span><span style="color: #000000">.</span><span style="color: #795E26">log</span><span style="color: #000000">(</span><span style="color: #A31515">'foo'</span><span style="color: #000000">);</span>
</code></pre>
tokenizingInfo
[
[
{
"content": "console",
"color": "#267F99",
"explanation": [
{
"content": "console",
"scopes": [
{
"scopeName": "source.js",
"themeMatches": []
},
{
"scopeName": "support.class.console.js",
"themeMatches": [
{
"name": "Types declaration and references",
"scope": [
"meta.return-type",
"support.class",
"support.type",
"entity.name.type",
"entity.name.class",
"storage.type.cs",
"storage.type.generic.cs",
"storage.type.modifier.cs",
"storage.type.variable.cs",
"storage.type.annotation.java",
"storage.type.generic.java",
"storage.type.java",
"storage.type.object.array.java",
"storage.type.primitive.array.java",
"storage.type.primitive.java",
"storage.type.token.java",
"storage.type.groovy",
"storage.type.annotation.groovy",
"storage.type.parameters.groovy",
"storage.type.generic.groovy",
"storage.type.object.array.groovy",
"storage.type.primitive.array.groovy",
"storage.type.primitive.groovy"
],
"settings": {
"foreground": "#267f99"
}
}
]
}
]
}
]
},
{
"content": ".",
"color": "#000000",
"explanation": [
{
"content": ".",
"scopes": [
{
"scopeName": "source.js",
"themeMatches": []
},
{
"scopeName": "punctuation.accessor.js",
"themeMatches": []
}
]
}
]
},
{
"content": "log",
"color": "#795E26",
"explanation": [
{
"content": "log",
"scopes": [
{
"scopeName": "source.js",
"themeMatches": []
},
{
"scopeName": "support.function.console.js",
"themeMatches": [
{
"name": "Function declarations",
"scope": [
"entity.name.function",
"support.function"
],
"settings": {
"foreground": "#795E26"
}
}
]
}
]
}
]
},
{
"content": "(",
"color": "#000000",
"explanation": [
{
"content": "(",
"scopes": [
{
"scopeName": "source.js",
"themeMatches": []
},
{
"scopeName": "meta.brace.round.js",
"themeMatches": []
}
]
}
]
},
{
"content": "'foo'",
"color": "#A31515",
"explanation": [
{
"content": "'",
"scopes": [
{
"scopeName": "source.js",
"themeMatches": []
},
{
"scopeName": "string.quoted.single.js",
"themeMatches": [
{
"scope": "string",
"settings": {
"foreground": "#a31515"
}
}
]
},
{
"scopeName": "punctuation.definition.string.begin.js",
"themeMatches": []
}
]
},
{
"content": "foo",
"scopes": [
{
"scopeName": "source.js",
"themeMatches": []
},
{
"scopeName": "string.quoted.single.js",
"themeMatches": [
{
"scope": "string",
"settings": {
"foreground": "#a31515"
}
}
]
}
]
},
{
"content": "'",
"scopes": [
{
"scopeName": "source.js",
"themeMatches": []
},
{
"scopeName": "string.quoted.single.js",
"themeMatches": [
{
"scope": "string",
"settings": {
"foreground": "#a31515"
}
}
]
},
{
"scopeName": "punctuation.definition.string.end.js",
"themeMatches": []
}
]
}
]
},
{
"content": ");",
"color": "#000000",
"explanation": [
{
"content": ")",
"scopes": [
{
"scopeName": "source.js",
"themeMatches": []
},
{
"scopeName": "meta.brace.round.js",
"themeMatches": []
}
]
},
{
"content": ";",
"scopes": [
{
"scopeName": "source.js",
"themeMatches": []
},
{
"scopeName": "punctuation.terminator.statement.js",
"themeMatches": []
}
]
}
]
}
]
]
FAQs
A beautiful Syntax Highlighter.
The npm package shiki receives a total of 1,905,785 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.
Security News
The initial version of the Socket Python SDK is now on PyPI, enabling developers to more easily interact with the Socket REST API in Python projects.
Security News
Floating dependency ranges in npm can introduce instability and security risks into your project by allowing unverified or incompatible versions to be installed automatically, leading to unpredictable behavior and potential conflicts.
Security News
A new Rust RFC proposes "Trusted Publishing" for Crates.io, introducing short-lived access tokens via OIDC to improve security and reduce risks associated with long-lived API tokens.