@shikijs/engine-javascript

What is @shikijs/engine-javascript?

@shikijs/engine-javascript is a syntax highlighting engine specifically designed for JavaScript. It is part of the Shiki library, which is a beautiful syntax highlighter. This package allows you to highlight JavaScript code with ease, providing a visually appealing and readable format.

What are @shikijs/engine-javascript's main functionalities?

Basic Syntax Highlighting

This feature allows you to highlight JavaScript code using a specified theme. In this example, the 'nord' theme is used to highlight a simple JavaScript code snippet.

const shiki = require('shiki');

shiki.getHighlighter({ theme: 'nord' }).then(highlighter => {
  const code = `const x = 10;`;
  console.log(highlighter.codeToHtml(code, { lang: 'js' }));
});

Custom Themes

This feature allows you to load and use custom themes for syntax highlighting. The example demonstrates how to load a custom theme from a JSON file and use it to highlight JavaScript code.

const shiki = require('shiki');

shiki.loadTheme('./path/to/custom-theme.json').then(theme => {
  return shiki.getHighlighter({ theme });
}).then(highlighter => {
  const code = `const y = 20;`;
  console.log(highlighter.codeToHtml(code, { lang: 'js' }));
});

Highlighting with Line Numbers

This feature allows you to include line numbers in the highlighted code output. The example shows how to highlight a JavaScript function with line numbers using the 'nord' theme.

const shiki = require('shiki');

shiki.getHighlighter({ theme: 'nord' }).then(highlighter => {
  const code = `function add(a, b) {
  return a + b;
}`;
  console.log(highlighter.codeToHtml(code, { lang: 'js', lineNumbers: true }));
});

Other packages similar to @shikijs/engine-javascript

highlight.js

highlight.js is a popular syntax highlighting library that supports a wide range of languages and themes. It is highly customizable and easy to integrate into web projects. Compared to @shikijs/engine-javascript, highlight.js offers broader language support but may not provide the same level of customization for JavaScript-specific highlighting.

prismjs

Prism is a lightweight, extensible syntax highlighter that supports a variety of languages and themes. It is designed to be fast and easy to use. Prism.js offers a modular design, allowing you to include only the components you need. While it is versatile, it may not offer the same out-of-the-box visual appeal as @shikijs/engine-javascript.

codemirror

CodeMirror is a versatile text editor implemented in JavaScript for the browser. It comes with built-in syntax highlighting for many languages, including JavaScript. CodeMirror is more than just a syntax highlighter; it is a full-featured code editor. It is more complex and feature-rich compared to @shikijs/engine-javascript, which focuses solely on syntax highlighting.

README

@shikijs/engine-javascript

Engine for Shiki using JavaScript's native RegExp. Uses Oniguruma-To-ES to transpile regex syntax and behavior.

Documentation

License

MIT