How to use refractor - 10 common examples
To help you get started, we’ve selected a few refractor examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
j0lv3r4 / jolvera.dev / mdx-prism / index.js View on Github 
const className = getLangClass(node);
const { highlightLines, splitLanguage } = parseLineNumberRange(className);
const lang = getLanguage(splitLanguage);
const markers = highlightLines;
if (lang === null) {
return;
}
let result;
try {
parent.properties.className = (parent.properties.className || []).concat(
"language-" + lang
);
result = refractor.highlight(nodeToString(node), lang);
if (markers && markers.length > 0) {
// This blocks attempts this fix:
// https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-remark-prismjs/src/directives.js#L113-L119
const PLAIN_TEXT_WITH_LF_TEST = /<span class="token plain-text">[^<]*\n[^<]*<\/span>/g;
// AST to HTML
let html_ = rehype()
.stringify({ type: "root", children: result })
.toString();
// Fix JSX issue
html_ = html_.replace(PLAIN_TEXT_WITH_LF_TEST, match => {
return match.replace(
/\n/g,
'</span>\n<span class="token plain-text">'</span>import * as React from "react";
import styled from "styled-components";
const refractor = require("refractor/core.js");
const toh = require("hast-to-hyperscript");
// in core: css
refractor.register(require("refractor/lang/less.js"));
refractor.register(require("refractor/lang/scss.js"));
refractor.register(require("refractor/lang/stylus.js"));
// in core: js
refractor.register(require("refractor/lang/jsx.js"));
refractor.register(require("refractor/lang/typescript.js"));
refractor.register(require("refractor/lang/tsx.js"));
refractor.register(require("refractor/lang/json.js"));
// in core: xml, html, svg
refractor.register(require("refractor/lang/markdown.js"));
refractor.register(require("refractor/lang/bash.js"));
refractor.register(require("refractor/lang/diff.js"));
module.exports.highlight = highlight;"interpolation-punctuation": {
pattern: /^\$\{|\}$/,
alias: "punctuation"
},
rest: refract.languages.jsx
}
},
string: {
pattern: /[^$;]+/,
inside: refract.languages.css,
alias: "language-css"
}
}
}
};
refract.languages.insertBefore("jsx", "template-string", styledHighlight);
refract.languages.insertBefore("js", "template-string", styledHighlight);
const withMDX = require("@next/mdx")({
extension: /\.mdx?$/,
options: {
// $FlowIssue
hastPlugins: [require("@mapbox/rehype-prism")]
}
});
const fs = require("fs");
const { join } = require("path");
const generateJsonFeed = require("./data/generate-json-feed");
const { promisify } = require("util");
const copyFile = promisify(fs.copyFile);
const staticFilesToCopy = ["favicon.ico"];// NOTE: This highlights template-strings as strings of CSS
const styledHighlight = {
"styled-template-string": {
pattern: /(styled(\.\w+|\([^\)]*\))(\.\w+(\([^\)]*\))*)*|css|injectGlobal|createGlobalStyle|keyframes|\.extend|\.withComponent)`(?:\$\{[^}]+\}|\\\\|\\?[^\\])*?`/,
lookbehind: true,
greedy: true,
inside: {
interpolation: {
pattern: /\$\{[^}]+\}/,
inside: {
"interpolation-punctuation": {
pattern: /^\$\{|\}$/,
alias: "punctuation"
},
rest: refract.languages.jsx
}
},
string: {
pattern: /[^$;]+/,
inside: refract.languages.css,
alias: "language-css"
}
}
}
};
refract.languages.insertBefore("jsx", "template-string", styledHighlight);
refract.languages.insertBefore("js", "template-string", styledHighlight);
const withMDX = require("@next/mdx")({
extension: /\.mdx?$/,
options: {import refractor from 'refractor';
import text from './text-language';
import './prism.css';
import './prism.overrides.scss';
// This is needed to provide a fallback in `getLanguage()` when the mime type
// has no corresponding syntax highlighting language.
refractor.register(text);
export default refractor;export default ({ children, className }) => (
<pre> {className ? (
<code>
) : (
<code>{children}</code>
)}
<style>
{`
pre {
background-color: var(--lighter-gray);
color: var(--fg);
padding: 1rem;
border-radius: 5px;
font-size: 1rem;</style></code></pre>if (!parent || parent.tagName !== 'pre' || node.tagName !== 'code') {
return
}
const lang = getLanguage(node, options.aliases || aliases)
if (lang === null) {
return
}
let result = node
try {
parent.properties.className = (parent.properties.className || []).concat(
'language-' + lang,
)
result = refractor.highlight(nodeToString(node), lang)
} catch (err) {
if (/Unknown language/.test(err.message)) {
return
}
throw err
}
node.children = []
node.properties.dangerouslySetInnerHTML = {
__html: nodeToHTML({
type: 'root',
children: result,
}),
}
}
}function visitor(node, index, parent) {
if (!parent || parent.tagName !== 'pre' || node.tagName !== 'code') {
return;
}
const lang = getLanguage(node);
if (lang === null) {
return;
}
let result;
try {
parent.properties.className = (parent.properties.className || [])
.concat('language-' + lang);
result = refractor.highlight(nodeToString(node), lang);
} catch (err) {
if (options.ignoreMissing && /Unknown language/.test(err.message)) {
return;
}
throw err;
}
node.children = result;
}
};if (!parent || parent.tagName !== 'pre' || node.tagName !== 'code') {
return
}
const lang = getLanguage(node, options.aliases || aliases)
if (lang === null) {
return
}
let result = node
try {
parent.properties.className = (parent.properties.className || []).concat(
'language-' + lang,
)
result = refractor.highlight(nodeToString(node), lang)
} catch (err) {
if (/Unknown language/.test(err.message)) {
return
}
throw err
}
node.children = []
node.properties.dangerouslySetInnerHTML = {
__html: nodeToHTML({
type: 'root',
children: result,
}),
}
}
}protected init() {
super.init();
for (const language of this.options.supportedLanguages) {
refractor.register(language);
}
}refractor
Lightweight, robust, elegant virtual syntax highlighting using Prism
