Virtual syntax highlighting for virtual DOMs and non-HTML things
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";').valueconsole.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:
"use strict";
hast-to-hyperscriptto transform to other virtual DOMs, or DIY.
low.highlight(language, value[, options])
Parse
value(
string) according to the
languagegrammar.
options
prefix(
string?, default:
'hljs-') — Class prefix
Result.
var low = require('lowlight')console.log(low.highlight('css', 'em { color: red }'))
Yields:
{relevance: 4, language: 'css', value: [Array]}
low.highlightAuto(value[, options])
Parse
valueby guessing its grammar.
options
prefix(
string?, default:
'hljs-') — Class prefix
subset(
Array.?default: all registered languages) — List of allowed languages
Result, with a
secondBestif 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
Resultis a highlighting result object.
relevance(
number) — How sure low is that the given code is in the found language
language(
string) — The detected
language
value(
Array.) — 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.
low.registerLanguage(name, syntax)
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', 'Emphasis'))
Yields:
{relevance: 2, language: 'html', value: [Array]}
low.registerAlias(name[, alias])
Register a new
aliasfor the
namelanguage.
registerAlias(name, alias|list)
registerAlias(aliases)
name(
string) — Name of a registered language
alias(
string) — New alias for the registered language
list(
Array.) — List of aliases
aliases(
Object.) — Map where each key is a
nameand each value an
aliasor a
list
var low = require('lowlight/lib/core') var md = require('highlight.js/lib/languages/markdown')low.registerLanguage('markdown', md)
// low.highlight('mdown', 'Emphasis') // ^ would throw: Error: Unknown language:
mdown
is not registeredlow.registerAlias({markdown: ['mdown', 'mkdn', 'mdwn', 'ron']}) low.highlight('mdown', 'Emphasis') // ^ Works!
low.listLanguages()
List all registered languages.
Array..
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
lowlightin 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 terminal
react-lowlight— Syntax highlighter for React
react-syntax-highlighter— React component for syntax highlighting
rehype-highlight— Syntax highlighting in rehype
remark-highlight.js— Syntax highlighting in remark
jstransformer-lowlight— Syntax highlighting for JSTransformers and Pug