[BREAKING] Rename Marked to MarkdownBlock (#162)

* Switch to Remarkable

* Clean up references to custom code blocks

* Remove valdiateDOMNesting warning

* Add syntax highlighting

* Add Reason support

* Breaking change: prismColor to codeColor, remove CompLibrary.Prism, expose hljs

* Completely remove Prism and associated CSS rules

* Support loading plugins and scripts

* Remove CSS rules, allowing Highlight.js theme to be used entirely

* Remove unnecessary webplayer script

* Rename Marked to MarkdownBlock

* Rename Marked to MarkdownBlock

* Remove Marked.js

docs/api-pages.md

@@ -22,16 +22,16 @@ If you wish to use your own components inside the website folder, use `process.c
 
 Docusaurus provides the following components in `CompLibrary`:
 
-### `CompLibrary.Marked` 
+### `CompLibrary.MarkdownBlock` 
 
-A React component that parses Markdown to html.
+A React component that parses markdown and renders to HTML.
 
 Example:
 
 ```jsx
-const Marked = CompLibrary.Marked;
+const MarkdownBlock = CompLibrary.MarkdownBlock;
 
-<Marked>[Markdown syntax for a link](http://www.example.com)</Marked>
+<MarkdownBlock>[Markdown syntax for a link](http://www.example.com)</MarkdownBlock>
 ```
 
 ### `CompLibrary.Container`

examples/basics/pages/en/index.js

@@ -8,7 +8,7 @@
 const React = require("react");
 
 const CompLibrary = require("../../core/CompLibrary.js");
-const Marked = CompLibrary.Marked; /* Used to read markdown */
+const MarkdownBlock = CompLibrary.MarkdownBlock; /* Used to read markdown */
 const Container = CompLibrary.Container;
 const GridBlock = CompLibrary.GridBlock;
 
@@ -126,7 +126,7 @@ class Index extends React.Component {
             style={{ textAlign: "center" }}
           >
             <h2>Feature Callout</h2>
-            <Marked>These are features of this project</Marked>
+            <MarkdownBlock>These are features of this project</MarkdownBlock>
           </div>
 
           <Container padding={["bottom", "top"]} background="light">

lib/core/BlogPost.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-const Marked = require("./Marked.js");
+const MarkdownBlock = require("./MarkdownBlock.js");
 const React = require("react");
 
 // inner blog component for the article itself, without sidebar/header/footer
@@ -28,12 +28,12 @@ class BlogPost extends React.Component {
       content = content.split("<!--truncate-->")[0];
       return (
         <article className="post-content">
-          <Marked>{content}</Marked>
+          <MarkdownBlock>{content}</MarkdownBlock>
           {hasSplit}
         </article>
       );
     }
-    return <Marked>{content}</Marked>;
+    return <MarkdownBlock>{content}</MarkdownBlock>;
   }
 
   renderAuthorPhoto() {

lib/core/CompLibrary.js

@@ -5,13 +5,13 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-const Marked = require("./Marked.js");
+const MarkdownBlock = require("./MarkdownBlock.js");
 const Container = require("./Container.js");
 const GridBlock = require("./GridBlock.js");
 
-// collection of other components to provide to users
+// A collection of components to provide to users
 module.exports = {
-  Marked: Marked,
+  MarkdownBlock: MarkdownBlock,
   Container: Container,
   GridBlock: GridBlock
 };

lib/core/Doc.js

@@ -6,7 +6,7 @@
  */
 
 const React = require("react");
-const Marked = require("./Marked.js");
+const MarkdownBlock = require("./MarkdownBlock.js");
 
 const translate = require("../server/translate.js").translate;
 
@@ -51,7 +51,7 @@ class Doc extends React.Component {
           <h1>{this.props.title}</h1>
         </header>
         <article>
-          <Marked>{this.props.content}</Marked>
+          <MarkdownBlock>{this.props.content}</MarkdownBlock>
         </article>
       </div>
     );

lib/core/GridBlock.js

@@ -8,7 +8,7 @@
 const React = require("react");
 const classNames = require("classnames");
 
-const Marked = require("./Marked.js");
+const MarkdownBlock = require("./MarkdownBlock.js");
 
 class GridBlock extends React.Component {
   renderBlock(block) {
@@ -38,9 +38,9 @@ class GridBlock extends React.Component {
         {topLeftImage}
         <div className="blockContent">
           {this.renderBlockTitle(block.title)}
-          <Marked>
+          <MarkdownBlock>
             {block.content}
-          </Marked>
+          </MarkdownBlock>
         </div>
         {bottomRightImage}
       </div>
@@ -73,9 +73,9 @@ class GridBlock extends React.Component {
     if (title) {
       return (
         <h2>
-          <Marked>
+          <MarkdownBlock>
             {title}
-          </Marked>
+          </MarkdownBlock>
         </h2>
       );
     } else {

lib/core/MarkdownBlock.js

@@ -5,12 +5,14 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-/* Marked component is used to parse markdown to html */
+/**
+ * The MarkdownBlock component is used to parse markdown and render to HTML.
+ */
 
 const React = require('react');
 const Remarkable = require('./Remarkable');
 
-class Marked extends React.Component {
+class MarkdownBlock extends React.Component {
   render() {
     return (
       <Remarkable source={this.props.children} />
@@ -18,4 +20,5 @@ class Marked extends React.Component {
   }
 }
 
-module.exports = Marked;
+module.exports = MarkdownBlock;
+

lib/server/server.js

@@ -239,7 +239,7 @@ function execute(port) {
     if (metadata.layout && siteConfig.layouts[metadata.layout]) {
       Doc = siteConfig.layouts[metadata.layout]({
         React,
-        Marked: require("../core/Marked.js")
+        MarkdownBlock: require("../core/MarkdownBlock.js")
       });
     }
 

website/pages/en/index.js

@@ -8,9 +8,9 @@
 const React = require("react");
 
 const CompLibrary = require("../../core/CompLibrary.js");
-const Marked = CompLibrary.Marked; /* Used to read markdown */
 const Container = CompLibrary.Container;
 const GridBlock = CompLibrary.GridBlock;
+const MarkdownBlock = CompLibrary.MarkdownBlock; /* Used to read markdown */
 
 const siteConfig = require(process.cwd() + "/siteConfig.js");
 

website/siteConfig.js

@@ -71,4 +71,5 @@ const siteConfig = {
   }
 };
 
+
 module.exports = siteConfig;