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
• Use
• API

  • low.highlight(language, value[, options])

  • low.highlightAuto(value[, options])

  • Result

  • low.registerLanguage(name, syntax)

  • low.registerAlias(name[, alias])

  • low.listLanguages()

• Browser
• Related
• Projects
• License

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

language

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

options

• prefix

  (

  string?

  , default:

  'hljs-'

  ) — Class prefix

• subset

  (

  Array.?

  default: all registered languages) — List of allowed languages

Returns

Result

secondBest

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

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

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

name

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

Instead, require

lowlight/lib/core

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

• refractor

  — Same, but based on Prism

Projects

• 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

License

MIT © Titus Wormer