codemirror_based_code_highlighter_for_react.js

import React from "react";
import CodeMirror from "codemirror";

// Adapted from CodeMirror runMode, updated to output React components.
export class HighlightCode extends React.Component {
  render() {
    const {value: string} = this.props;
    const nodes = [];

    const mode = CodeMirror.getMode(CodeMirror.defaults, "r-javascript");
    const tabSize = CodeMirror.defaults.tabSize;
    let col = 0;

    function callback(text, style) {
      if (text == "\n") {
        nodes.push(<>{text}</>);
        col = 0;
        return;
      }
      let content = "";
      // replace tabs
      for (let pos = 0; ; ) {
        let idx = text.indexOf("\t", pos);
        if (idx == -1) {
          content += text.slice(pos);
          col += text.length - pos;
          break;
        } else {
          col += idx - pos;
          content += text.slice(pos, idx);
          let size = tabSize - (col % tabSize);
          col += size;
          for (let i = 0; i < size; ++i) content += " ";
          pos = idx + 1;
        }
      }

      if (style) {
        nodes.push(
          <span className={"cm-" + style.replace(/ +/g, " cm-")}>
            {content}
          </span>
        );
      } else {
        nodes.push(<>{content}</>);
      }
    }

    const lines = CodeMirror.splitLines(string);
    const state = CodeMirror.startState(mode);
    for (let i = 0, e = lines.length; i < e; ++i) {
      if (i) callback("\n");
      const stream = new CodeMirror.StringStream(lines[i]);
      if (!stream.string && mode.blankLine) mode.blankLine(state);
      while (!stream.eol()) {
        let style = mode.token(stream, state);
        callback(stream.current(), style, i, stream.start, state);
        stream.start = stream.pos;
      }
    }
    let key = 0;
    return (
      <code>
        <pre>
          {nodes.map(node =>
            React.cloneElement(node, {
              key: ++key
            })
          )}
        </pre>
      </code>
    );
  }
}