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 191 languages (and all 94 themes).
Want to use Prism instead?
Try refractor
!
npm:
npm install lowlight
Highlight:
var low = require('lowlight')
var tree = low.highlight('js', '"use strict";').value
console.log(tree)
Yields:
[
{
type: 'element',
tagName: 'span',
properties: {className: ['hljs-meta']},
children: [{type: 'text', value: '"use strict"'}]
},
{type: 'text', value: ';'}
]
Or, serialized with rehype-stringify:
var unified = require('unified')
var rehypeStringify = require('rehype-stringify')
var processor = unified().use(rehypeStringify)
var html = processor.stringify({type: 'root', children: tree}).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.
Parse value
(string
) according to the language
grammar.
prefix
(string?
, default:'hljs-'
) — Class prefix
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 prefixsubset
(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
) — How sure low is that the given code is in the found languagelanguage
(string
) — The detectedlanguage
value
(Array.<Node>
) — Virtual nodes representing the highlighted given codesecondBest
(Result?
) — Result of the second-best (based onrelevance
) match. Only set byhighlightAuto
, but can still benull
.
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 languagealias
(string
) — New alias for the registered languagelist
(Array.<alias>
) — List of aliasesaliases
(Object.<alias|list>
) — Map where each key is aname
and each value analias
or alist
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!
List all registered languages.
Array.<string>
.
var low = require('lowlight/lib/core')
var md = require('highlight.js/lib/languages/markdown')
console.log(low.listLanguages()) // => []
low.registerLanguage('markdown', md)
console.log(low.listLanguages()) // => ['markdown']
It is not suggested to use the pre-built files or requiring lowlight
in the
browser as that would include 916kB (260kB GZipped) of code.
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 24kB of code (9kB with GZip).
emphasize
— Syntax highlighting in ANSI, for the terminalreact-lowlight
— Syntax highlighter for Reactreact-syntax-highlighter
— React component for syntax highlightingrehype-highlight
— Syntax highlighting in rehyperemark-highlight.js
— Syntax highlighting in remarkjstransformer-lowlight
— Syntax highlighting for JSTransformers and Pug