Refractor is a lightweight, robust, and extensible syntax highlighter that works in both Node.js and the browser. It is built on top of the Prism syntax highlighter and provides a way to highlight code syntax in various programming languages.
Syntax Highlighting
This feature allows you to highlight code syntax for a given programming language. The example highlights a simple JavaScript code snippet.
const refractor = require('refractor');
const html = refractor.highlight('const x = 42;', 'javascript');
console.log(html);Registering Languages
You can register additional languages for syntax highlighting. This example registers the Python language and highlights a Python code snippet.
const refractor = require('refractor');
const python = require('refractor/lang/python');
refractor.register(python);
const html = refractor.highlight('print("Hello, World!")', 'python');
console.log(html);Syntax Highlighting with Plugins
Refractor supports plugins to extend its functionality. This example uses the line-numbers plugin to add line numbers to the highlighted code.
const refractor = require('refractor');
const lineNumbers = require('refractor/plugins/line-numbers');
refractor.use(lineNumbers);
const html = refractor.highlight('const x = 42;', 'javascript');
console.log(html);Highlight.js is a popular syntax highlighter written in JavaScript. It automatically detects the language of the code and applies syntax highlighting. Compared to Refractor, Highlight.js is more automatic in language detection but may not be as customizable.
Prism is a lightweight, extensible syntax highlighter, built with modern web standards in mind. Refractor is built on top of Prism, so they share many similarities. However, Refractor provides a more modular approach and additional features like plugins.
CodeMirror is a versatile text editor implemented in JavaScript for the browser. It is specialized for editing code and comes with syntax highlighting capabilities. While CodeMirror is more of a full-fledged code editor, Refractor focuses solely on syntax highlighting.
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 languagesWant to use highlight.js instead?
Try lowlight!
This package is ESM only:
Node 12+ is needed to use it and it must be imported instead of required.
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-hyperscriptto 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.
refractor.register(syntax)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]}
]
}
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 listimport {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!
refractor.highlight(value, language)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]}
]
}
refractor.registered(language)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
refractor.listLanguages()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:
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.
arduinobash — alias: shellbasiccclikecppcsharp — alias: cs, dotnetcssdiffgoinijavajavascript — alias: jsjson — alias: webmanifestkotlin — alias: kt, ktslessluamakefilemarkdown — alias: mdmarkup — alias: atom, html, mathml, rss, ssml, svg, xmlmarkup-templatingobjectivec — alias: objcperlphppython — alias: pyrregexruby — alias: rbrustsassscsssqlswifttypescript — alias: tsvbnetyaml — alias: ymlabapabnfactionscriptadaagdaalantlr4 — alias: g4apacheconfapexaplapplescriptaqlarffasciidoc — alias: adocasm6502aspnetautohotkeyautoitavisynth — alias: avsavro-idl — alias: avdlbatchbbcode — alias: shortcodebicepbirbbisonbnf — alias: rbnfbrainfuckbrightscriptbrobsl — alias: oscriptcfscript — alias: cfcchaiscriptcilclojurecmakecobolcoffeescript — alias: coffeeconcurnas — alias: conccoqcrystalcshtml — alias: razorcspcss-extrascsvcypherddartdataweavedaxdhalldjango — alias: jinja2dns-zone-file — alias: dns-zonedocker — alias: dockerfiledot — alias: gvebnfeditorconfigeiffelejs — alias: etaelixirelmerberlangetluaexcel-formula — alias: xls, xlsxfactorfalsefirestore-security-rulesflowfortranfsharpftlgapgcodegdscriptgedcomgherkingitglslgml — alias: gamemakerlanguagegn — alias: gnigraphqlgroovyhamlhandlebars — alias: hbshaskell — alias: hshaxehclhlslhoonhpkphstshttpichigojamiconicu-message-formatidris — alias: idriecstignore — alias: gitignore, hgignore, npmignoreinform7iojjavadocjavadoclikejavastacktracejexljoliejqjs-extrasjs-templatesjsdocjson5jsonpjsstacktracejsxjuliakeymankumir — alias: kumkustolatex — alias: context, texlattelilypond — alias: lyliquidlisp — alias: elisp, emacs, emacs-lisplivescriptllvmloglolcodemagmamatlabmaxscriptmelmermaidmizarmongodbmonkeymoonscript — alias: moonn1qln4js — alias: n4jsdnand2tetris-hdlnaniscript — alias: naninasmneonnevodnginxnimnixnsisocamlopenclopenqasm — alias: qasmozparigpparserpascal — alias: objectpascalpascaligopcaxis — alias: pxpeoplecode — alias: pcodephp-extrasphpdocplsqlpowerquery — alias: mscript, pqpowershellprocessingprologpromqlpropertiesprotobufpslpugpuppetpurepurebasic — alias: pbfasmpurescript — alias: pursqqmlqoreqsharp — alias: qsracket — alias: rktreasonregorenpy — alias: rpyrestriproboconfrobotframework — alias: robotsasscalaschemeshell-session — alias: sh-session, shellsessionsmalismalltalksmartysml — alias: smlnjsolidity — alias: solsolution-file — alias: slnsoysparql — alias: rqsplunk-splsqfsquirrelstanstylussystemdt4-cs — alias: t4t4-templatingt4-vbtaptcltextiletomltsxtt2turtle — alias: trigtwigtyposcript — alias: tsconfigunrealscript — alias: uc, uscripturi — alias: urlvvalavelocityverilogvhdlvimvisual-basic — alias: vb, vbawarpscriptwasmwikiwolfram — alias: mathematica, nb, wlwrenxeora — alias: xeoracubexml-docxojoxqueryyangziglowlight — 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
The npm package refractor receives a total of 2,238,014 weekly downloads. As such, refractor popularity was classified as popular.
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
Research
A malicious npm package disguised as a WhatsApp client is exploiting authentication flows with a remote kill switch to exfiltrate data and destroy files.
Security News
PyPI now supports digital attestations, enhancing security and trust by allowing package maintainers to verify the authenticity of Python packages.
Security News
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.