refractor
Advanced tools
Readme
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 184 languages (as of prism@1.17.0) and all
themes.
Want to use highlight.js instead?
Try lowlight!
npm:
npm install refractor
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, serialized 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.
refractor.register(syntax)Register a syntax.
Needed if you’re using refractor/core.js.
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.alias(name[, alias])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 a name and each
value an alias or a listvar refractor = require('./core')
var markdown = require('./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.
Virtual nodes representing the highlighted value (Array.<Node>).
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.
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
true
refractor.listLanguages()List all registered languages (names and aliases).
Array.<string>.
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' ]
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.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).
refractor does not support Prism plugins:
require just what you
needAll 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.
clikecssjavascript — alias: jsmarkup — alias: xml, html, mathml, svgabapabnfactionscriptadaapacheconfaplapplescriptarduinoarffasciidoc — alias: adocasm6502aspnetautohotkeyautoitbash — alias: shellbasicbatchbisonbnf — alias: rbnfbrainfuckbroccilclojurecmakecoffeescript — alias: coffeecppcrystalcsharp — alias: dotnet, cscspcssExtrasddartdiffdjango — alias: jinja2dnsZoneFiledocker — alias: dockerfileebnfeiffelejselixirelmerberlangflowfortranfsharpgcodegedcomgherkingitglslgmlgographqlgroovyhamlhandlebarshaskell — alias: hshaxehclhpkphstshttpichigojamiconinform7iniiojjavajavadocjavadoclikejavastacktracejoliejqjsExtrasjsTemplatesjsdocjsonjson5jsonpjsxjuliakeymankotlinlatex — alias: tex, contextlesslilypondliquidlisplivescriptlolcodeluamakefilemarkdown — alias: mdmarkupTemplatingmatlabmelmizarmonkeyn1qln4jsnand2tetrisHdlnasmnginxnimnixnsisobjectivecocamlopenclozparigpparserpascal — alias: objectpascalpascaligopcaxis — alias: pxperlphpExtrasphpphpdocplsqlpowershellprocessingprologpropertiesprotobufpugpuppetpurepython — alias: pyqqorerreasonregexrenpyrestriproboconfruby — alias: rbrustsassassscalaschemescssshellSessionsmalltalksmartysoysplunkSplsqlstylusswiftt4Cst4Templatingt4Vbtaptcltextiletomltsxtt2twigtypescript — alias: tsvalavbnetvelocityverilogvhdlvimvisualBasicwasmwikixeora — alias: xeoracubexojoxqueryyaml — alias: ymllowlight — Same, but based on highlight.jsreact-syntax-highlighter
— React component for syntax highlightingrehype-prism
— Syntax highlighting in rehypereact-refractor
— Syntax highlighter for ReactFAQs
Lightweight, robust, elegant virtual syntax highlighting using Prism
We found that refractor demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
The US Justice Department has penalized two consulting firms $11.3 million for failing to meet cybersecurity requirements on federally funded projects, emphasizing strict enforcement to protect sensitive government data.
Security News
ua-parser-js is set to drop the MIT license and adopt a controversial dual AGPLv3 + PRO licensing model in its upcoming v2.0 release, raising significant concerns among developers and enterprise users.
Security News
Researchers recently demonstrated that the npm Registry is vulnerable to cache poisoning combined with DoS, posing significant risks for package availability.