npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2026 – Pkg Stats / Ryan Hefner

refractor-restyled-jsx

v0.0.1

Published

Lightweight, robust, elegant virtual syntax highlighting using Prism

Downloads

11

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

felixtellmannfelixtellmann

Keywords

syntaxcodeastvirtualdomhighlighthighlightingprism

Readme

refractor

Build Coverage Downloads Size

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 [email protected]) and all themes.

Want to use highlight.js instead? Try lowlight!

Contents

Install

npm:

npm install refractor

Use in the browser »

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 a name and each value an alias or a list
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:

  1. Prism plugins often deal with the DOM, not Prism tokens
  2. 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 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.

Related

Projects

License

MIT © Titus Wormer