Lightweight, robust, elegant virtual syntax highlighting using Prism. Useful for virtual DOMs and non-HTML things. Perfect for React, VDOM, and others.
refractor
is built to work with all syntaxes supported by [highlight.js][].
There are three builds:
lib/core.js
— 0 languageslib/common.js
(default) — 36 languageslib/all.js
— 271 languages
Want to use highlight.js
instead?
Try lowlight
!
This package is ESM only:
Node 12+ is needed to use it and it must be import
ed instead of require
d.
npm:
npm install refractor
import {refractor} from 'refractor'
var root = refractor.highlight('"use strict";', 'js')
console.log(root)
Yields:
{
type: 'root',
children: [
{
type: 'element',
tagName: 'span',
properties: {className: ['token', 'string']},
children: [{type: 'text', value: '"use strict"'}]
},
{
type: 'element',
tagName: 'span',
properties: {className: ['token', 'punctuation']},
children: [{type: 'text', value: ';'}]
}
]
}
Which serialized with hast-util-to-html
(or rehype
)
yields:
<span class="token string">"use strict"</span><span class="token punctuation">;</span>
Tip: Use
hast-to-hyperscript
to transform to other virtual DOMs, or DIY.
Try out an interactive demo (Replit)
This package exports the following identifiers: refractor
.
There is no default export.
Register a syntax.
Needed if you’re using refractor/core
.
import {refractor} from 'refractor/core.js'
import markdown from 'refractor/lang/markdown.js'
refractor.register(markdown)
console.log(refractor.highlight('*Emphasis*', 'markdown'))
Yields:
{
type: 'root',
children: [
{type: 'element', tagName: 'span', properties: [Object], children: [Array]}
]
}
Register a new alias
for the name
language.
alias(name, alias|list)
alias(aliases)
name
(string
) — Name of a registered languagealias
(string
) — New alias for the registered languagelist
(Array.<alias>
) — List of aliasesaliases
(Object.<alias|list>
) — Map where each key is aname
and each value analias
or alist
import {refractor} from 'refractor/core.js'
import markdown from 'refractor/lang/markdown.js'
refractor.register(markdown)
// refractor.highlight('*Emphasis*', 'mdown')
// ^ would throw: Error: Unknown language: `mdown` is not registered
refractor.alias({markdown: ['mdown', 'mkdn', 'mdwn', 'ron']})
refractor.highlight('*Emphasis*', 'mdown')
// ^ Works!
Parse value
(string
) according to the language
(name or alias)
syntax.
Virtual node representing the highlighted value (Root
).
import {refractor} from 'refractor/core.js'
import css from 'refractor/lang/css.js'
refractor.register(css)
console.log(refractor.highlight('em { color: red }', 'css'))
Yields:
{
type: 'root',
children: [
{type: 'element', tagName: 'span', properties: [Object], children: [Array]},
{type: 'text', value: ' '},
// …
{type: 'text', value: ' red '},
{type: 'element', tagName: 'span', properties: [Object], children: [Array]}
]
}
Check if a language
(name or alias) is registered.
import {refractor} from 'refractor/core.js'
import markdown from 'refractor/lang/markdown.js'
console.log(refractor.registered('markdown'))
refractor.register(markdown)
console.log(refractor.registered('markdown'))
Yields:
false
true
List all registered languages (names and aliases).
Array.<string>
.
import {refractor} from 'refractor/core.js'
import markdown from 'refractor/lang/markdown.js'
console.log(refractor.listLanguages())
refractor.register(markdown)
console.log(refractor.listLanguages())
Yields:
[]
[
'markup', // Note that `markup` (a lot of xml based languages) is a dep of markdown.
'html',
// …
'markdown',
'md'
]
It is not suggested to import refractor
itself in the browser as that would
include a 500kb (187kb minzipped) of code.
Instead import refractor/lib/core.js
and include only the needed syntaxes.
For example:
import {refractor} from 'refractor/lib/core.js';
import jsx from 'refractor/lang/jsx.js'
refractor.register(jsx)
console.log(refractor.highlight('<Dropdown primary />', 'jsx'))
…when using esbuild this results in 35.8kB of code (14kb minzipped).
refractor
does not support Prism plugins:
- Prism plugins often deal with the DOM, not Prism tokens
- Prism is made using global variables instead of a module format, so all syntaxes below are custom built to work so you can import just what you need
If you’re using refractor/lib/core.js
, no syntaxes are included.
Checked syntaxes are included if you import refractor
(or
refractor/lib/common.js
).
Unchecked syntaxes are available through refractor/lib/all.js
.
Note that Prism works as a singleton. That means that if you register a syntax anywhere in your project, it’ll become available everywhere!
Only these custom built syntaxes will work with refractor
because Prism’s own
syntaxes are made to work with global variables and are not requirable.
-
arduino
-
bash
— alias:shell
-
basic
-
c
-
clike
-
cpp
-
csharp
— alias:cs
,dotnet
-
css
-
diff
-
go
-
ini
-
java
-
javascript
— alias:js
-
json
— alias:webmanifest
-
kotlin
— alias:kt
,kts
-
less
-
lua
-
makefile
-
markdown
— alias:md
-
markup
— alias:atom
,html
,mathml
,rss
,ssml
,svg
,xml
-
markup-templating
-
objectivec
— alias:objc
-
perl
-
php
-
python
— alias:py
-
r
-
regex
-
ruby
— alias:rb
-
rust
-
sass
-
scss
-
sql
-
swift
-
typescript
— alias:ts
-
vbnet
-
yaml
— alias:yml
-
abap
-
abnf
-
actionscript
-
ada
-
agda
-
al
-
antlr4
— alias:g4
-
apacheconf
-
apex
-
apl
-
applescript
-
aql
-
arff
-
asciidoc
— alias:adoc
-
asm6502
-
aspnet
-
autohotkey
-
autoit
-
avisynth
— alias:avs
-
avro-idl
— alias:avdl
-
batch
-
bbcode
— alias:shortcode
-
bicep
-
birb
-
bison
-
bnf
— alias:rbnf
-
brainfuck
-
brightscript
-
bro
-
bsl
— alias:oscript
-
cfscript
— alias:cfc
-
chaiscript
-
cil
-
clojure
-
cmake
-
cobol
-
coffeescript
— alias:coffee
-
concurnas
— alias:conc
-
coq
-
crystal
-
cshtml
— alias:razor
-
csp
-
css-extras
-
csv
-
cypher
-
d
-
dart
-
dataweave
-
dax
-
dhall
-
django
— alias:jinja2
-
dns-zone-file
— alias:dns-zone
-
docker
— alias:dockerfile
-
dot
— alias:gv
-
ebnf
-
editorconfig
-
eiffel
-
ejs
— alias:eta
-
elixir
-
elm
-
erb
-
erlang
-
etlua
-
excel-formula
— alias:xls
,xlsx
-
factor
-
false
-
firestore-security-rules
-
flow
-
fortran
-
fsharp
-
ftl
-
gap
-
gcode
-
gdscript
-
gedcom
-
gherkin
-
git
-
glsl
-
gml
— alias:gamemakerlanguage
-
gn
— alias:gni
-
graphql
-
groovy
-
haml
-
handlebars
— alias:hbs
-
haskell
— alias:hs
-
haxe
-
hcl
-
hlsl
-
hoon
-
hpkp
-
hsts
-
http
-
ichigojam
-
icon
-
icu-message-format
-
idris
— alias:idr
-
iecst
-
ignore
— alias:gitignore
,hgignore
,npmignore
-
inform7
-
io
-
j
-
javadoc
-
javadoclike
-
javastacktrace
-
jexl
-
jolie
-
jq
-
js-extras
-
js-templates
-
jsdoc
-
json5
-
jsonp
-
jsstacktrace
-
jsx
-
julia
-
keyman
-
kumir
— alias:kum
-
kusto
-
latex
— alias:context
,tex
-
latte
-
lilypond
— alias:ly
-
liquid
-
lisp
— alias:elisp
,emacs
,emacs-lisp
-
livescript
-
llvm
-
log
-
lolcode
-
magma
-
matlab
-
maxscript
-
mel
-
mermaid
-
mizar
-
mongodb
-
monkey
-
moonscript
— alias:moon
-
n1ql
-
n4js
— alias:n4jsd
-
nand2tetris-hdl
-
naniscript
— alias:nani
-
nasm
-
neon
-
nevod
-
nginx
-
nim
-
nix
-
nsis
-
ocaml
-
opencl
-
openqasm
— alias:qasm
-
oz
-
parigp
-
parser
-
pascal
— alias:objectpascal
-
pascaligo
-
pcaxis
— alias:px
-
peoplecode
— alias:pcode
-
php-extras
-
phpdoc
-
plsql
-
powerquery
— alias:mscript
,pq
-
powershell
-
processing
-
prolog
-
promql
-
properties
-
protobuf
-
psl
-
pug
-
puppet
-
pure
-
purebasic
— alias:pbfasm
-
purescript
— alias:purs
-
q
-
qml
-
qore
-
qsharp
— alias:qs
-
racket
— alias:rkt
-
reason
-
rego
-
renpy
— alias:rpy
-
rest
-
rip
-
roboconf
-
robotframework
— alias:robot
-
sas
-
scala
-
scheme
-
shell-session
— alias:sh-session
,shellsession
-
smali
-
smalltalk
-
smarty
-
sml
— alias:smlnj
-
solidity
— alias:sol
-
solution-file
— alias:sln
-
soy
-
sparql
— alias:rq
-
splunk-spl
-
sqf
-
squirrel
-
stan
-
stylus
-
systemd
-
t4-cs
— alias:t4
-
t4-templating
-
t4-vb
-
tap
-
tcl
-
textile
-
toml
-
tsx
-
tt2
-
turtle
— alias:trig
-
twig
-
typoscript
— alias:tsconfig
-
unrealscript
— alias:uc
,uscript
-
uri
— alias:url
-
v
-
vala
-
velocity
-
verilog
-
vhdl
-
vim
-
visual-basic
— alias:vb
,vba
-
warpscript
-
wasm
-
wiki
-
wolfram
— alias:mathematica
,nb
,wl
-
wren
-
xeora
— alias:xeoracube
-
xml-doc
-
xojo
-
xquery
-
yang
-
zig
lowlight
— Same, but based onhighlight.js
react-syntax-highlighter
— React component for syntax highlightingrehype-prism
— Syntax highlighting in rehypereact-refractor
— Syntax highlighter for React