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. There are three builds of lowlight:

lib/core.js — 0 languages
lib/common.js (default) — 35 languages
lib/all.js — 190 languages

Want to use Prism instead? Try refractor!

Install
Use
API
Syntaxes
Related
Projects
License

Install

This package is ESM only: Node 12+ is needed to use it and it must be imported instead of required.

npm:

npm install lowlight

Use

Highlight:

import {lowlight} from 'lowlight'

var tree = lowlight.highlight('js', '"use strict";')

console.dir(tree, {depth: null})

Yields:

{
  type: 'root',
  data: {language: 'js', relevance: 10},
  children: [
    {
      type: 'element',
      tagName: 'span',
      properties: {className: ['hljs-meta']},
      children: [{type: 'text', value: '"use strict"'}]
    },
    {type: 'text', value: ';'}
  ]
}

hast trees can be serialized with hast-util-to-html:

import {lowlight} from 'lowlight'
import toHtml from 'hast-util-to-html'

var tree = lowlight.highlight('js', '"use strict";')

console.log(toHtml(tree))

Yields:

<span class="hljs-meta">"use strict"</span>;

hast trees can be turned into other things, like virtual DOMs, with hast-to-hyperscript.

hast trees are also used throughout the rehype (unified) ecosystem:

import unified from 'unified'
import rehypeStringify from 'rehype-stringify'
import {lowlight} from 'lowlight'

var tree = lowlight.highlight('js', '"use strict";')

var processor = unified().use(rehypeStringify)
var html = processor.stringify(tree).toString()

console.log(html)

Yields:

<span class="hljs-meta">"use strict"</span>;

API

This package exports the following identifiers: lowlight. There is no default export.

`lowlight.highlight(language, value[, options])`

Parse value (string) according to the language grammar.

`options`

prefix (string?, default: 'hljs-') — Class prefix

Returns

A hast Root with two data fields:

relevance (number) — How sure low is that the given code is in the language
language (string) — The detected language name

Example

import {lowlight} from 'lowlight'

console.log(lowlight.highlight('css', 'em { color: red }'))

Yields:

{type: 'root', data: {language: 'css', relevance: 3}, children: [Array]}

`lowlight.highlightAuto(value[, options])`

Parse value by guessing its grammar.

`options`

The options of lowlight.highlight are supported, plus:

subset (Array.<string>? default: all registered languages) — List of allowed languages

Returns

The same result as lowlight.highlight is returned.

Example

import {lowlight} from 'lowlight'

console.log(lowlight.highlightAuto('"hello, " + name + "!"'))

Yields:

{type: 'root', data: {language: 'applescript', relevance: 3}, children: [Array]}

`lowlight.registerLanguage(language, syntax)`

Example

import {lowlight} from 'lowlight/lib/core.js'
import xml from 'highlight.js/lib/languages/xml.js'

lowlight.registerLanguage('xml', xml)

console.log(lowlight.highlight('html', '<em>Emphasis</em>'))

Yields:

{type: 'root', data: {language: 'html', relevance: 2}, children: [Array]}

`lowlight.registerAlias(language, alias)`

Signatures

registerAlias(language, alias|list)
registerAlias(aliases)

Parameters

language (string) — Name of a registered language
alias (string) — New alias for the registered language
list (Array.<alias>) — List of aliases
aliases (Object.<language, alias|list>) — Map where each key is a language and each value an alias or a list

Example

import {lowlight} from 'lowlight/lib/core.js'
import md from 'highlight.js/lib/languages/markdown.js'

lowlight.registerLanguage('markdown', md)

// lowlight.highlight('mdown', '<em>Emphasis</em>')
// ^ would throw: Error: Unknown language: `mdown` is not registered

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

`lowlight.listLanguages()`

List all registered languages.

Returns

Array.<string>.

Example

import {lowlight} from 'lowlight/lib/core.js'
import md from 'highlight.js/lib/languages/markdown.js'

console.log(lowlight.listLanguages()) // => []

lowlight.registerLanguage('markdown', md)

console.log(lowlight.listLanguages()) // => ['markdown']

Syntaxes

If you’re using lowlight/lib/core.js, no syntaxes are included. Checked syntaxes are included if you import lowlight (or lowlight/lib/common.js). Unchecked syntaxes are available through lowlight/lib/all.js

Note that highlight.js works as a singleton. That means that if you register a syntax anywhere in your project, it’ll become available everywhere!

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

nullvoxpopuli / lowlight Goto Github PK

lowlight's Introduction

lowlight

Contents

Install

Use

API

lowlight.highlight(language, value[, options])

options

Returns

Example

lowlight.highlightAuto(value[, options])

options

Returns

Example

lowlight.registerLanguage(language, syntax)

Example

lowlight.registerAlias(language, alias)

Signatures

Parameters

Example

lowlight.listLanguages()

Returns

Example

Syntaxes

Related

Projects

License

lowlight's People

Contributors

Watchers

Recommend Projects

Recommend Topics

Recommend Org

`lowlight.highlight(language, value[, options])`

`options`

`lowlight.highlightAuto(value[, options])`

`options`

`lowlight.registerLanguage(language, syntax)`

`lowlight.registerAlias(language, alias)`

`lowlight.listLanguages()`