Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

shiki

Package Overview
Dependencies
Maintainers
4
Versions
129
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

shiki

A beautiful Syntax Highlighter.

  • 1.22.2
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
2.2M
decreased by-8.08%
Maintainers
4
Weekly downloads
 
Created

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

Keywords

FAQs

Package last updated on 28 Oct 2024

Did you know?

Socket

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.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc