als-highlight

A lightweight, dependency-free syntax highlighter for HTML, CSS, and JavaScript that returns pure HTML.
No runtime CSS required (all colors are inline styles), and it ships with a curated set of editor-inspired themes.

• No dependencies
• Browser & Node friendly
• Inline coloring (no extra stylesheets)
• Optional toolbar with Copy / Wrap and line numbers
• Themes inspired by Monokai, Dracula, One Dark, GitHub, etc.

Installation

npm i als-highlight

or via script tag (IIFE bundle):

<script src="https://unpkg.com/[email protected]/index.js"></script>
or
<script src="https://unpkg.com/[email protected]/index.min.js"></script>
<script>
  const h = new Highlighter('Monokai');
  const html = h.renderBlock('js', 'const x=1');
  document.body.insertAdjacentHTML('beforeend', html);
</script>

Package provides three entry points:

• ESM: index.mjs
• CJS: index.cjs
• IIFE (browser): index.js (global window.Highlighter)

Quick Start

import Highlighter from 'als-highlight';

const h = new Highlighter('Monokai');    // or pass a custom colors object

// Raw highlighting (returns <pre><code>...</code></pre>)
const jsHtml   = Highlighter.highlightJs('const x = 42;', Highlighter.codeThemes.Monokai);
const cssHtml  = Highlighter.highlightCss('.box{color:#0af}', Highlighter.codeThemes.Monokai);
const htmlHtml = Highlighter.highlightHtml('<div id="x">Hi</div>', Highlighter.codeThemes.Monokai);

// Ready-to-use block with toolbar & line numbers
const block = h.renderBlock('js', `function sum(a,b){ return a+b }`, {
  wrapButton: true,
  copyButton: true,
  lineNumbers: true,
  maxWidth: '90vw',
  maxHeight: '50vh',
  padding: '.5rem',
});
document.body.insertAdjacentHTML('beforeend', block);

API

Static Themes

Highlighter.codeThemes  // object with many built-in themes
Highlighter.colors      // default theme (Monokai)

Available built-in themes include: Monokai, Dracula, One Dark, One Light, Solarized Dark/Light, Nord, Gruvbox Dark/Light, Material Palenight, Night Owl, Ayu Dark/Mirage, GitHub Dark/Light, Tokyo Night, Rosé Pine Moon, Cobalt2, VS Dark+, Oceanic Next.

Each theme is a color palette:

{
  bgc, c,        // background, default foreground
  definer,       // declarations: function/class/const/let/var/...
  reserved,      // keywords/operators/punct
  literal,       // numbers/booleans/null/etc
  string,        // strings/template strings
  comment,       // comments
  method,        // function/selector/method names
  params         // params/self/this
}

Static Highlight Functions

Highlighter.highlightJs(source, colors)    // => <pre><code>...</code></pre>
Highlighter.highlightCss(source, colors)   // => <pre><code>...</code></pre>
Highlighter.highlightHtml(source, colors)  // => <pre><code>...</code></pre>

colors is either one of the built-in palettes (Highlighter.codeThemes.Monokai) or a custom object with the same keys.

Constructor

const h = new Highlighter(colorsOrThemeName = Highlighter.colors);

• colorsOrThemeName can be a string (theme name) or a colors object.

renderBlock(lang, code, opts)

Returns a ready-to-insert block with an optional toolbar and line numbers.

• lang: 'js' | 'css' | 'html'
• code: string
• opts (all optional):
  • wrapButton (default true)
  • copyButton (default true)
  • lineNumbers (default true)
  • maxWidth (default '90vw')
  • maxHeight (default '50vh')
  • padding (default '.5rem')

Example:

const block = h.renderBlock('css', '.box{color:#0af}', { lineNumbers: false });

Notes & Limitations

• JavaScript regex detection uses a safe heuristic to avoid false positives.
• HTML parser is lightweight and supports:
  • tags, comments, CDATA, void elements
  • <script> & <style> bodies are re-highlighted with JS/CSS highlighters
  • basic attributes parsing (quoted/unquoted, boolean)
• All colors are inline; you don’t need external CSS.
• If you provide a custom colors object, ensure it has all keys (bgc, c, definer, reserved, literal, string, comment, method, params).

License

MIT