@shikijs/core

What is @shikijs/core?

@shikijs/core is a syntax highlighter for the web that is designed to be fast, lightweight, and easy to use. It supports a wide range of programming languages and can be easily integrated into various web applications.

What are @shikijs/core's main functionalities?

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

Other packages similar to @shikijs/core

highlight.js

highlight.js is a popular syntax highlighter written in JavaScript. It supports a wide range of languages and is known for its ease of use and extensive language support. Compared to @shikijs/core, highlight.js is more established but may not be as lightweight or fast.

Prism

Prism is a lightweight, extensible syntax highlighter. It is designed to be easy to customize and extend, with a focus on performance. Compared to @shikijs/core, Prism offers a more modular approach but may require more configuration for advanced use cases.

README

@shikijs/core

The core functionality of Shiki, without any grammar of themes bundled.

It's the same as importing shiki/core.