JarCastinglowlight
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!
Contents
Install
npm:
npm install lowlight
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-hyperscriptto 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
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 detectedlanguagevalue(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.
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 anameand each value analiasor alist
Example
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!
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()) // => ['markdown']
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";')
// See `Usage` for the results.
…when using browserify and minifying with tinyify this results in 24kB of code (9kB with GZip).
Related
Projects
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