lowlight

Virtual syntax highlighting for virtual DOMs and non-HTML things, with language auto-detection. Perfect for React, VDOM, and others.

Lowlight is built to work with all syntaxes supported by highlight.js, that’s 174 languages (and all 73 themes).

Table of Contents

• Installation
• Usage
• API
  • low.highlight(language, value[, options])
  • low.highlightAuto(value[, options])
  • low.registerLanguage(name, syntax)
• Browser
• Projects
• License

Installation

npm:

npm install lowlight

Usage in the browser »

Usage

Highlight:

var low = require('lowlight');
var ast = low.highlight('js', '"use strict";').value;

Yields:

[ { type: 'element',
    tagName: 'span',
    properties: { className: [ 'hljs-meta' ] },
    children: [ { type: 'text', value: '"use strict"' } ] },
  { type: 'text', value: ';' } ]

Or, stringified with rehype:

var rehype = require('rehype');
var html = rehype().stringify({type: 'root', children: ast}).toString();

Yields:

<span class="hljs-meta">"use strict"</span>;

Tip: Use hast-to-hyperscript to transform to other virtual DOMs, or DIY.

API

low.highlight(language, value[, options])

Parse value according to the language grammar.

Parameters

• name (string) — See list of names and aliases;
• value (string) — Source to highlight;
• options (Object?, optional):
  • prefix (string?, default: 'hljs-') — Class prefix.

Returns

Object:

• relevance (number) — Integer representing how sure low is the given code is in the given language;
• language (string) — The given language;
• value (Array.<Node>) — Hast nodes representing the highlighted given code.

low.highlightAuto(value[, options])

Parse value by guessing its grammar.

Parameters

• value (string) — Source to highlight;
• options (Object?, optional):
  • prefix (string?, default: 'hljs-') — Class prefix;
  • subset (Array.<string>?, optional, defaults to all registered languages.) — List of allowed languages.

Returns

Object:

• relevance (number) — Integer representing how sure low is the given code is in the detected language;
• language (string) — The given language;
• value (Array.<Node>) — Hast nodes representing the highlighted given code.
• secondBest (Object?) — Object with the same structure as the top returned object, but containing information for the second-best result. Can be null.

low.registerLanguage(name, syntax)

Register a syntax. Useful in the browser or with custom grammars.

Parameters

• name (string) — Name of language;
• syntax (Function) — Syntax highlighter, see highlight.jss docs for more information.

Browser

I do not suggest using the pre-built files or requiring lowlight in the browser as that would include a 530kb (170kb GZipped) file.

Instead, require lowlight/lib/core, and include only the used highlighters. For example:

var low = require('lowlight/lib/core');
var js = require('highlight.js/lib/languages/javascript');

low.registerLanguage('javascript', js);

low.highlight('js', '"use strict";');
// See `Usage` for the results.

...When using browserify, minifying this results in just 17kb of code (7kb with GZip).

Projects

• emphasize — Syntax highlighting in ANSI, for the terminal;
• react-lowlight — Syntax highlighter for React;
• react-syntax-highlighter — React component for syntax highlighting.
• rehype-highlight — Syntax highlighting in rehype;
• remark-highlight.js — Syntax highlighting in remark;

License

MIT © Titus Wormer