From b46fd34336a2169351cb64644423407b0c54e58d Mon Sep 17 00:00:00 2001 From: Tom Auger Date: Sat, 20 Jan 2018 23:44:30 +0000 Subject: [PATCH 1/2] Refactor markdown rendering into separate module --- lib/core/Remarkable.js | 72 ++------------------------------ lib/core/renderMarkdown.js | 85 ++++++++++++++++++++++++++++++++++++++ 2 files changed, 88 insertions(+), 69 deletions(-) create mode 100644 lib/core/renderMarkdown.js diff --git a/lib/core/Remarkable.js b/lib/core/Remarkable.js index 75d45e92af2d..c25cdcfdcbf3 100644 --- a/lib/core/Remarkable.js +++ b/lib/core/Remarkable.js @@ -1,37 +1,17 @@ 'use strict'; const React = require('react'); -const hljs = require('highlight.js'); -const Markdown = require('remarkable'); -const toSlug = require('./toSlug.js'); +const renderMarkdown = require('./renderMarkdown.js'); const CWD = process.cwd(); -/** - * The anchors plugin adds GFM-style anchors to headings. - */ -function anchors(md) { - md.renderer.rules.heading_open = function(tokens, idx /*, options, env */) { - const textToken = tokens[idx + 1]; - return ( - '' - ); - }; -} - class Remarkable extends React.Component { content() { if (this.props.source) { return ( ); @@ -39,9 +19,7 @@ class Remarkable extends React.Component { return React.Children.map(this.props.children, child => { if (typeof child === 'string') { return ( - + ); } else { return child; @@ -50,50 +28,6 @@ class Remarkable extends React.Component { } } - renderMarkdown(source) { - if (!this.md) { - const siteConfig = require(CWD + '/siteConfig.js'); - - this.md = new Markdown({ - // Highlight.js expects hljs css classes on the code element. - // This results in 

-        langPrefix: 'hljs css ',
-        highlight: function(str, lang) {
-          lang =
-            lang || (siteConfig.highlight && siteConfig.highlight.defaultLang);
-          if (lang && hljs.getLanguage(lang)) {
-            try {
-              return hljs.highlight(lang, str).value;
-            } catch (err) {}
-          }
-
-          try {
-            return hljs.highlightAuto(str).value;
-          } catch (err) {}
-
-          return '';
-        },
-        html: true,
-        linkify: true,
-      });
-
-      // Register anchors plugin
-      this.md.use(anchors);
-
-      // Allow client sites to register their own plugins
-      if (siteConfig.markdownPlugins) {
-        siteConfig.markdownPlugins.forEach(function(plugin) {
-          this.md.use(plugin);
-        }, this);
-      }
-    }
-    const html = this.md.render(source);
-
-    // Ensure fenced code blocks use Highlight.js hljs class
-    // https://github.com/jonschlinkert/remarkable/issues/224
-    return html.replace(/
/g, '
');
-  }
-
   render() {
     var Container = this.props.container;
 
diff --git a/lib/core/renderMarkdown.js b/lib/core/renderMarkdown.js
new file mode 100644
index 000000000000..bafa5d4da5bd
--- /dev/null
+++ b/lib/core/renderMarkdown.js
@@ -0,0 +1,85 @@
+/**
+ * Copyright (c) 2017-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+const hljs = require('highlight.js');
+const Markdown = require('remarkable');
+const toSlug = require('./toSlug.js');
+
+const CWD = process.cwd();
+
+/**
+ * The anchors plugin adds GFM-style anchors to headings.
+ */
+function anchors(md) {
+  md.renderer.rules.heading_open = function(tokens, idx /*, options, env */) {
+    const textToken = tokens[idx + 1];
+    return (
+      ''
+    );
+  };
+}
+
+class MarkdownRenderer {
+  constructor() {
+    const siteConfig = require(CWD + '/siteConfig.js');
+
+    const md = new Markdown({
+      // Highlight.js expects hljs css classes on the code element.
+      // This results in 

+      langPrefix: 'hljs css ',
+      highlight: function(str, lang) {
+        lang =
+          lang || (siteConfig.highlight && siteConfig.highlight.defaultLang);
+        if (lang && hljs.getLanguage(lang)) {
+          try {
+            return hljs.highlight(lang, str).value;
+          } catch (err) {}
+        }
+
+        try {
+          return hljs.highlightAuto(str).value;
+        } catch (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(function(plugin) {
+        md.use(plugin);
+      });
+    }
+
+    this._md = md;
+  }
+
+  toHtml(source) {
+    const html = this._md.render(source);
+
+    // Ensure fenced code blocks use Highlight.js hljs class
+    // https://github.com/jonschlinkert/remarkable/issues/224
+    return html.replace(/
/g, '
');
+  }
+}
+
+const renderMarkdown = new MarkdownRenderer();
+
+module.exports = source => {
+  return renderMarkdown.toHtml(source);
+};

From 5958aa93cb4017dd54a6f405a3b718c5820a9d7b Mon Sep 17 00:00:00 2001
From: Tom Auger 
Date: Sun, 21 Jan 2018 00:21:22 +0000
Subject: [PATCH 2/2] Render blog feed description in html

---
 lib/server/feed.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/lib/server/feed.js b/lib/server/feed.js
index 8b2674729dc5..eb39c651c2eb 100644
--- a/lib/server/feed.js
+++ b/lib/server/feed.js
@@ -19,6 +19,8 @@ const blogFolder = path.resolve('../blog/');
 const blogRootURL = siteConfig.url + '/blog';
 const jestImage = siteConfig.url + '/' + siteConfig.headerIcon;
 
+const renderMarkdown = require('../core/renderMarkdown.js');
+
 /****************************************************************************/
 
 let readMetadata;
@@ -63,6 +65,8 @@ module.exports = function(type) {
       }
     }
 
+    content = renderMarkdown(content);
+
     feed.addItem({
       title: post.title,
       link: url,