@babel/highlight

What is @babel/highlight?

The @babel/highlight package is a syntax highlighter for JavaScript code. It can be used to highlight JavaScript syntax with themes for readability, often for displaying code in documentation or web applications.

What are @babel/highlight's main functionalities?

Syntax highlighting

This feature allows you to highlight JavaScript code. You can pass in a string of code and an options object to specify the theme, and it returns an object with a 'value' property containing the highlighted code.

const { highlight } = require('@babel/highlight');
const code = 'const x = 1;';
const highlightedCode = highlight(code, { theme: 'default' }).value;

Other packages similar to @babel/highlight

prismjs

Prism is a lightweight, extensible syntax highlighter, built with modern web standards in mind. It's used in thousands of websites, including some of those made by big companies like USA Today and The Washington Post. It is similar to @babel/highlight but supports a wider range of languages and has a plugin system for extending functionality.

highlight.js

Highlight.js is a syntax highlighter written in JavaScript. It works in the browser as well as on the server. It works with many languages and has a number of different styles. It is similar to @babel/highlight in that it highlights code syntax, but it has a broader language support and different themes.

shiki

Shiki is a beautiful syntax highlighter powered by the same syntax engine that powers VS Code. It offers a high level of accuracy and a wide range of themes from VS Code. It is similar to @babel/highlight in providing syntax highlighting, but it uses TextMate grammars for language definitions and has VS Code's themes.

README

@babel/highlight

Syntax highlight JavaScript strings for output in terminals.

See our website @babel/highlight for more information.

Install

Using npm:

npm install --save-dev @babel/highlight

or using yarn:

yarn add @babel/highlight --dev

Changelog

v7.25.7 (2024-10-02)

:bug: Bug Fix

• babel-helper-validator-identifier
  • #16825 fix: update identifier to unicode 16 (@JLHwung)
• babel-traverse
  • #16814 fix: issue with node path keys updated on unrelated paths (@DylanPiercey)
• babel-plugin-transform-classes
  • #16797 Use an inclusion rather than exclusion list for super() check (@nicolo-ribaudo)
• babel-generator
  • #16788 Fix printing of TS infer in compact mode (@nicolo-ribaudo)
  • #16785 Print TS type annotations for destructuring in assignment pattern (@nicolo-ribaudo)
  • #16778 Respect [no LineTerminator here] after nodes (@nicolo-ribaudo)

:nail_care: Polish

• babel-types
  • #16852 Add deprecated JSDOC for fields (@liuxingbaoyu)

:house: Internal

• babel-core
  • #16820 Allow sync loading of ESM when --experimental-require-module (@nicolo-ribaudo)
• babel-helper-compilation-targets, babel-helper-plugin-utils, babel-preset-env
  • #16858 Add browserslist config to external dependency (@JLHwung)
• babel-plugin-proposal-destructuring-private, babel-plugin-syntax-decimal, babel-plugin-syntax-import-reflection, babel-standalone
  • #16809 Archive syntax-import-reflection and syntax-decimal (@nicolo-ribaudo)
• babel-generator
  • #16779 Simplify logic for [no LineTerminator here] before nodes (@nicolo-ribaudo)

:running_woman: Performance

• babel-plugin-transform-typescript
  • #16875 perf: Avoid extra cloning of namespaces (@liuxingbaoyu)
• babel-types
  • #16842 perf: Improve @babel/types builders (@liuxingbaoyu)
  • #16828 Only access BABEL_TYPES_8_BREAKING at startup (@nicolo-ribaudo)