lowlight

by wooorm

wooorm / lowlight

Virtual syntax highlighting for virtual DOMs and non-HTML things

259 Stars 22 Forks Last release: about 1 month ago (1.15.0) MIT License 120 Commits 20 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

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 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:

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