shiki

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);
});