Skip to content

best-highlight is a lightweight, efficient syntax highlighting library with zero runtime dependencies

License

Notifications You must be signed in to change notification settings

The-Best-Codes/best-highlight

Folders and files

NameName
Last commit message
Last commit date

Latest commit

0700f7b · Jan 30, 2025

History

48 Commits
Jan 30, 2025
Nov 21, 2024
Jan 29, 2025
Jan 29, 2025
Jan 29, 2025
Nov 15, 2024
Nov 15, 2024
Nov 15, 2024
Jan 29, 2025
Nov 15, 2024
Jan 29, 2025
Jan 29, 2025
Dec 12, 2024
Nov 23, 2024

Repository files navigation

best-highlight

Best Highlight Logo

npm Library

A lightweight, efficient syntax highlighting library with zero runtime dependencies. Supports both CommonJS and ES Modules, perfect for both browser and Node.js environments.

Features

  • 🚀 Zero runtime dependencies
  • 📦 Tiny bundle size
  • 🎨 Multiple themes (Light, Dark, Nord, GitHub)
  • 🔧 First-class TypeScript support
  • 🌐 Universal compatibility (Browser, Node.js)
  • ⚡ Fast and reliable tokenization using optimized scanner
  • 🎯 Support for 7 popular languages with comprehensive test coverage

Installation

npm install best-highlight

Browser Usage

To use the library in a browser environment:

  1. Include the library in your HTML file:
<script src="https://cdn.jsdelivr.net/npm/best-highlight@latest/dist/browser/index.global.js"></script>
  1. Use the global bestHighlight function to highlight code:
bestHighlight.highlight(
  'function hello() {\n  console.log("Hello, World!");\n}',
  "javascript",
);
  1. Write your own styles or use the provided themes:
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/best-highlight@latest/dist/themes/light.css"
/>

Example:

<html>
  <head>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/best-highlight@latest/dist/themes/light.css"
    />
    <script src="https://cdn.jsdelivr.net/npm/best-highlight@latest/dist/browser/index.global.js"></script>
  </head>
  <body>
    <pre data-language="javascript" id="code">
      function hello() {
        console.log("Hello, World!");
      }
    </pre>
    <script>
      document.addEventListener("DOMContentLoaded", () => {
        bestHighlight.highlightElement(document.getElementById("code"));
      });
    </script>
  </body>
</html>

Usage

Basic Usage

import { highlight } from "best-highlight";

const code = `function hello() {
  console.log("Hello, World!");
}`;

const html = highlight(code, "javascript");

DOM Element Highlighting

import { highlightElement } from "best-highlight";

// Highlight a pre element
const element = document.querySelector("pre");
element.setAttribute("data-language", "javascript");
highlightElement(element);

Supported Languages

The library provides robust support for 7 programming languages:

  • JavaScript (keywords, operators, strings, comments)
  • TypeScript (with identifier preservation)
  • Python (keywords, functions, strings, comments)
  • HTML (tags, attributes, strings, comments, doctypes, entities)
  • CSS (selectors, properties, values, punctuation)
  • JSON (strings, numbers, punctuation)
  • Markdown (headings, emphasis)

Themes

Four built-in themes are available:

  • Light (default)
  • Dark
  • Nord
  • GitHub

Each theme is available as a separate CSS file in the themes directory:

/* Choose one of: */
import 'best-highlight/themes/light.css'
import 'best-highlight/themes/dark.css'
import 'best-highlight/themes/nord.css'
import 'best-highlight/themes/github.css'

API Reference

highlight(code: string, language: string): string

Highlights code and returns HTML string with appropriate class names. Each token is wrapped in a span with classes bh-npm-token and bh-npm-{type}.

highlightElement(element: HTMLElement): void

Highlights code within a DOM element. The element should have a data-language attribute specifying the language. Adds the bh-npm-highlight class to the element.

tokenize(code: string, language: string): Token[]

Low-level API that returns an array of tokens for custom processing. Each token has:

  • type: string (e.g., 'keyword', 'string', 'comment')
  • content: string (the actual token content)

Testing

The library includes comprehensive test coverage for all supported languages and features:

  • Language-specific tokenization tests
  • HTML generation and escaping
  • DOM element highlighting
  • Theme application
  • Edge cases (empty content, unknown languages)

Run tests with:

npm test

Contributing

Contributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.

  1. Fork the repository
  2. Create your feature branch (git checkout -b feature/amazing-feature)
  3. Commit your changes (git commit -m 'Add some amazing feature')
  4. Push to the branch (git push origin feature/amazing-feature)
  5. Open a Pull Request

Development

# Install dependencies
npm install

# Run tests
npm test

License

MIT