JavaScript
Clone or download
Latest commit 5183fca Apr 29, 2018
Permalink
Failed to load latest commit information.
lib Rewrite core a bit Apr 29, 2018
script Refactor code-style Apr 18, 2018
test Refactor code-style Apr 18, 2018
.editorconfig Refactor code-style to `xo` Aug 29, 2016
.gitignore Add `yarn.lock` to `.gitignore` Apr 14, 2018
.npmrc Add `.npmrc` Apr 14, 2018
.prettierignore Refactor code-style Apr 18, 2018
.travis.yml Update Node in Travis Apr 14, 2018
LICENSE Initial commit Jan 26, 2016
index.js Refactor code-style Apr 18, 2018
package.json 1.9.2 Apr 29, 2018
readme.md Update links Dec 8, 2017

readme.md

lowlight Build Status Coverage Status

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 176 languages (and all 73 themes).

Want to use Prism instead? Try refractor!

Table of Contents

Installation

npm:

npm install lowlight

Usage in the browser »

Usage

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.

API

low.registerLanguage(name, syntax)

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

Example
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] }

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

Parse value (string) according to the language grammar.

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

Result.

Example
var low = require('lowlight');

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

Yields:

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

low.highlightAuto(value[, options])

Parse value by guessing its grammar.

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

Result, with a secondBest if found.

Example
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

Result is a highlighting result object.

Properties
  • 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.

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).

Related

Projects

License

MIT © Titus Wormer