wooorm / Refractor
Programming Languages
Projects that are alternatives of or similar to Refractor
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 237 languages (as of [email protected]
) and all
themes.
Want to use highlight.js
instead?
Try lowlight
!
Contents
Install
npm:
npm install refractor
Use
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: ';'}]
}
]
Which serialized with rehype
or hast-util-to-html
yields (you may have to wrap it into a fragment like so: {type: 'root', children: nodes}
):
<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.
API
refractor.register(syntax)
Register a syntax.
Needed if you’re using refractor/core
.
Example
var refractor = require('refractor/core')
var markdown = require('refractor/lang/markdown')
refractor.register(markdown)
console.log(refractor.highlight('*Emphasis*', 'markdown'))
Yields:
[
{
type: 'element',
tagName: 'span',
properties: {className: [Array]},
children: [[Object], [Object], [Object]]
}
]
refractor.alias(name[, alias])
Register a new alias
for the name
language.
Signatures
alias(name, alias|list)
alias(aliases)
Parameters
-
name
(string
) — Name of a registered language -
alias
(string
) — New alias for the registered language -
list
(Array.<alias>
) — List of aliases -
aliases
(Object.<alias|list>
) — Map where each key is aname
and each value analias
or alist
Example
var refractor = require('refractor/core')
var markdown = require('refractor/lang/markdown')
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!
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')
console.log(refractor.highlight('em { color: red }', 'css'))
Yields:
[
{
type: 'element',
tagName: 'span',
properties: {className: [Array]},
children: [[Object]]
},
{type: 'text', value: ' '},
// …
{type: 'text', value: ' red '},
{
type: 'element',
tagName: 'span',
properties: {className: [Array]},
children: [[Object]]
}
]
refractor.registered(language)
Check if a language
(name or alias) is registered.
Example
var refractor = require('refractor/core')
var markdown = require('refractor/lang/markdown')
console.log(refractor.registered('markdown'))
refractor.register(markdown)
console.log(refractor.registered('markdown'))
Yields:
false
true
refractor.listLanguages()
List all registered languages (names and aliases).
Returns
Array.<string>
.
Example
var refractor = require('refractor/core')
var markdown = require('refractor/lang/markdown')
console.log(refractor.listLanguages())
refractor.register(markdown)
console.log(refractor.listLanguages())
Yields:
[
'markup',
'html',
// …
'javascript',
'js'
]
[
'markup',
'html',
// …
'javascript',
'js',
'markdown',
'md'
]
Browser
I do not suggest using the pre-bundled files or requiring
refractor
itself in the browser as that would include a 376kb (139kb GZipped)
of code.
Instead require refractor/core
and include only the needed syntaxes.
For example:
var refractor = require('refractor/core')
refractor.register(require('refractor/lang/jsx'))
console.log(refractor.highlight('<Dropdown primary />', 'jsx'))
Yields:
[
{
type: 'element',
tagName: 'span',
properties: {className: ['token', 'tag']},
children: [
{type: 'element', tagName: 'span', properties: {className: [Array]}, children: [[Object], [Object]]},
{type: 'text', value: ' '},
{type: 'element', tagName: 'span', properties: {className: [Array]}, children: [[Object]]},
{type: 'text', value: ' '},
{type: 'element', tagName: 'span', properties: {className: [Array]}, children: [[Object]]}
]
}
]
…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
require
just what you need
Syntaxes
All syntaxes are included if you require('refractor')
.
If you’re using refractor/core
, checked syntaxes are always included, but
unchecked syntaxes are not and must be require
d and register
ed.
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.
- [x]
clike
- [x]
css
- [x]
javascript
— alias:js
- [x]
markup
— alias:html
,mathml
,svg
,xml
,ssml
,atom
,rss
- [ ]
abap
- [ ]
abnf
- [ ]
actionscript
- [ ]
ada
- [ ]
agda
- [ ]
al
- [ ]
antlr4
— alias:g4
- [ ]
apacheconf
- [ ]
apex
- [ ]
apl
- [ ]
applescript
- [ ]
aql
- [ ]
arduino
- [ ]
arff
- [ ]
asciidoc
— alias:adoc
- [ ]
asm6502
- [ ]
aspnet
- [ ]
autohotkey
- [ ]
autoit
- [ ]
bash
— alias:shell
- [ ]
basic
- [ ]
batch
- [ ]
bbcode
— alias:shortcode
- [ ]
birb
- [ ]
bison
- [ ]
bnf
— alias:rbnf
- [ ]
brainfuck
- [ ]
brightscript
- [ ]
bro
- [ ]
bsl
- [ ]
c
- [ ]
cil
- [ ]
clojure
- [ ]
cmake
- [ ]
coffeescript
— alias:coffee
- [ ]
concurnas
— alias:conc
- [ ]
cpp
- [ ]
crystal
- [ ]
csharp
— alias:dotnet
,cs
- [ ]
csp
- [ ]
cssExtras
- [ ]
cypher
- [ ]
d
- [ ]
dart
- [ ]
dataweave
- [ ]
dax
- [ ]
dhall
- [ ]
diff
- [ ]
django
— alias:jinja2
- [ ]
dnsZoneFile
- [ ]
docker
— alias:dockerfile
- [ ]
ebnf
- [ ]
editorconfig
- [ ]
eiffel
- [ ]
ejs
— alias:eta
- [ ]
elixir
- [ ]
elm
- [ ]
erb
- [ ]
erlang
- [ ]
etlua
- [ ]
excelFormula
- [ ]
factor
- [ ]
firestoreSecurityRules
- [ ]
flow
- [ ]
fortran
- [ ]
fsharp
- [ ]
ftl
- [ ]
gcode
- [ ]
gdscript
- [ ]
gedcom
- [ ]
gherkin
- [ ]
git
- [ ]
glsl
- [ ]
gml
- [ ]
go
- [ ]
graphql
- [ ]
groovy
- [ ]
haml
- [ ]
handlebars
- [ ]
haskell
— alias:hs
- [ ]
haxe
- [ ]
hcl
- [ ]
hlsl
- [ ]
hpkp
- [ ]
hsts
- [ ]
http
- [ ]
ichigojam
- [ ]
icon
- [ ]
iecst
- [ ]
ignore
- [ ]
inform7
- [ ]
ini
- [ ]
io
- [ ]
j
- [ ]
java
- [ ]
javadoc
- [ ]
javadoclike
- [ ]
javastacktrace
- [ ]
jolie
- [ ]
jq
- [ ]
jsExtras
- [ ]
jsTemplates
- [ ]
jsdoc
- [ ]
json
— alias:webmanifest
- [ ]
json5
- [ ]
jsonp
- [ ]
jsstacktrace
- [ ]
jsx
- [ ]
julia
- [ ]
keyman
- [ ]
kotlin
— alias:kt
,kts
- [ ]
latex
— alias:tex
,context
- [ ]
latte
- [ ]
less
- [ ]
lilypond
- [ ]
liquid
- [ ]
lisp
- [ ]
livescript
- [ ]
llvm
- [ ]
lolcode
- [ ]
lua
- [ ]
makefile
- [ ]
markdown
— alias:md
- [ ]
markupTemplating
- [ ]
matlab
- [ ]
mel
- [ ]
mizar
- [ ]
mongodb
- [ ]
monkey
- [ ]
moonscript
— alias:moon
- [ ]
n1ql
- [ ]
n4js
- [ ]
nand2tetrisHdl
- [ ]
naniscript
- [ ]
nasm
- [ ]
neon
- [ ]
nginx
- [ ]
nim
- [ ]
nix
- [ ]
nsis
- [ ]
objectivec
— alias:objc
- [ ]
ocaml
- [ ]
opencl
- [ ]
oz
- [ ]
parigp
- [ ]
parser
- [ ]
pascal
— alias:objectpascal
- [ ]
pascaligo
- [ ]
pcaxis
— alias:px
- [ ]
peoplecode
— alias:pcode
- [ ]
perl
- [ ]
phpExtras
- [ ]
php
- [ ]
phpdoc
- [ ]
plsql
- [ ]
powerquery
- [ ]
powershell
- [ ]
processing
- [ ]
prolog
- [ ]
promql
- [ ]
properties
- [ ]
protobuf
- [ ]
pug
- [ ]
puppet
- [ ]
pure
- [ ]
purebasic
- [ ]
purescript
— alias:purs
- [ ]
python
— alias:py
- [ ]
q
- [ ]
qml
- [ ]
qore
- [ ]
r
- [ ]
racket
— alias:rkt
- [ ]
reason
- [ ]
regex
- [ ]
renpy
— alias:rpy
- [ ]
rest
- [ ]
rip
- [ ]
roboconf
- [ ]
robotframework
- [ ]
ruby
— alias:rb
- [ ]
rust
- [ ]
sas
- [ ]
sass
- [ ]
scala
- [ ]
scheme
- [ ]
scss
- [ ]
shellSession
- [ ]
smali
- [ ]
smalltalk
- [ ]
smarty
- [ ]
sml
— alias:smlnj
- [ ]
solidity
— alias:sol
- [ ]
solutionFile
- [ ]
soy
- [ ]
sparql
— alias:rq
- [ ]
splunkSpl
- [ ]
sqf
- [ ]
sql
- [ ]
stan
- [ ]
stylus
- [ ]
swift
- [ ]
t4Cs
- [ ]
t4Templating
- [ ]
t4Vb
- [ ]
tap
- [ ]
tcl
- [ ]
textile
- [ ]
toml
- [ ]
tsx
- [ ]
tt2
- [ ]
turtle
- [ ]
twig
- [ ]
typescript
— alias:ts
- [ ]
typoscript
— alias:tsconfig
- [ ]
unrealscript
— alias:uc
,uscript
- [ ]
vala
- [ ]
vbnet
- [ ]
velocity
- [ ]
verilog
- [ ]
vhdl
- [ ]
vim
- [ ]
visualBasic
- [ ]
warpscript
- [ ]
wasm
- [ ]
wiki
- [ ]
xeora
— alias:xeoracube
- [ ]
xmlDoc
- [ ]
xojo
- [ ]
xquery
- [ ]
yaml
— alias:yml
- [ ]
yang
- [ ]
zig
Related
-
lowlight
— Same, but based onhighlight.js
Projects
-
react-syntax-highlighter
— React component for syntax highlighting -
rehype-prism
— Syntax highlighting in rehype -
react-refractor
— Syntax highlighter for React