Tiny & Fast JavaScript Syntax Highlighting Library – Speed Highlight

Speed Highlight JS is a lightweight and fast JavaScript syntax highlighting library that converts code blocks into color-coded HTML using a small core engine and per-language tokenizers.

You can use it to highlight code samples on documentation sites, blog posts, admin dashboards, and pages that display JavaScript, Python, SQL, YAML, or other source code.

The library scans plain text inside a div or code element and assigns a CSS class to each token. A linked stylesheet then controls the final colors.

Features:

• Formats multi-line code blocks and inline code elements.
• 30+ programming and markup languages.
• Loads built-in language definitions on demand.
• Generates highlighted HTML strings for custom renderers.
• Detects selected programming languages from raw source text.
• Supports optional line-number removal.
• Includes browser themes for light and dark interfaces.
• Prints ANSI-colored code in terminal output.
• Accepts custom language definitions.

Speed Highlight JS vs. Prism, highlight.js, and Shiki

Speed Highlight JS targets browser projects that need a small syntax highlighting layer for common languages. It uses shj-lang-* classes, loads language definitions on demand, and also includes a terminal adapter for Node.js and Deno workflows.

Prism, highlight.js, and Shiki solve the same general problem, but they fit different rendering paths and content requirements.

How To Use It:

Installation

Install the package through npm when your project uses a bundler or an ES module workflow.

npm install @speed-highlight/core

Static HTML pages can load a theme stylesheet and the browser module from a CDN.

<link
  rel="stylesheet"
  href="https://unpkg.com/@speed-highlight/[email protected]/dist/themes/default.css"
/>
<script type="module">
  import {
    highlightAll
  } from 'https://unpkg.com/@speed-highlight/[email protected]/dist/index.js';
  await highlightAll();
</script>

Basic Usage

Add a shj-lang-* class to each code sample. Use a div for block code and a code element for inline snippets.

<div class="shj-lang-js">
const formatPrice = (amount) =>
  new Intl.NumberFormat('en-US', {
    style: 'currency',
    currency: 'USD'
  }).format(amount);
</div>

Import a theme and call highlightAll() after the code blocks exist in the document.

import '@speed-highlight/core/themes/github-light.css';
import { highlightAll } from '@speed-highlight/core';
await highlightAll();

More Examples

Highlight Dynamic JSON Responses

Set textContent before highlighting, so the element contains raw source code instead of pre-rendered markup.

<div id="payload-preview"></div>

import { highlightElement } from '@speed-highlight/core';
const payloadPreview = document.querySelector('#payload-preview');
const payload = {
  status: 'ready',
  records: 12,
  endpoint: '/api/projects'
};
payloadPreview.textContent = JSON.stringify(payload, null, 2);
await highlightElement(
  payloadPreview,
  'json',
  'multiline',
  { hideLineNumbers: true }
);

Detect the Language of Pasted Code

<div id="code-preview"></div>

import { highlightElement } from '@speed-highlight/core';
import { detectLanguage } from '@speed-highlight/core/detect';
const sourceCode = `
const createGreeting = (name) => {
  return \`Hello, \${name}\`;
};
`;
const preview = document.querySelector('#code-preview');
const language = detectLanguage(sourceCode);
preview.textContent = sourceCode;
await highlightElement(preview, language, 'multiline');

Generate Highlighted HTML for Templates

highlightText() returns markup that you can place in a template result.

import { highlightText } from '@speed-highlight/core';
const sourceCode = `
type Project = {
  id: number;
  title: string;
};
`;
const highlightedMarkup = await highlightText(
  sourceCode,
  'ts',
  true,
  { hideLineNumbers: true }
);
document.querySelector('#generated-preview').innerHTML = highlightedMarkup;

Print Highlighted Code in Node.js

CLI tools and build scripts can format source code for terminal output. The terminal adapter supports the default and atom-dark themes.

import {
  printHighlight,
  setTheme
} from '@speed-highlight/core/terminal';
await setTheme('atom-dark');
await printHighlight(
  'export const isPublished = true;',
  'js'
);

Available Themes

Import the theme CSS of your choice as follows:

• default
• github-dark
• github-light
• github-dim
• atom-dark
• visual-studio-dark

import '@speed-highlight/core/themes/github-dark.css';

Supported Language Classes

Use the following classes when you set a language manually.

The automatic detector recognizes Bash, HTML, HTTP, JavaScript, TypeScript, Python, SQL, Perl, Lua, Makefile, URI, CSS, Diff, Markdown, Dockerfile, XML, C, Rust, Go, Java, Assembly, JSON, and YAML.

Configuration Options

• hideLineNumbers (boolean): Removes the line-number column from multi-line highlighted output. The default value is false.

import { highlightAll } from '@speed-highlight/core';
await highlightAll({
  hideLineNumbers: true
});

Browser API Methods

import {
  tokenize,
  highlightText,
  highlightElement,
  highlightAll,
  loadLanguage
} from '@speed-highlight/core';
// Process each detected source segment with a callback.
await tokenize(
  'const visible = true;',
  'js',
  (segment, tokenType) => {
    console.log(tokenType, segment);
  }
);
// Return highlighted HTML as a string.
const markup = await highlightText(
  'body { margin: 0; }',
  'css',
  true,
  {
    hideLineNumbers: true
  }
);
// Highlight one DOM element.
await highlightElement(
  document.querySelector('#sql-preview'),
  'sql',
  'multiline'
);
// Highlight every element with a shj-lang-* class.
await highlightAll({
  hideLineNumbers: false
});
// Register a custom language definition.
const paletteGrammar = {
  default: [
    {
      type: 'kwd',
      match: /\b(primary|secondary|surface)\b/g
    },
    {
      type: 'num',
      match: /#[0-9a-f]{6}\b/gi
    }
  ]
};
loadLanguage('palette', paletteGrammar);

highlightText() returns a highlighted HTML string. highlightElement() replaces an element’s existing text with highlighted markup. highlightAll() searches the page for classes that include the shj-lang- prefix.

Terminal API Methods

import {
  highlightText as highlightTerminalText,
  printHighlight,
  setTheme
} from '@speed-highlight/core/terminal';
// Select the terminal color theme.
await setTheme('atom-dark');
// Return ANSI-colored source code as a string.
const terminalMarkup = await highlightTerminalText(
  'console.log("Build finished");',
  'js'
);
// Print highlighted source code to stdout.
await printHighlight(
  'console.log("Build finished");',
  'js'
);

Alternatives:

• Add Beautiful Code Highlighting with Syntax.js
• Syntax Highlighter For JSX – Sugar High
• Elegant Syntax Highlighter In JavaScript – EnlighterJS
• Modern Syntax Highlighter with CSS Custom Highlight API
• Easy Syntax Highlighting Library – CSPSH.js
• Add Beautiful Code Highlighting with Syntax.js