@shikijs/core

Syntax Highlighting

This feature allows you to highlight code syntax for various programming languages. The code sample demonstrates how to use the @shikijs/core package to highlight JavaScript code using the 'nord' theme.

const shiki = require('@shikijs/core');

async function highlightCode() {
  const highlighter = await shiki.getHighlighter({ theme: 'nord' });
  const code = `const x = 10;`;
  const highlightedCode = highlighter.codeToHtml(code, { lang: 'javascript' });
  console.log(highlightedCode);
}

highlightCode();

Custom Themes

This feature allows you to create and use custom themes for syntax highlighting. The code sample demonstrates how to define a custom theme and use it to highlight JavaScript code.

const shiki = require('@shikijs/core');

async function customThemeHighlight() {
  const highlighter = await shiki.getHighlighter({
    theme: {
      name: 'my-custom-theme',
      type: 'dark',
      colors: {
        'editor.background': '#1e1e1e'
      },
      tokenColors: [
        {
          scope: 'comment',
          settings: {
            foreground: '#6A9955'
          }
        }
      ]
    }
  });
  const code = `// This is a comment`;
  const highlightedCode = highlighter.codeToHtml(code, { lang: 'javascript' });
  console.log(highlightedCode);
}

customThemeHighlight();

Language Registration

This feature allows you to register custom languages for syntax highlighting. The code sample demonstrates how to register a custom language and use it to highlight code.

const shiki = require('@shikijs/core');

async function registerLanguage() {
  const highlighter = await shiki.getHighlighter({ theme: 'nord' });
  await highlighter.loadLanguage({ id: 'myLang', scopeName: 'source.myLang', grammar: {/* grammar definition */} });
  const code = `myLang code here`;
  const highlightedCode = highlighter.codeToHtml(code, { lang: 'myLang' });
  console.log(highlightedCode);
}

registerLanguage();