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 185 languages (and all 89 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.registerAlias(name[, alias])
Register a new alias
for the name
language.
Signatures
registerAlias(name, alias|list)
registerAlias(aliases)
Parameters
name
(string
) — Name of a registered languagealias
(string
) — New alias for the registered languagelist
(Array.<alias>
) — List of aliasesaliases
(Object.<alias|list>
) — Map where each key is a name
and each
value an alias
or a list
Example
var low = require('lowlight/lib/core');
var md = require('highlight.js/lib/languages/markdown');
low.registerLanguage('markdown', md);
low.registerAlias({markdown: ['mdown', 'mkdn', 'mdwn', 'ron']})
low.highlight('mdown', '<em>Emphasis</em>')
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 prefixsubset
(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 languagelanguage
(string
) — The detected language
value
(Array.<Node>
) — Virtual nodes representing the
highlighted given codesecondBest
(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 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";');
...When using browserify and minifying with tinyify this results in
just 18kb of code (7kb with GZip).
Related
Projects
License
MIT © Titus Wormer