wooorm/ lowlight

(2.4.0) about 1 month ago

JavaScript

HTML

virtual-dom

React

vdom

View on GitHub

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

379 Stars

27 Forks

MIT License

175 Commits

0 Opened issues

Description

Virtual syntax highlighting for virtual DOMs and non-HTML things

Services available

Need anything else?

Contributors list

Titus wooorm

# 4,180

React

Markdow...

ecmascr...

travis-...

163 commits

Avi Vahl AviVahl

# 37,522

TypeScr...

lodash

html-we...

PHP

2 commits

B. Mearns mearns

# 523,515

JavaScr...

Node.js

Shell

HTML

1 commit

John Foster jf990

# 91,846

arcgis

CSS

GitHub

1 commit

Ezra Lalonde ezralalonde

# 110,761

batch

dataloa...

GraphQL

Vue.js

1 commit

Shu Uesugi chibicode

# 2,436

React

TypeScr...

vercel

json-vi...

1 commit

Alexander Wang alixander

# 586,999

React

JavaScr...

HTML

virtual...

1 commit

Andrey Sitnik ai

# 768

React

CSS

TypeScr...

postcss...

1 commit

MO fengzilong

# 69,658

React

Markdow...

Vue.js

moon

1 commit

Readme

lowlight

Name: lowlight
Brand: lowlight
SKU: //wooorm/lowlight
Rating: 2.6975 (379 reviews)

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

API

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

lowlight.highlightAuto(value[, options])

lowlight.registerLanguage(language, syntax)

Install

This package is ESM only: Node 12+ is needed to use it and it must be

import

ed instead of

require

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:

"use strict";

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:

"use strict";

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.?
```
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)

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', 'Emphasis'))

Yields:

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

lowlight.registerAlias(language, alias)

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.
```
) — List of aliases
```
aliases
```
(
```
Object.
```
) — 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', 'Emphasis')
// ^ would throw: Error: Unknown language: mdown is not registered
lowlight.registerAlias({markdown: ['mdown', 'mkdn', 'mdwn', 'ron']})
lowlight.highlight('mdown', 'Emphasis')
// ^ Works!

lowlight.registered(aliasOrlanguage)

Is an

alias

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.

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
[x]
```
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++
[x]
```
bash
```
(
```
sh
```
) — Bash
[ ]
```
basic
```
— BASIC
[ ]
```
bnf
```
— Backus–Naur Form
[ ]
```
brainfuck
```
(
```
bf
```
) — Brainfuck
[x]
```
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
[x]
```
cpp
```
(
```
cc
```
,
```
c++
```
,
```
h++
```
,
```
hpp
```
,
```
hh
```
,
```
hxx
```
,
```
cxx
```
) — C++
[ ]
```
crmsh
```
(
```
crm
```
,
```
pcmk
```
) — crmsh
[ ]
```
crystal
```
(
```
cr
```
) — Crystal
[x]
```
csharp
```
(
```
cs
```
,
```
c#
```
) — C#
[ ]
```
csp
```
— CSP
[x]
```
css
```
— CSS
[ ]
```
d
```
— D
[ ]
```
dart
```
— Dart
[ ]
```
delphi
```
(
```
dpr
```
,
```
dfm
```
,
```
pas
```
,
```
pascal
```
) — Delphi
[x]
```
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#
```
) — F#
[ ]
```
gams
```
(
```
gms
```
) — GAMS
[ ]
```
gauss
```
(
```
gss
```
) — GAUSS
[ ]
```
gcode
```
(
```
nc
```
) — G-code (ISO 6983)
[ ]
```
gherkin
```
(
```
feature
```
) — Gherkin
[ ]
```
glsl
```
— GLSL
[ ]
```
gml
```
— GML
[x]
```
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
[x]
```
ini
```
(
```
toml
```
) — TOML, also INI
[ ]
```
irpf90
```
— IRPF90
[ ]
```
isbl
```
— ISBL
[x]
```
java
```
(
```
jsp
```
) — Java
[x]
```
javascript
```
(
```
js
```
,
```
jsx
```
,
```
mjs
```
,
```
cjs
```
) — Javascript
[ ]
```
jboss-cli
```
(
```
wildfly-cli
```
) — JBoss CLI
[x]
```
json
```
— JSON
[ ]
```
julia
```
— Julia
[ ]
```
julia-repl
```
— Julia REPL
[x]
```
kotlin
```
(
```
kt
```
,
```
kts
```
) — Kotlin
[ ]
```
lasso
```
(
```
ls
```
,
```
lassoscript
```
) — Lasso
[ ]
```
latex
```
(
```
tex
```
) — LaTeX
[ ]
```
ldif
```
— LDIF
[ ]
```
leaf
```
— Leaf
[x]
```
less
```
— Less
[ ]
```
lisp
```
— Lisp
[ ]
```
livecodeserver
```
— LiveCode
[ ]
```
livescript
```
(
```
ls
```
) — LiveScript
[ ]
```
llvm
```
— LLVM IR
[ ]
```
lsl
```
— LSL (Linden Scripting Language)
[x]
```
lua
```
— Lua
[x]
```
makefile
```
(
```
mk
```
,
```
mak
```
,
```
make
```
) — Makefile
[x]
```
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

[x]

objectivec

(

mm

objc

obj-c

obj-c++

objective-c++

) — Objective-C

[ ]
```
ocaml
```
(
```
ml
```
) — OCaml
[ ]
```
openscad
```
(
```
scad
```
) — OpenSCAD
[ ]
```
oxygene
```
— Oxygene
[ ]
```
parser3
```
— Parser3
[x]
```
perl
```
(
```
pl
```
,
```
pm
```
) — Perl
[ ]
```
pf
```
(
```
pf.conf
```
) — Packet Filter config
[ ]
```
pgsql
```
(
```
postgres
```
,
```
postgresql
```
) — PostgreSQL
[x]
```
php
```
— undefined
[x]
```
php-template
```
— PHP template
[x]
```
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
[x]
```
python
```
(
```
py
```
,
```
gyp
```
,
```
ipython
```
) — Python
[x]
```
python-repl
```
(
```
pycon
```
) — undefined
[ ]
```
q
```
(
```
k
```
,
```
kdb
```
) — Q
[ ]
```
qml
```
(
```
qt
```
) — QML
[x]
```
r
```
— R
[ ]
```
reasonml
```
(
```
re
```
) — ReasonML
[ ]
```
rib
```
— RenderMan RIB
[ ]
```
roboconf
```
(
```
graph
```
,
```
instances
```
) — Roboconf
[ ]
```
routeros
```
(
```
mikrotik
```
) — Microtik RouterOS script
[ ]
```
rsl
```
— RenderMan RSL
[x]
```
ruby
```
(
```
rb
```
,
```
gemspec
```
,
```
podspec
```
,
```
thor
```
,
```
irb
```
) — Ruby
[ ]
```
ruleslanguage
```
— Oracle Rules Language
[x]
```
rust
```
(
```
rs
```
) — Rust
[ ]
```
sas
```
— SAS
[ ]
```
scala
```
— Scala
[ ]
```
scheme
```
— Scheme
[ ]
```
scilab
```
(
```
sci
```
) — Scilab
[x]
```
scss
```
— SCSS
[x]
```
shell
```
(
```
console
```
,
```
shellsession
```
) — Shell Session
[ ]
```
smali
```
— Smali
[ ]
```
smalltalk
```
(
```
st
```
) — Smalltalk
[ ]
```
sml
```
(
```
ml
```
) — SML (Standard ML)
[ ]
```
sqf
```
— SQF
[x]
```
sql
```
— SQL
[ ]
```
stan
```
(
```
stanfuncs
```
) — Stan
[ ]
```
stata
```
(
```
do
```
,
```
ado
```
) — Stata
[ ]
```
step21
```
(
```
p21
```
,
```
step
```
,
```
stp
```
) — STEP Part 21
[ ]
```
stylus
```
(
```
styl
```
) — Stylus
[ ]
```
subunit
```
— SubUnit
[x]
```
swift
```
— Swift
[ ]
```
taggerscript
```
— Tagger Script
[ ]
```
tap
```
— Test Anything Protocol
[ ]
```
tcl
```
(
```
tk
```
) — Tcl
[ ]
```
thrift
```
— Thrift
[ ]
```
tp
```
— TP
[ ]
```
twig
```
(
```
craftcms
```
) — Twig
[x]
```
typescript
```
(
```
ts
```
,
```
tsx
```
) — TypeScript
[ ]
```
vala
```
— Vala
[x]
```
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
[x]
```
xml
```
(
```
html
```
,
```
xhtml
```
,
```
rss
```
,
```
atom
```
,
```
xjb
```
,
```
xsd
```
,
```
xsl
```
,
```
plist
```
,
```
wsf
```
,
```
svg
```
) — HTML, XML
[ ]
```
xquery
```
(
```
xpath
```
,
```
xq
```
) — XQuery
[x]
```
yaml
```
(
```
yml
```
) — YAML
[ ]
```
zephir
```
(
```
zep
```
) — Zephir

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

About the developer

Description

Services available

Need anything else?

Contributors list

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

Parameters

Returns

Example

lowlight.listLanguages()

Returns

Example

Syntaxes

Related

Projects

License