Need help with lowlight?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

wooorm
312 Stars 24 Forks MIT License 139 Commits 0 Opened issues

Description

Virtual syntax highlighting for virtual DOMs and non-HTML things

Services available

!
?

Need anything else?

Contributors list

# 5,912
React
Markdow...
ecmascr...
travis-...
126 commits
# 34,381
JavaScr...
TypeScr...
lodash
html-we...
2 commits
# 532,883
JavaScr...
Node.js
Shell
HTML
1 commit
# 88,513
arcgis
R
Groovy
data-ma...
1 commit
# 108,257
dataloa...
GraphQL
Vue.js
Angular
1 commit
# 2,320
React
TypeScr...
vercel
json-vi...
1 commit
# 582,648
React
JavaScr...
HTML
virtual...
1 commit
# 711
React
CSS
TypeScr...
postcss...
1 commit

lowlight

Build Coverage Downloads Size

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

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:

"use strict";

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 prefix
  • subset
    (
    Array.?
    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 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.
Example
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

alias
for the
name
language.
Signatures
  • registerAlias(name, alias|list)
  • registerAlias(aliases)
Parameters
  • 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
    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.highlight('mdown', 'Emphasis') // ^ would throw: Error: Unknown language: mdown is not registered

low.registerAlias({markdown: ['mdown', 'mkdn', 'mdwn', 'ron']}) low.highlight('mdown', 'Emphasis') // ^ Works!

low.listLanguages()

List all registered languages.

Returns

Array.
.
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

License

MIT © Titus Wormer

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.