feat: add React component to render Markdown

lib/core/components/Markdown/index.js

@@ -0,0 +1,115 @@
+/* eslint-disable react/no-danger */
+
+const React = require('react');
+const Markdown = require('remarkable');
+const hljs = require('highlight.js');
+const prismjs = require('prismjs');
+
+const anchors = require('./anchors.js');
+
+class MarkdownBlock extends React.Component {
+  content() {
+    if (this.props.source) {
+      return (
+        <span
+          dangerouslySetInnerHTML={{
+            __html: this.renderMarkdown(this.props.source)
+          }}
+        />
+      );
+    }
+    return React.Children.map(this.props.children, child => {
+      if (typeof child === 'string') {
+        return (
+          <span
+            dangerouslySetInnerHTML={{__html: this.renderMarkdown(child)}}
+          />
+        );
+      }
+      return child;
+    });
+  }
+
+  renderMarkdown(source) {
+    const alias = {
+      js: 'jsx'
+    };
+    const {siteConfig} = this.props;
+    const md = new Markdown({
+      langPrefix: 'hljs css language-',
+      highlight(str, reqLang) {
+        const lang =
+          reqLang || (siteConfig.highlight && siteConfig.highlight.defaultLang);
+        if (lang === 'text') {
+          return str;
+        }
+        if (lang) {
+          try {
+            if (
+              siteConfig.usePrism === true ||
+              (siteConfig.usePrism &&
+                siteConfig.usePrism.length > 0 &&
+                siteConfig.usePrism.indexOf(lang) !== -1)
+            ) {
+              try {
+                const language = alias[lang] || lang;
+                // Currently people using prismjs on Node have to individually require()
+                // every single language (https://github.com/PrismJS/prism/issues/593)
+                require(`prismjs/components/prism-${language}.min`); // eslint-disable-line
+                return prismjs.highlight(str, prismjs.languages[language]);
+              } catch (err) {
+                console.error(err);
+              }
+            }
+            if (hljs.getLanguage(lang)) {
+              return hljs.highlight(lang, str).value;
+            }
+          } catch (err) {
+            console.error(err);
+          }
+        }
+
+        try {
+          return hljs.highlightAuto(str).value;
+        } catch (err) {
+          console.error(err);
+        }
+
+        return '';
+      },
+      html: true,
+      linkify: true
+    });
+
+    // Register anchors plugin
+    md.use(anchors);
+
+    // Allow client sites to register their own plugins
+    if (siteConfig.markdownPlugins) {
+      siteConfig.markdownPlugins.forEach(plugin => {
+        md.use(plugin);
+      });
+    }
+
+    const html = md.render(source);
+
+    // Ensure fenced code blocks use Highlight.js hljs class
+    // https://github.com/jonschlinkert/remarkable/issues/224
+    return html.replace(/<pre><code>/g, '<pre><code class="hljs">');
+  }
+
+  render() {
+    const Container = this.props.container;
+    if (!Container) {
+      return <div>{this.content()}</div>;
+    }
+    return <Container>{this.content()}</Container>;
+  }
+}
+
+MarkdownBlock.defaultProps = {
+  container: 'div',
+  siteConfig: {}
+};
+
+export default MarkdownBlock;