low

lowlight

Virtual syntax highlighting for virtual DOMs and non-HTML things

Showing:

Popularity

Downloads/wk

3.5M

GitHub Stars

375

Maintenance

Last Commit

8d ago

Contributors

10

Package

Dependencies

3

License

MIT

Type Definitions

Built-In

Tree-Shakeable

No?

Reviews

Average Rating

5.0/51
Read All Reviews
bvego

Top Feedback

1Great Documentation
1Easy to Use

Readme

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

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

Want to use Prism instead? Try refractor!

Contents

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'

const 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'

const 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'

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

const processor = unified().use(rehypeStringify)
const 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)

Register a syntax as language (string). Useful in the browser or with custom grammars.

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)

Register a new alias for language.

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.registered(aliasOrlanguage)

Is an alias or language registered.

Parameters
  • aliasOrlanguage (string) — Name of a registered language or its alias
Returns

boolean.

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

lowlight.registerLanguage('javascript', javascript)

lowlight.registered('js') // return false

lowlight.registerAlias('javascript', 'js')
lowlight.registered('js') // return true

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!

  • 1c — 1C:Enterprise
  • abnf — Augmented Backus-Naur Form
  • accesslog — Apache Access Log
  • actionscript (as) — ActionScript
  • ada — Ada
  • angelscript (asc) — AngelScript
  • apache (apacheconf) — Apache config
  • applescript (osascript) — AppleScript
  • arcade — ArcGIS Arcade
  • arduino (ino) — Arduino
  • armasm (arm) — ARM Assembly
  • asciidoc (adoc) — AsciiDoc
  • aspectj — AspectJ
  • autohotkey (ahk) — AutoHotkey
  • autoit — AutoIt
  • avrasm — AVR Assembly
  • awk — Awk
  • axapta (x++) — X++
  • bash (sh) — Bash
  • basic — BASIC
  • bnf — Backus–Naur Form
  • brainfuck (bf) — Brainfuck
  • c (h) — C
  • cal — C/AL
  • capnproto (capnp) — Cap’n Proto
  • ceylon — Ceylon
  • clean (icl, dcl) — Clean
  • clojure (clj, edn) — Clojure
  • clojure-repl — Clojure REPL
  • cmake (cmake.in) — CMake
  • coffeescript (coffee, cson, iced) — CoffeeScript
  • coq — Coq
  • cos (cls) — Caché Object Script
  • cpp (cc, c++, h++, hpp, hh, hxx, cxx) — C++
  • crmsh (crm, pcmk) — crmsh
  • crystal (cr) — Crystal
  • csharp (cs, c#) — C#
  • csp — CSP
  • css — CSS
  • d — D
  • dart — Dart
  • delphi (dpr, dfm, pas, pascal) — Delphi
  • diff (patch) — Diff
  • django (jinja) — Django
  • dns (bind, zone) — DNS Zone
  • dockerfile (docker) — Dockerfile
  • dos (bat, cmd) — Batch file (DOS)
  • dsconfig — undefined
  • dts — Device Tree
  • dust (dst) — Dust
  • ebnf — Extended Backus-Naur Form
  • elixir (ex, exs) — Elixir
  • elm — Elm
  • erb — ERB
  • erlang (erl) — Erlang
  • erlang-repl — Erlang REPL
  • excel (xlsx, xls) — Excel formulae
  • fix — FIX
  • flix — Flix
  • fortran (f90, f95) — Fortran
  • fsharp (fs) — F#
  • gams (gms) — GAMS
  • gauss (gss) — GAUSS
  • gcode (nc) — G-code (ISO 6983)
  • gherkin (feature) — Gherkin
  • glsl — GLSL
  • gml — GML
  • go (golang) — Go
  • golo — Golo
  • gradle — Gradle
  • groovy — Groovy
  • haml — HAML
  • handlebars (hbs, html.hbs, html.handlebars, htmlbars) — Handlebars
  • haskell (hs) — Haskell
  • haxe (hx) — Haxe
  • hsp — HSP
  • http (https) — HTTP
  • hy (hylang) — Hy
  • inform7 (i7) — Inform 7
  • ini (toml) — TOML, also INI
  • irpf90 — IRPF90
  • isbl — ISBL
  • java (jsp) — Java
  • javascript (js, jsx, mjs, cjs) — Javascript
  • jboss-cli (wildfly-cli) — JBoss CLI
  • json — JSON
  • julia — Julia
  • julia-repl — Julia REPL
  • kotlin (kt, kts) — Kotlin
  • lasso (ls, lassoscript) — Lasso
  • latex (tex) — LaTeX
  • ldif — LDIF
  • leaf — Leaf
  • less — Less
  • lisp — Lisp
  • livecodeserver — LiveCode
  • livescript (ls) — LiveScript
  • llvm — LLVM IR
  • lsl — LSL (Linden Scripting Language)
  • lua — Lua
  • makefile (mk, mak, make) — Makefile
  • markdown (md, mkdown, mkd) — Markdown
  • mathematica (mma, wl) — Mathematica
  • matlab — Matlab
  • maxima — Maxima
  • mel — MEL
  • mercury (m, moo) — Mercury
  • mipsasm (mips) — MIPS Assembly
  • mizar — Mizar
  • mojolicious — Mojolicious
  • monkey — Monkey
  • moonscript (moon) — MoonScript
  • n1ql — N1QL
  • nestedtext (nt) — Nested Text
  • nginx (nginxconf) — Nginx config
  • nim — Nim
  • nix (nixos) — Nix
  • node-repl — Node REPL
  • nsis — NSIS
  • objectivec (mm, objc, obj-c, obj-c++, objective-c++) — Objective-C
  • ocaml (ml) — OCaml
  • openscad (scad) — OpenSCAD
  • oxygene — Oxygene
  • parser3 — Parser3
  • perl (pl, pm) — Perl
  • pf (pf.conf) — Packet Filter config
  • pgsql (postgres, postgresql) — PostgreSQL
  • php — undefined
  • php-template — PHP template
  • plaintext (text, txt) — Plain text
  • pony — Pony
  • powershell (pwsh, ps, ps1) — PowerShell
  • processing (pde) — Processing
  • profile — Python profiler
  • prolog — Prolog
  • properties — .properties
  • protobuf — Protocol Buffers
  • puppet (pp) — Puppet
  • purebasic (pb, pbi) — PureBASIC
  • python (py, gyp, ipython) — Python
  • python-repl (pycon) — undefined
  • q (k, kdb) — Q
  • qml (qt) — QML
  • r — R
  • reasonml (re) — ReasonML
  • rib — RenderMan RIB
  • roboconf (graph, instances) — Roboconf
  • routeros (mikrotik) — Microtik RouterOS script
  • rsl — RenderMan RSL
  • ruby (rb, gemspec, podspec, thor, irb) — Ruby
  • ruleslanguage — Oracle Rules Language
  • rust (rs) — Rust
  • sas — SAS
  • scala — Scala
  • scheme — Scheme
  • scilab (sci) — Scilab
  • scss — SCSS
  • shell (console, shellsession) — Shell Session
  • smali — Smali
  • smalltalk (st) — Smalltalk
  • sml (ml) — SML (Standard ML)
  • sqf — SQF
  • sql — SQL
  • stan (stanfuncs) — Stan
  • stata (do, ado) — Stata
  • step21 (p21, step, stp) — STEP Part 21
  • stylus (styl) — Stylus
  • subunit — SubUnit
  • swift — Swift
  • taggerscript — Tagger Script
  • tap — Test Anything Protocol
  • tcl (tk) — Tcl
  • thrift — Thrift
  • tp — TP
  • twig (craftcms) — Twig
  • typescript (ts, tsx) — TypeScript
  • vala — Vala
  • vbnet (vb) — Visual Basic .NET
  • vbscript (vbs) — VBScript
  • vbscript-html — VBScript in HTML
  • verilog (v, sv, svh) — Verilog
  • vhdl — VHDL
  • vim — Vim Script
  • wasm — WebAssembly
  • wren — Wren
  • x86asm — Intel x86 Assembly
  • xl (tao) — XL
  • xml (html, xhtml, rss, atom, xjb, xsd, xsl, plist, wsf, svg) — HTML, XML
  • xquery (xpath, xq) — XQuery
  • yaml (yml) — YAML
  • zephir (zep) — Zephir

Projects

License

MIT © Titus Wormer

Rate & Review

Great Documentation1
Easy to Use1
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
Bruno VegoSplit, Croatia141 Ratings129 Reviews
Developer at Toptal & SeekandHit
9 months ago
Great Documentation
Easy to Use

Awesome project. Love the syntax highlighting - and pretty much everything works out of the box. I use it in some documentation part of apps where we need to render some code snippets. Works flawlessly.


0

Tutorials

No tutorials found
Add a tutorial