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 189 languages (and all 94 themes).
Want to use Prism instead?
Try refractor
!
Contents
Install
npm:
npm install lowlight
Usage in the browser »
Use
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.
API
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
)
— How sure low is that the given code is in the found 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
.
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.listLanguages()
List all registered languages.
Returns
Array.<string>
.
Example
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())
Browser
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";')
…when using browserify and minifying with tinyify this results in 24kB
of code (9kB with GZip).
Related
Projects
License
MIT © Titus Wormer