[markdown] Remove client-side syntax highlighting (#189)

* Remove client side highlighting

* Update CSS rules to render plain code blocks with expected left border

* Add back codeColor background color config

* Ensure all pre code blocks use Highlight.js classes

docs/api-doc-markdown.md

@@ -17,7 +17,7 @@ Documents use the following markdown header fields that are enclosed by a line `
 
 For example:
 
-```
+```markdown
 ---
 id: doc1
 title: My Document
@@ -29,7 +29,7 @@ Versioned documents have their ids altered to include the version number when th
 
 For example:
 
-```
+```markdown
 ---
 id: version-1.0.0-doc1
 title: My Document
@@ -52,7 +52,7 @@ Blog Posts use the following markdown header fields that are enclosed by a line
 
 For example:
 
-```
+```markdown
 ---
 title: My First Blog Post
 author: Frank Li
@@ -70,6 +70,7 @@ Docusaurus supports some extra features when writing documentation in markdown.
 You can use relative urls to other documentation files which will automatically get converted to the corresponding html links when they get rendered.
 
 Example:
+
 ```markdown
 [This links to another document](other-document.md)
 ```
@@ -82,6 +83,7 @@ This can help when you want to navigate through docs on GitHub since the links t
 Static assets can be linked to in the same way that documents are, using relative urls. Static assets used in documents and blogs should go into `docs/assets` and `website/blog/assets`, respectively. The markdown will get converted into correct link paths so that these paths will work for documents of all languages and versions.
 
 Example:
+
 ```markdown
 ![alt-text](assets/doc-image.png)
 ```
@@ -137,7 +139,7 @@ ReactDOM.render(
 
 Highlighting is provided by [Highlight.js](https://highlightjs.org) using the theme specified in your `siteConfig.js` file as part of the `highlight` key:
 
-```
+```javascript
 highlight: {
   theme: 'default'
 }
@@ -149,7 +151,7 @@ You can find the full list of supported themes in the Highlight.js [`styles`](ht
 
 While Highlight.js provides support for [many popular languages out of the box](https://highlightjs.org/static/demo/), you may find the need to register additional language support. For these cases, we provide an escape valve by exposing the `hljs` constant as part of the `highlight` config key. This in turn allows you to call [`registerLanguage`](http://highlightjs.readthedocs.io/en/latest/api.html#registerlanguage-name-language):
 
-```
+```javascript
 highlight: {
   theme: 'default',
   hljs: function(hljs) {

lib/core/Remarkable.js

@@ -7,6 +7,9 @@ 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 */) {
     return '<h' + tokens[idx].hLevel + '>' + '<a class="anchor" name="' + toSlug(tokens[idx+1].content) + '"></a>';
@@ -53,6 +56,9 @@ class Remarkable extends React.Component {
   renderMarkdown(source) {
     if (!this.md) {
       this.md = new Markdown({
+        // Highlight.js expects hljs css classes on the code element.
+        // This results in <pre><code class="hljs css javascript">
+        langPrefix: 'hljs css ',
         highlight: function (str, lang) {
           if (lang && hljs.getLanguage(lang)) {
             try {
@@ -64,7 +70,7 @@ class Remarkable extends React.Component {
             return hljs.highlightAuto(str).value;
           } catch (err) {}
       
-          return ''; // use external default escaping
+          return '';
         }
       });
 
@@ -81,7 +87,9 @@ class Remarkable extends React.Component {
 
     }
 
-    return this.md.render(source);
+    // Ensure fenced code blocks use Highlight.js hljs class
+    // https://github.com/jonschlinkert/remarkable/issues/224
+    return this.md.render(source).replace('<pre><code>','<pre><code class="hljs">');
   }
 }
 

lib/core/Site.js

@@ -128,12 +128,7 @@ class Site extends React.Component {
                 }}
               />
             ))}
-          <script src={`//cdnjs.cloudflare.com/ajax/libs/highlight.js/${highlightVersion}/highlight.min.js`}></script>
+
-          <script
-            dangerouslySetInnerHTML={{
-              __html: `hljs.initHighlightingOnLoad();`
-            }}
-          />
         </body>
       </html>
     );

lib/static/css/main.css

@@ -733,11 +733,14 @@ a:hover code {
   text-decoration: none;
 }
 
-.hljs {
+pre code {
-  font-family: "SFMono-Regular",source-code-pro,Menlo,Monaco,Consolas,"Roboto Mono","Droid Sans Mono","Liberation Mono",Consolas,"Courier New",Courier,monospace;
+  display:block;
-  border-left: 4px solid $primaryColor;
-  font-size: 13px;
   margin: 20px 0;
+  padding:0.5em;
+  border-left: 4px solid $primaryColor;
+  font-family: "SFMono-Regular",source-code-pro,Menlo,Monaco,Consolas,"Roboto Mono","Droid Sans Mono","Liberation Mono",Consolas,"Courier New",Courier,monospace;
+  font-size: 13px;
+  overflow-x:auto;
 }
 
 /** GitHub **/