refractor
    TypeScript icon, indicating that this package has built-in type declarations

    4.7.0 • Public • Published

    refractor

    Build Coverage Downloads Size

    Lightweight, robust, elegant virtual syntax highlighting using Prism.

    Contents

    What is this?

    This package wraps Prism to output objects (ASTs) instead of a string of HTML.

    Prism, through refractor, supports 270+ programming languages. Supporting all of them requires a lot of code. That’s why there are three entry points for refractor:

    • lib/core.js — 0 languages
    • lib/common.js (default) — 36 languages
    • lib/all.js — 290 languages

    Bundled, minified, and gzipped, those are roughly 12.7 kB, 40 kB, and 211 kB.

    When should I use this?

    This package is useful when you want to perform syntax highlighting in a place where serialized HTML wouldn’t work or wouldn’t work well. For example, you can use refractor when you want to show code in a CLI by rendering to ANSI sequences, when you’re using virtual DOM frameworks (such as React or Preact) so that diffing can be performant, or when you’re working with ASTs (rehype).

    A different package, lowlight, does the same as refractor but uses highlight.js instead.

    Playground

    You can play with refractor on the interactive demo (Replit).

    Install

    This package is ESM only. In Node.js (version 12.20+, 14.14+, or 16.0+), install with npm:

    npm install refractor

    In Deno with esm.sh:

    import {refractor} from 'https://esm.sh/refractor@4'

    In browsers with esm.sh:

    <script type="module">
      import {refractor} from 'https://esm.sh/refractor@4?bundle'
    </script>

    Use

    import {refractor} from 'refractor'
    
    const tree = refractor.highlight('"use strict";', 'js')
    
    console.log(tree)

    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: ';'}]
        }
      ]
    }

    API

    This package exports the following identifier: refractor. There is no default export.

    refractor.highlight(value, language)

    Highlight value (code) as language (programming language).

    Parameters
    • value (string) — code to highlight
    • language (string or Grammar) — programming language name, alias, or grammar.
    Returns

    Node representing highlighted code (Root).

    Example
    import {refractor} from 'refractor/lib/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.register(syntax)

    Register a syntax.

    Parameters
    • syntax (Function) — language function custom made for refractor, as in, the files in refractor/lang/*.js
    Example
    import {refractor} from 'refractor/lib/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 aliases for already registered languages.

    Signatures
    • alias(name, alias|list)
    • alias(aliases)
    Parameters
    • language (string) — programming language name
    • alias (string) — new aliases for the programming language
    • list (Array<string>) — list of aliases
    • aliases (Record<language, alias|list>) — map of languages to aliases or lists
    Example
    import {refractor} from 'refractor/lib/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.registered(aliasOrlanguage)

    Check whether an alias or language is registered.

    Parameters
    • aliasOrlanguage (string) — programming language name or alias
    Example
    import {refractor} from 'refractor/lib/core.js'
    import markdown from 'refractor/lang/markdown.js'
    
    console.log(refractor.registered('markdown')) //=> false
    
    refractor.register(markdown)
    
    console.log(refractor.registered('markdown')) //=> true

    refractor.listLanguages()

    List all registered languages (names and aliases).

    Returns

    Array<string>.

    Example
    import {refractor} from 'refractor/lib/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'
    ]

    Examples

    Example: serializing hast as html

    hast trees as returned by refractor can be serialized with hast-util-to-html:

    import {refractor} from 'refractor'
    import {toHtml} from 'hast-util-to-html'
    
    const tree = refractor.highlight('"use strict";', 'js')
    
    console.log(toHtml(tree))

    Yields:

    <span class="token string">"use strict"</span><span class="token punctuation">;</span>

    Example: turning hast into react nodes

    hast trees as returned by refractor can be turned into React (or Preact) with hast-to-hyperscript:

    import {refractor} from 'refractor'
    import {toH} from 'hast-to-hyperscript'
    import React from 'react'
    
    const tree = refractor.highlight('"use strict";', 'js')
    const react = toH(React.createElement, tree)
    
    console.log(react)

    Yields:

    {
      '$$typeof': Symbol(react.element),
      type: 'div',
      key: 'h-1',
      ref: null,
      props: { children: [ [Object], [Object] ] },
      _owner: null,
      _store: {}
    }

    Types

    This package is fully typed with TypeScript. It exports additional Root, Grammar, and Syntax types that model their respective interfaces.

    Data

    If you’re using refractor/lib/core.js, no syntaxes are included. Checked syntaxes are included if you import refractor (or explicitly refractor/lib/common.js). Unchecked syntaxes are available through refractor/lib/all.js. You can import core or common and manually add more languages as you please.

    Prism operates as a singleton: once you register a language in one place, it’ll be 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 importable.

    CSS

    refractor does not inject CSS for the syntax highlighted code (because well, refractor doesn’t have to be turned into HTML and might not run in a browser!). If you are in a browser, you can use any Prism theme. For example, to get Prism Dark from cdnjs:

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.27.0/themes/prism-dark.min.css">

    Compatibility

    This package is at least compatible with all maintained versions of Node.js. As of now, that is Node.js 12.20+, 14.14+, and 16.0+. It also works in Deno and modern browsers.

    Only the custom built syntaxes in refractor/lang/*.js will work with refractor as Prism’s own syntaxes are made to work with global variables and are not importable.

    refractor also does not support Prism plugins, due to the same limitations, and that they almost exclusively deal with the DOM.

    Security

    This package is safe.

    Related

    Projects

    Contribute

    Yes please! See How to Contribute to Open Source.

    License

    MIT © Titus Wormer

    Install

    npm i refractor

    DownloadsWeekly Downloads

    4,354,752

    Version

    4.7.0

    License

    MIT

    Unpacked Size

    1.06 MB

    Total Files

    593

    Last publish

    Collaborators

    • wooorm