elements-default.js

import { Renderer } from 'marked';
import Markdown from '~components/markdown';
import CodeMirror from 'codemirror';
import 'codemirror/addon/runmode/runmode';
import 'codemirror/mode/ruby/ruby';
import 'codemirror/mode/xml/xml';
import 'codemirror/mode/javascript/javascript';
import 'codemirror/mode/css/css';
import 'codemirror/mode/htmlmixed/htmlmixed';
import '~utils/gfm+table';

const renderCode = (code, lang) => {
  const output = document.createElement('pre');

  CodeMirror.runMode(code, lang, output);

  return `<pre class="highlight">${output.innerHTML}</pre>`;
};

const renderTable = (header, body) => {
  if (body) {
    body = `<tbody>${body}</tbody>`;
  }

  return `<table class="table is-bordered is-striped"><thead>${header}</thead>${body}</table>`;
};

const renderer = new Renderer();
renderer.code = renderCode;
renderer.table = renderTable;

const DefaultElement = ({ content, wrap = true, trim = false }) =>
  <Markdown markdown={content} markupOpts={{ trim, wrap }} markdownOpts={{ renderer }} />;

export default DefaultElement;