@readme/syntax-highlighter 15.0.3 → 16.0.1

package/public/index.js

@@ -1,170 +0,0 @@
-import React from 'react';
-import createRoot from 'react-dom/client';
-
-import syntaxHighlighter, { cmVariableContext } from '../src/index';
-
-const exampleCode = `curl --request POST
-  --url <<url>>
-  --header 'authorization: Bearer 123'
-  --header 'content-type: application/json'`;
-
-const exampleJson = `{
-    "key": "value",
-    "array": [1, 2, 3],
-    "a": {
-      "b": {
-        "c": {
-          "d": "ok",
-          "e": "err"
-        },
-        "f": {
-          "g": "ok"
-        },
-        "h": {
-          "i": "ok"
-        }
-      },
-      "j": {
-        "k": {
-          "l": "ok"
-        }
-      }
-    },
-    "isThing": true
-  }
-  `;
-
-const exampleMarkdown = `# Custom Scrollbars
-
-This is a piece of text that creates scrollbars
-
-Lorem ipsum dolor sit amet, turpis nec facilisis neque vestibulum adipiscing, magna nunc est luctus orci a,
-aliquam duis ad volutpat nostra. Vestibulum ultricies suspendisse commodo volutpat pede sed. Bibendum odio
-dignissim, ad vitae mollis ac sed nibh quis, suspendisse diam, risus quas blandit phasellus luctus nec,
-integer nunc vitae posuere scelerisque. Lobortis quam porta conubia nulla. Et nisl ac, imperdiet vitae ac.
-Parturient sit. Et vestibulum euismod, rutrum nunc libero mauris purus convallis. Cum id adipiscing et eget
-pretium rutrum, ultrices sapien magnis fringilla sit lorem, eu vitae scelerisque ipsum aliquet, magna sed
-fusce vel.
-
-Lectus ultricies libero dolor convallis, sed etiam vel hendrerit egestas viverra, at urna mauris, eget
-vulputate dolor voluptatem, nulla eget sollicitudin. Sed tincidunt, elit sociis. Mattis mi tortor dui id
-sodales mi, maecenas nam fringilla risus turpis mauris praesent, imperdiet maecenas ultrices nonummy tellus
-quis est. Scelerisque nec pharetra quis varius fringilla. Varius vestibulum non dictum pharetra, tincidunt in
-vestibulum iaculis molestie, id condimentum blandit elit urna magna pulvinar, quam suspendisse pellentesque
-donec. Vel amet ad ac. Nec aut viverra, morbi mi neque massa, turpis enim proin. Tellus eu, fermentum velit
-est convallis aliquam velit, rutrum in diam lacus, praesent tempor pellentesque dictum semper augue. Felis
-explicabo massa amet lectus phasellus dolor. Ut lorem quis arcu neque felis ultricies, senectus vitae
-curabitur sed pellentesque et, id sed risus in sed ac accumsan, blandit arcu quam duis nunc.
-
-Sed leo sollicitudin odio vitae, purus sit egestas, justo eros inceptos auctor fermentum lectus. Ligula luctus
-turpis, quod massa vitae elementum orci, nullam fringilla elit tortor. Justo ante tempor amet quam posuere
-volutpat. Facilisis pede erat ut hac ultrices ipsum, wisi duis sit metus. Dolor vitae est sed sed vitae. Sed
-eu ligula, morbi vestibulum nunc nibh velit ut taciti, ligula elit semper sagittis in, auctor arcu vel eget.
-Mauris at vitae nec suspendisse et, aenean proin blandit suscipit. Morbi quam, dolor ultricies. Viverra
-tempus. Suspendisse sit dapibus, ac fuga aenean, magna nisl nonummy augue posuere, dictum ut fuga velit
-parturient augue interdum, mattis sit tellus.
-
-Vehicula commodo tempus curabitur eros, lacinia erat vulputate lorem vel fermentum donec, lectus sed conubia
-id pellentesque. Vel senectus donec pede aliquet dolor sit, nec vivamus justo placerat interdum maecenas,
-sodales euismod. Quis netus sapien amet, vestibulum quam nec amet lacinia, quis aliquet, tempor vivamus tellus
-enim, suscipit quis eleifend. Amet class phasellus orci pretium, risus in nulla. Neque sit ullamcorper,
-ultricies platea id nec suspendisse ac. Et elementum. Dictum nam, ut dui fermentum egestas facilisis elit
-augue, adipiscing donec ipsum erat nam pellentesque convallis, vestibulum vestibulum risus id nulla ut mauris,
-curabitur aute aptent. Ultrices orci wisi dui ipsum praesent, pharetra felis eu quis. Est fringilla etiam,
-maxime sem dapibus et eget, mi enim dignissim nec pretium, augue vehicula, volutpat proin. Et occaecati
-lobortis viverra, cum in sed, vivamus tellus. Libero at malesuada est vivamus leo tortor.`;
-
-const App = () => (
-  <div style={{ margin: '20px' }}>
-    <h1>Core Syntax Highlighter</h1>
-
-    <h2>Dark Theme</h2>
-    <pre id="hub-reference">
-      <cmVariableContext.Provider
-        value={{
-          user: {},
-          defaults: [
-            {
-              name: 'url',
-              default: 'GET',
-            },
-          ],
-        }}
-      >
-        {syntaxHighlighter(exampleCode, 'curl', {
-          dark: true,
-          highlightMode: true,
-          tokenizeVariables: true,
-          ranges: [
-            [
-              { ch: 0, line: 0 },
-              { ch: 0, line: 1 },
-            ],
-            [
-              { ch: 0, line: 4 },
-              { ch: 0, line: 5 },
-            ],
-          ],
-        })}
-      </cmVariableContext.Provider>
-    </pre>
-
-    <h2>Light Theme</h2>
-    <pre id="hub-reference">
-      <cmVariableContext.Provider
-        value={{
-          user: {},
-          defaults: [
-            {
-              name: 'url',
-              default: 'GET',
-            },
-          ],
-        }}
-      >
-        {syntaxHighlighter(exampleCode, 'curl', {
-          dark: false,
-          highlightMode: true,
-          tokenizeVariables: true,
-          ranges: [
-            [
-              { ch: 0, line: 0 },
-              { ch: 0, line: 1 },
-            ],
-            [
-              { ch: 0, line: 4 },
-              { ch: 0, line: 5 },
-            ],
-          ],
-        })}
-      </cmVariableContext.Provider>
-    </pre>
-
-    <hr />
-    <h1>Code Editor</h1>
-    <h2>Dark Theme</h2>
-    <pre id="hub-reference">
-      {syntaxHighlighter(exampleMarkdown, 'md', { scrollbarStyle: 'overlay', editable: true, dark: true })}
-    </pre>
-
-    <h2>Light Theme</h2>
-    <pre id="hub-reference">
-      {syntaxHighlighter(exampleMarkdown, 'md', { scrollbarStyle: 'overlay', editable: true, dark: false })}
-    </pre>
-
-    <hr />
-    <h1>Code Folding</h1>
-    <h2>Dark Theme</h2>
-    <pre id="hub-reference">
-      {syntaxHighlighter(exampleJson, 'json', { foldGutter: true, readOnly: true, dark: true })}
-    </pre>
-
-    <h2>Light Theme</h2>
-    <pre id="hub-reference">
-      {syntaxHighlighter(exampleJson, 'json', { foldGutter: true, readOnly: true, dark: false })}
-    </pre>
-  </div>
-);
-
-const root = createRoot(document.getElementById('root'));
-root.render(<App />);

package/public/index.legacy.js

@@ -1,169 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-
-import syntaxHighlighter, { cmVariableContext } from '../src/index';
-
-const exampleCode = `curl --request POST
-  --url <<url>>
-  --header 'authorization: Bearer 123'
-  --header 'content-type: application/json'`;
-
-const exampleJson = `{
-    "key": "value",
-    "array": [1, 2, 3],
-    "a": {
-      "b": {
-        "c": {
-          "d": "ok",
-          "e": "err"
-        },
-        "f": {
-          "g": "ok"
-        },
-        "h": {
-          "i": "ok"
-        }
-      },
-      "j": {
-        "k": {
-          "l": "ok"
-        }
-      }
-    },
-    "isThing": true
-  }
-  `;
-
-const exampleMarkdown = `# Custom Scrollbars
-
-This is a piece of text that creates scrollbars
-
-Lorem ipsum dolor sit amet, turpis nec facilisis neque vestibulum adipiscing, magna nunc est luctus orci a,
-aliquam duis ad volutpat nostra. Vestibulum ultricies suspendisse commodo volutpat pede sed. Bibendum odio
-dignissim, ad vitae mollis ac sed nibh quis, suspendisse diam, risus quas blandit phasellus luctus nec,
-integer nunc vitae posuere scelerisque. Lobortis quam porta conubia nulla. Et nisl ac, imperdiet vitae ac.
-Parturient sit. Et vestibulum euismod, rutrum nunc libero mauris purus convallis. Cum id adipiscing et eget
-pretium rutrum, ultrices sapien magnis fringilla sit lorem, eu vitae scelerisque ipsum aliquet, magna sed
-fusce vel.
-
-Lectus ultricies libero dolor convallis, sed etiam vel hendrerit egestas viverra, at urna mauris, eget
-vulputate dolor voluptatem, nulla eget sollicitudin. Sed tincidunt, elit sociis. Mattis mi tortor dui id
-sodales mi, maecenas nam fringilla risus turpis mauris praesent, imperdiet maecenas ultrices nonummy tellus
-quis est. Scelerisque nec pharetra quis varius fringilla. Varius vestibulum non dictum pharetra, tincidunt in
-vestibulum iaculis molestie, id condimentum blandit elit urna magna pulvinar, quam suspendisse pellentesque
-donec. Vel amet ad ac. Nec aut viverra, morbi mi neque massa, turpis enim proin. Tellus eu, fermentum velit
-est convallis aliquam velit, rutrum in diam lacus, praesent tempor pellentesque dictum semper augue. Felis
-explicabo massa amet lectus phasellus dolor. Ut lorem quis arcu neque felis ultricies, senectus vitae
-curabitur sed pellentesque et, id sed risus in sed ac accumsan, blandit arcu quam duis nunc.
-
-Sed leo sollicitudin odio vitae, purus sit egestas, justo eros inceptos auctor fermentum lectus. Ligula luctus
-turpis, quod massa vitae elementum orci, nullam fringilla elit tortor. Justo ante tempor amet quam posuere
-volutpat. Facilisis pede erat ut hac ultrices ipsum, wisi duis sit metus. Dolor vitae est sed sed vitae. Sed
-eu ligula, morbi vestibulum nunc nibh velit ut taciti, ligula elit semper sagittis in, auctor arcu vel eget.
-Mauris at vitae nec suspendisse et, aenean proin blandit suscipit. Morbi quam, dolor ultricies. Viverra
-tempus. Suspendisse sit dapibus, ac fuga aenean, magna nisl nonummy augue posuere, dictum ut fuga velit
-parturient augue interdum, mattis sit tellus.
-
-Vehicula commodo tempus curabitur eros, lacinia erat vulputate lorem vel fermentum donec, lectus sed conubia
-id pellentesque. Vel senectus donec pede aliquet dolor sit, nec vivamus justo placerat interdum maecenas,
-sodales euismod. Quis netus sapien amet, vestibulum quam nec amet lacinia, quis aliquet, tempor vivamus tellus
-enim, suscipit quis eleifend. Amet class phasellus orci pretium, risus in nulla. Neque sit ullamcorper,
-ultricies platea id nec suspendisse ac. Et elementum. Dictum nam, ut dui fermentum egestas facilisis elit
-augue, adipiscing donec ipsum erat nam pellentesque convallis, vestibulum vestibulum risus id nulla ut mauris,
-curabitur aute aptent. Ultrices orci wisi dui ipsum praesent, pharetra felis eu quis. Est fringilla etiam,
-maxime sem dapibus et eget, mi enim dignissim nec pretium, augue vehicula, volutpat proin. Et occaecati
-lobortis viverra, cum in sed, vivamus tellus. Libero at malesuada est vivamus leo tortor.`;
-
-const App = () => (
-  <div style={{ margin: '20px' }}>
-    <h1>Core Syntax Highlighter</h1>
-
-    <h2>Dark Theme</h2>
-    <pre id="hub-reference">
-      <cmVariableContext.Provider
-        value={{
-          user: {},
-          defaults: [
-            {
-              name: 'url',
-              default: 'GET',
-            },
-          ],
-        }}
-      >
-        {syntaxHighlighter(exampleCode, 'curl', {
-          dark: true,
-          highlightMode: true,
-          tokenizeVariables: true,
-          ranges: [
-            [
-              { ch: 0, line: 0 },
-              { ch: 0, line: 1 },
-            ],
-            [
-              { ch: 0, line: 4 },
-              { ch: 0, line: 5 },
-            ],
-          ],
-        })}
-      </cmVariableContext.Provider>
-    </pre>
-
-    <h2>Light Theme</h2>
-    <pre id="hub-reference">
-      <cmVariableContext.Provider
-        value={{
-          user: {},
-          defaults: [
-            {
-              name: 'url',
-              default: 'GET',
-            },
-          ],
-        }}
-      >
-        {syntaxHighlighter(exampleCode, 'curl', {
-          dark: false,
-          highlightMode: true,
-          tokenizeVariables: true,
-          ranges: [
-            [
-              { ch: 0, line: 0 },
-              { ch: 0, line: 1 },
-            ],
-            [
-              { ch: 0, line: 4 },
-              { ch: 0, line: 5 },
-            ],
-          ],
-        })}
-      </cmVariableContext.Provider>
-    </pre>
-
-    <hr />
-    <h1>Code Editor</h1>
-    <h2>Dark Theme</h2>
-    <pre id="hub-reference">
-      {syntaxHighlighter(exampleMarkdown, 'md', { scrollbarStyle: 'overlay', editable: true, dark: true })}
-    </pre>
-
-    <h2>Light Theme</h2>
-    <pre id="hub-reference">
-      {syntaxHighlighter(exampleMarkdown, 'md', { scrollbarStyle: 'overlay', editable: true, dark: false })}
-    </pre>
-
-    <hr />
-    <h1>Code Folding</h1>
-    <h2>Dark Theme</h2>
-    <pre id="hub-reference">
-      {syntaxHighlighter(exampleJson, 'json', { foldGutter: true, readOnly: true, dark: true })}
-    </pre>
-
-    <h2>Light Theme</h2>
-    <pre id="hub-reference">
-      {syntaxHighlighter(exampleJson, 'json', { foldGutter: true, readOnly: true, dark: false })}
-    </pre>
-  </div>
-);
-
-ReactDOM.render(<App />, document.getElementById('root'));

package/src/codeEditor/cm.options.ts

@@ -1,11 +0,0 @@
-/**
- * Full list of config options here:
- *  https://codemirror.net/doc/manual.html#config
- */
-const codeMirrorOptions = {
-  theme: 'material-palenight',
-  tabSize: 2,
-  lineNumbers: true,
-} as const;
-
-export default codeMirrorOptions;

package/src/codeEditor/index.tsx

@@ -1,55 +0,0 @@
-import type { ICodeMirror } from 'react-codemirror2';
-
-import React, { useEffect, useState } from 'react';
-import { Controlled as CodeMirror } from 'react-codemirror2';
-
-import '../utils/cm-mode-imports';
-import { getMode } from '../utils/modes';
-
-import defaults from './cm.options';
-import './style.scss';
-
-const CodeEditor: React.FC<{
-  children?: string;
-  className?: string;
-  code?: string;
-  lang?: string;
-  options?: ICodeMirror['options'];
-  theme?: 'material-palenight' | 'neo' | 'tomorrow-night';
-}> = ({
-  className = '', // unused, I think on purpose? but not sure
-  code = '',
-  lang,
-  options = {},
-  children,
-  theme = 'material-palenight',
-  ...attr
-}) => {
-  const [value, setValue] = useState(children && typeof children === 'string' ? children : code);
-  const [mode, setMode] = useState(getMode(lang as string));
-
-  useEffect(() => {
-    const incValue = children && typeof children === 'string' ? children : code;
-    setValue(incValue);
-  }, [code, children]);
-
-  useEffect(() => {
-    setMode(prevMode => {
-      const newMode = getMode(lang as string);
-      if (newMode !== prevMode) return newMode;
-      return prevMode;
-    });
-  }, [lang]);
-
-  return (
-    <CodeMirror
-      {...attr}
-      className="CodeEditor"
-      onBeforeChange={(editor, data, updatedCode) => setValue(updatedCode)}
-      options={{ ...defaults, ...options, mode, theme }}
-      value={value as string}
-    />
-  );
-};
-
-export default CodeEditor;

package/src/codeEditor/style.scss

@@ -1,6 +0,0 @@
-.CodeEditor {
-  @import '~codemirror/lib/codemirror.css';
-  @import '~codemirror/theme/material-palenight.css';
-  @import '~codemirror/theme/neo.css';
-  @import '~codemirror/addon/fold/foldgutter.css';
-}

package/src/codeMirror/index.jsx

@@ -1,260 +0,0 @@
-import Variable, { MDX_VARIABLE_REGEXP, VARIABLE_REGEXP, VariablesContext } from '@readme/variable';
-import CodeMirror from 'codemirror';
-import 'codemirror/addon/fold/brace-fold';
-import 'codemirror/addon/fold/foldgutter';
-import 'codemirror/addon/runmode/runmode';
-import 'codemirror/addon/scroll/simplescrollbars';
-import 'codemirror/addon/scroll/simplescrollbars.css';
-import 'codemirror/mode/meta';
-import PropTypes from 'prop-types';
-import React from 'react';
-
-import '../utils/cm-mode-imports';
-import { getMode } from '../utils/modes.ts';
-
-import './style.scss';
-
-// Pre output conversion
-// CodeMirror "Gutter" -> Apply line numbers to styled lines
-const defaultLineJsx = line => (
-  <span key={`ln-${line}`} className="cm-lineNumber">
-    {line}
-  </span>
-);
-
-// Wrap children elements, seperated by line into divs
-// Simple styling wrapper
-const WrappedLine = ({ className, child }) => <div className={className}>{child}</div>;
-
-WrappedLine.propTypes = {
-  child: PropTypes.any,
-  className: PropTypes.string,
-};
-
-// Final Styled Output
-// Includes Highlighted | Overlayed | null styled lines
-const StructuredOutput = ({ gutteredInput, highlights = [] }) =>
-  gutteredInput.map((ac, idx) => {
-    return (
-      <WrappedLine
-        key={`cm-wrapped-${idx}`}
-        child={ac}
-        className={['cm-linerow', highlights.length ? highlights[idx] : ''].join(' ')}
-      />
-    );
-  });
-
-StructuredOutput.propTypes = {
-  gutteredInput: PropTypes.any,
-  highlights: PropTypes.arrayOf(PropTypes.string),
-};
-
-/**
- * Generate an array of classNames
- *
- * @arg {[][]{line: Int}} ranges
- * @return {[String]} Consumable classNames
- */
-const highlightedLines = (ranges, totalLength) => {
-  const highlights = [];
-
-  ranges.forEach(([anchor, head]) => {
-    const end = head.line;
-    let position = anchor.line;
-
-    while (position < end) {
-      highlights[position] = 'cm-highlight';
-      position += 1;
-    }
-  });
-
-  for (let i = 0; i < totalLength; i += 1) {
-    if (!highlights[i]) highlights[i] = 'cm-overlay';
-  }
-
-  return highlights;
-};
-
-const StyledSyntaxHighlighter = ({ output, ranges }) => {
-  const lineBreakRegex = /\r?\n/;
-  const gutteredOutput = [];
-  let bucket = [];
-  let lineNumber = 1;
-
-  const incrementLine = newLine => {
-    // If new line, we'll manually add it to a bucket
-    if (newLine) bucket.push('\n');
-    // Regardless, we'll add the bucket to our larger output and start a new numbered div
-    gutteredOutput.push(bucket);
-    lineNumber += 1;
-    bucket = [defaultLineJsx(lineNumber)];
-  };
-
-  const enumerateMatches = (o, final) => {
-    // Case where a single line break
-    if (o.length === 1 && lineBreakRegex.test(o)) {
-      incrementLine(true);
-      // Case with multiple consecutive line breaks
-    } else {
-      const matches = o.split(lineBreakRegex);
-      matches.forEach(m => {
-        if (m.length) {
-          bucket.push(m);
-          // If we've found a match right before the end of our output, we pad it
-          if (final) incrementLine();
-        } else {
-          incrementLine(true);
-        }
-      });
-    }
-  };
-
-  output.unshift(defaultLineJsx(1));
-  output.forEach((o, idx) => {
-    if (idx === output.length - 1) {
-      if (typeof o === 'string') enumerateMatches(o, true);
-      else {
-        bucket.push(o);
-        gutteredOutput.push(bucket);
-      }
-    } else if (!lineBreakRegex.test(o)) {
-      bucket.push(o);
-    } else if (typeof o === 'string') {
-      enumerateMatches(o);
-    }
-  });
-
-  const highlights = ranges && ranges.length ? highlightedLines(ranges, gutteredOutput.length) : [];
-  return (
-    <div className="CodeMirror" data-testid="CodeMirror">
-      <StructuredOutput gutteredInput={gutteredOutput} highlights={highlights} />
-    </div>
-  );
-};
-
-/*
- * ReadMe user variables are written like <<var>>. Depending on the
- * language parser used by CodeMirror, that could get parsed into
- * multiple tokens, ie ['<<', 'var', '>>']. So, we do a first pass to
- * remove the variables. And reinsert them after CodeMirror has done its
- * parsing.
- */
-const makeReinserter = variables => {
-  let offset = 0;
-  let variable = variables.shift();
-
-  const reinsertVariables = token => {
-    if (!variable) return token;
-
-    if (offset <= variable.offset && variable.offset <= offset + token.length) {
-      const tokenOffset = variable.offset - offset;
-      const [before, after] = [token.slice(0, tokenOffset), token.slice(tokenOffset)];
-      const variableComponent = <Variable key={`variable-${offset}`} variable={variable.text} />;
-
-      offset += tokenOffset;
-      variable = variables.shift();
-
-      return [before, variableComponent, reinsertVariables(after)];
-    }
-
-    offset += token.length;
-    return token;
-  };
-
-  return reinsertVariables;
-};
-
-const extractVariables = (code, opts) => {
-  if (!opts.tokenizeVariables) return [code, text => text];
-
-  let offsetDelta = 0;
-  const variables = [];
-
-  const extracter = (match, ...rest) => {
-    const unescaped = opts.mdx
-      ? match.replace(/^\\{/, '{').replace(/\\}$/, '}')
-      : match.replace(/^\\<</, '<<').replace(/\\>>$/, '>>');
-
-    if (unescaped !== match) {
-      return unescaped;
-    }
-
-    const capture = rest[opts.mdx ? 1 : 0];
-    const offset = rest[opts.mdx ? 3 : 1];
-
-    variables.push({ text: capture, offset: offset - offsetDelta });
-    offsetDelta += match.length;
-
-    return '';
-  };
-
-  const regexp = opts.mdx ? MDX_VARIABLE_REGEXP : VARIABLE_REGEXP;
-  const codeWithoutVars = code.replace(new RegExp(regexp, 'g'), extracter);
-
-  return [codeWithoutVars, makeReinserter(variables)];
-};
-
-StyledSyntaxHighlighter.propTypes = {
-  output: PropTypes.arrayOf(PropTypes.any),
-  ranges: PropTypes.arrayOf(PropTypes.any),
-};
-
-/**
- * Core Syntax Highlighter
- * @arg {String} code
- * @arg {String} lang
- * @arg {{}} opts
- * @return {[Element]} Array of DOM Elements
- */
-const ReadmeCodeMirror = (
-  code,
-  lang,
-  opts = { tokenizeVariables: false, highlightMode: false, ranges: [] },
-  { mdx = false } = {},
-) => {
-  const mode = getMode(lang);
-  const output = [];
-
-  const [codeWithoutVars, reinsertVariables] = extractVariables(code, { scrollbarStyle: 'overlay', mdx, ...opts });
-
-  let curStyle = null;
-  let accum = '';
-  let key = 0;
-
-  function flush() {
-    const token = reinsertVariables(accum);
-
-    const styledToken = curStyle ? (
-      // oxlint-disable-next-line no-plusplus
-      <span key={key++} className={`${curStyle.replace(/(^|\s+)/g, '$1cm-')}`}>
-        {token}
-      </span>
-    ) : (
-      token
-    );
-
-    output.push(styledToken);
-  }
-
-  CodeMirror.runMode(codeWithoutVars, mode, (text, style) => {
-    const lineBreakRegex = /\r?\n/;
-    if (style !== curStyle || (opts.highlightMode && lineBreakRegex.test(text))) {
-      flush();
-      curStyle = style;
-      accum = text;
-    } else {
-      accum += text;
-    }
-  });
-  flush();
-
-  // Return legacy DOM structure
-  // Array of <span /> elements
-  if (!opts.highlightMode) return output;
-  // Return Codemirror-Styled DOM structure
-  // Includes line numbers, styling, optional highlighting
-  return <StyledSyntaxHighlighter output={output} ranges={opts.ranges} />;
-};
-
-export default ReadmeCodeMirror;
-export { VariablesContext };