Package Exports
- refractor
- refractor/core
- refractor/core.js
- refractor/lang/abap.js
- refractor/lang/actionscript.js
- refractor/lang/ada.js
- refractor/lang/apacheconf.js
- refractor/lang/apl.js
- refractor/lang/applescript.js
- refractor/lang/arduino.js
- refractor/lang/arff.js
- refractor/lang/asciidoc.js
- refractor/lang/asm6502.js
- refractor/lang/aspnet.js
- refractor/lang/autohotkey.js
- refractor/lang/autoit.js
- refractor/lang/bash
- refractor/lang/bash.js
- refractor/lang/basic.js
- refractor/lang/batch.js
- refractor/lang/bison.js
- refractor/lang/brainfuck.js
- refractor/lang/bro.js
- refractor/lang/c
- refractor/lang/c.js
- refractor/lang/clike
- refractor/lang/clike.js
- refractor/lang/clojure.js
- refractor/lang/coffeescript.js
- refractor/lang/cpp.js
- refractor/lang/crystal.js
- refractor/lang/csharp
- refractor/lang/csharp.js
- refractor/lang/csp.js
- refractor/lang/css
- refractor/lang/css-extras
- refractor/lang/css-extras.js
- refractor/lang/css.js
- refractor/lang/d.js
- refractor/lang/dart.js
- refractor/lang/diff
- refractor/lang/diff.js
- refractor/lang/django.js
- refractor/lang/docker.js
- refractor/lang/eiffel.js
- refractor/lang/elixir.js
- refractor/lang/elm.js
- refractor/lang/erb.js
- refractor/lang/erlang.js
- refractor/lang/flow.js
- refractor/lang/fortran.js
- refractor/lang/fsharp.js
- refractor/lang/gedcom.js
- refractor/lang/gherkin.js
- refractor/lang/git
- refractor/lang/git.js
- refractor/lang/glsl.js
- refractor/lang/go
- refractor/lang/go.js
- refractor/lang/graphql
- refractor/lang/graphql.js
- refractor/lang/groovy.js
- refractor/lang/haml.js
- refractor/lang/handlebars
- refractor/lang/handlebars.js
- refractor/lang/haskell.js
- refractor/lang/haxe.js
- refractor/lang/hpkp.js
- refractor/lang/hsts.js
- refractor/lang/http
- refractor/lang/http.js
- refractor/lang/ichigojam.js
- refractor/lang/icon.js
- refractor/lang/inform7.js
- refractor/lang/ini.js
- refractor/lang/io.js
- refractor/lang/j.js
- refractor/lang/java
- refractor/lang/java.js
- refractor/lang/javascript
- refractor/lang/javascript.js
- refractor/lang/jolie.js
- refractor/lang/json
- refractor/lang/json.js
- refractor/lang/jsx
- refractor/lang/jsx.js
- refractor/lang/julia.js
- refractor/lang/keyman.js
- refractor/lang/kotlin.js
- refractor/lang/latex.js
- refractor/lang/less.js
- refractor/lang/liquid.js
- refractor/lang/lisp.js
- refractor/lang/livescript.js
- refractor/lang/lolcode.js
- refractor/lang/lua.js
- refractor/lang/makefile.js
- refractor/lang/markdown
- refractor/lang/markdown.js
- refractor/lang/markup
- refractor/lang/markup-templating
- refractor/lang/markup-templating.js
- refractor/lang/markup.js
- refractor/lang/matlab.js
- refractor/lang/mel.js
- refractor/lang/mizar.js
- refractor/lang/monkey.js
- refractor/lang/n4js.js
- refractor/lang/nasm.js
- refractor/lang/nginx.js
- refractor/lang/nim.js
- refractor/lang/nix.js
- refractor/lang/nsis.js
- refractor/lang/objectivec
- refractor/lang/objectivec.js
- refractor/lang/ocaml
- refractor/lang/ocaml.js
- refractor/lang/opencl.js
- refractor/lang/oz.js
- refractor/lang/parigp.js
- refractor/lang/parser.js
- refractor/lang/pascal.js
- refractor/lang/perl.js
- refractor/lang/php
- refractor/lang/php-extras.js
- refractor/lang/php.js
- refractor/lang/plsql.js
- refractor/lang/powershell
- refractor/lang/powershell.js
- refractor/lang/processing.js
- refractor/lang/prolog.js
- refractor/lang/properties.js
- refractor/lang/protobuf
- refractor/lang/protobuf.js
- refractor/lang/pug.js
- refractor/lang/puppet.js
- refractor/lang/pure.js
- refractor/lang/python
- refractor/lang/python.js
- refractor/lang/q.js
- refractor/lang/qore.js
- refractor/lang/r.js
- refractor/lang/reason.js
- refractor/lang/renpy.js
- refractor/lang/rest.js
- refractor/lang/rip.js
- refractor/lang/roboconf.js
- refractor/lang/ruby
- refractor/lang/ruby.js
- refractor/lang/rust.js
- refractor/lang/sas.js
- refractor/lang/sass.js
- refractor/lang/scala.js
- refractor/lang/scheme.js
- refractor/lang/scss
- refractor/lang/scss.js
- refractor/lang/smalltalk.js
- refractor/lang/smarty.js
- refractor/lang/soy.js
- refractor/lang/sql
- refractor/lang/sql.js
- refractor/lang/stylus.js
- refractor/lang/swift
- refractor/lang/swift.js
- refractor/lang/tap.js
- refractor/lang/tcl.js
- refractor/lang/textile.js
- refractor/lang/tsx
- refractor/lang/tsx.js
- refractor/lang/tt2.js
- refractor/lang/twig
- refractor/lang/twig.js
- refractor/lang/typescript
- refractor/lang/typescript.js
- refractor/lang/vbnet.js
- refractor/lang/velocity.js
- refractor/lang/verilog.js
- refractor/lang/vhdl.js
- refractor/lang/vim.js
- refractor/lang/visual-basic.js
- refractor/lang/wasm.js
- refractor/lang/wiki.js
- refractor/lang/xeora.js
- refractor/lang/xojo.js
- refractor/lang/xquery.js
- refractor/lang/yaml
- refractor/lang/yaml.js
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (refractor) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
refractor 
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 Prism,
that’s 176 languages (as of prism@1.16.0) and all
themes.
Want to use highlight.js instead? Try lowlight!
Table of Contents
Installation
npm:
npm installNote: Prism depends on
clipboard.js, but that code isn’t included when running refractor.
Usage
var refractor = require('refractor')
var nodes = refractor.highlight('"use strict";', 'js')
console.log(nodes)Yields:
[ { 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: ';' } ] } ]Or, stringified with rehype:
var rehype = require('rehype')
var html = rehype()
.stringify({type: 'root', children: nodes})
.toString()
console.log(html)Yields:
<span class="token string">"use strict"</span><span class="token punctuation">;</span>Tip: Use
hast-to-hyperscriptto transform to other virtual DOMs, or DIY.
API
refractor.register(syntax)
Register a syntax. Needed if you’re using refractor/core.js.
Example
var refractor = require('refractor/core.js')
var markdown = require('refractor/lang/markdown.js')
refractor.register(markdown)
console.log(refractor.highlight('*Emphasis*', 'markdown'))Yields:
[ { type: 'element',
tagName: 'span',
properties: [Object],
children: [Array] } ]refractor.highlight(value, language)
Parse value (string) according to the language (name or alias)
syntax.
Returns
Virtual nodes representing the highlighted value (Array.<Node>).
Example
var refractor = require('refractor/core.js')
console.log(refractor.highlight('em { color: red }', 'css'))Yields:
[ { type: 'element',
tagName: 'span',
properties: [Object],
children: [Array] },
{ type: 'text', value: ' ' },
// ...
{ type: 'text', value: ' red ' },
{ type: 'element',
tagName: 'span',
properties: [Object],
children: [Array] } ]refractor.registered(language)
Check if a language (name or alias) is registered.
Example
var refractor = require('refractor/core.js')
var markdown = require('refractor/lang/markdown.js')
console.log(refractor.registered('markdown'))
refractor.register(markdown)
console.log(refractor.registered('markdown'))Yields:
false
truerefractor.listLanguages()
List all registered languages (names and aliases).
Returns
Array.<string>.
Example
var refractor = require('refractor/core.js')
var markdown = require('refractor/lang/markdown.js')
console.log(refractor.listLanguages())
refractor.register(markdown)
console.log(refractor.listLanguages())Yields:
[ 'markup',
'xml',
'html',
'mathml',
'svg',
'css',
'clike',
'javascript',
'js' ]
[ 'markup',
'xml',
'html',
'mathml',
'svg',
'css',
'clike',
'javascript',
'js',
'markdown' ]Browser
I do not suggest using the pre-bundled files or requiring
refractor itself in the browser as that would include a 352kb (128kb GZipped)
of code.
Instead require refractor/core.js and include only the needed syntaxes.
For example:
var refractor = require('refractor/core.js')
refractor.register(require('refractor/lang/jsx.js'))
console.log(refractor.highlight('<Dropdown primary />', 'jsx'))Yields:
[ { type: 'element',
tagName: 'span',
properties: { className: [ 'token', 'tag' ] },
children:
[ { type: 'element',
tagName: 'span',
properties: { className: [ 'token', 'tag' ] },
children:
[ { type: 'element',
tagName: 'span',
properties: { className: [ 'token', 'punctuation' ] },
children: [ { type: 'text', value: '<' } ] },
{ type: 'text', value: 'Dropdown' } ] },
{ type: 'text', value: ' ' },
{ type: 'element',
tagName: 'span',
properties: { className: [ 'token', 'attr-name' ] },
children: [ { type: 'text', value: 'primary' } ] },
{ type: 'text', value: ' ' },
{ type: 'element',
tagName: 'span',
properties: { className: [ 'token', 'punctuation' ] },
children: [ { type: 'text', value: '/>' } ] } ] } ]…When using browserify and minifying with tinyify this results in just 65kb of code (23kb with GZip).
Plugins
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
requirejust what you need.
Syntaxes
All syntaxes are included if you require('refractor'). If you’re using
refractor/core.js, checked syntaxes are always included, but unchecked
syntaxes are not and must be required and registered.
Unlike in Prism, cssExtras and phpExtras are camel-cased instead of
dash-cased.
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.
-
clike -
css -
javascript— alias:js -
markup— alias:xml,html,mathml,svg -
abap -
abnf -
actionscript -
ada -
apacheconf -
apl -
applescript -
arduino -
arff -
asciidoc— alias:adoc -
asm6502 -
aspnet -
autohotkey -
autoit -
bash— alias:shell -
basic -
batch -
bison -
bnf— alias:rbnf -
brainfuck -
bro -
c -
cil -
clojure -
cmake -
coffeescript— alias:coffee -
cpp -
crystal -
csharp— alias:dotnet -
csp -
cssExtras -
d -
dart -
diff -
django— alias:jinja2 -
docker— alias:dockerfile -
ebnf -
eiffel -
ejs -
elixir -
elm -
erb -
erlang -
flow -
fortran -
fsharp -
gcode -
gedcom -
gherkin -
git -
glsl -
gml -
go -
graphql -
groovy -
haml -
handlebars -
haskell— alias:hs -
haxe -
hcl -
hpkp -
hsts -
http -
ichigojam -
icon -
inform7 -
ini -
io -
j -
java -
javadoc -
javadoclike -
javastacktrace -
jolie -
jsExtras -
jsdoc -
json -
json5 -
jsonp -
jsx -
julia -
keyman -
kotlin -
latex -
less -
liquid -
lisp -
livescript -
lolcode -
lua -
makefile -
markdown— alias:md -
markupTemplating -
matlab -
mel -
mizar -
monkey -
n1ql -
n4js -
nand2tetrisHdl -
nasm -
nginx -
nim -
nix -
nsis -
objectivec -
ocaml -
opencl -
oz -
parigp -
parser -
pascal— alias:objectpascal -
perl -
phpExtras -
php -
phpdoc -
plsql -
powershell -
processing -
prolog -
properties -
protobuf -
pug -
puppet -
pure -
python— alias:py -
q -
qore -
r -
reason -
regex -
renpy -
rest -
rip -
roboconf -
ruby— alias:rb -
rust -
sas -
sass -
scala -
scheme -
scss -
smalltalk -
smarty -
soy -
sql -
stylus -
swift -
t4Cs -
t4Templating -
t4Vb -
tap -
tcl -
textile -
toml -
tsx -
tt2 -
twig -
typescript— alias:ts -
vala -
vbnet -
velocity -
verilog -
vhdl -
vim -
visualBasic -
wasm -
wiki -
xeora— alias:xeoracube -
xojo -
xquery -
yaml— alias:yml
Related
lowlight— Same, but based onhighlight.js
Projects
react-syntax-highlighter— React component for syntax highlightingrehype-prism— Syntax highlighting in rehypereact-refractor— Syntax highlighter for React