refractor-restyled-jsx v0.0.1
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 234 languages (as of prism@1.22.0
) 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 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
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.
clike
css
javascript
— alias:js
markup
— alias:html
,mathml
,svg
,xml
,ssml
,atom
,rss
abap
abnf
actionscript
ada
agda
al
antlr4
— alias:g4
apacheconf
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
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
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 highlightingrehype-prism
— Syntax highlighting in rehypereact-refractor
— Syntax highlighter for React
License
4 years ago