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 185 languages (and all 89 themes).

Want to use Prism instead? Try refractor!

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

npm:

npm install lowlight

Usage in the browser »

Highlight:

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

console.log(ast);

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();

console.log(html);

Yields:

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

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

Register a syntax as name (string). Useful in the browser or with custom grammars.

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

low.registerLanguage('xml', xml);

console.log(low.highlight('html', '<em>Emphasis</em>'));

Yields:

{ relevance: 2, language: 'html', value: [Array] }

Register a new alias for the name language.

• registerAlias(name, alias|list)
• registerAlias(aliases)

• name (string) — Name of a registered language
• alias (string) — New alias for the registered language
• list (Array.<alias>) — List of aliases
• aliases (Object.<alias|list>) — Map where each key is a name and each value an alias or a list

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

low.registerLanguage('markdown', md);
// low.highlight('mdown', '<em>Emphasis</em>')
// ^ would throw: Error: Unknown language: `mdown` is not registered

low.registerAlias({markdown: ['mdown', 'mkdn', 'mdwn', 'ron']})
low.highlight('mdown', '<em>Emphasis</em>')
// ^ Works!

Parse value (string) according to the language grammar.

• prefix (string?, default: 'hljs-') — Class prefix

Result.

var low = require('lowlight');

console.log(low.highlight('css', 'em { color: red }'));

Yields:

{ relevance: 4, language: 'css', value: [Array] }

Parse value by guessing its grammar.

• prefix (string?, default: 'hljs-') — Class prefix
• subset (Array.<string>? default: all registered languages) — List of allowed languages

Result, with a secondBest if found.

var low = require('lowlight');

console.log(low.highlightAuto('"hello, " + name + "!"'));

Yields:

{ relevance: 3,
  language: 'applescript',
  value: [Array],
  secondBest: { relevance: 3, language: 'basic', value: [Array] } }

Result is a highlighting result object.

• relevance (number) — Integer representing how sure low is the given code is in the given language
• language (string) — The detected language
• value (Array.<Node>) — Virtual nodes representing the highlighted given code
• secondBest (Result?) — Result of the second-best (based on relevance) match. Only set by highlightAuto, but can still be null.

I do not suggest using the pre-built files or requiring lowlight in the browser as that would include a 684kb (196kb 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 and minifying with tinyify this results in just 18kb of code (7kb with GZip).

• refractor — Same, but based on Prism

• 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

MIT © Titus Wormer