feat: hljs syntax highlighting & nits

docs/docusaurus.md

@@ -5,7 +5,7 @@ title: docusaurus
 
 <h1 align="center">
   <p align="center">Docusaurus</p>
-  <a href="https://docusaurus.io"><img src="https://raw.githubusercontent.com/facebook/Docusaurus/master/website/static/img/slash-introducing.png" alt="Docusaurus"></a>
+  <a href="https://docusaurus.io"><img src="/img/slash-introducing.png" alt="Docusaurus"></a>
 </h1>
 
 <p align="center">

docs/hello.md

@@ -5,6 +5,15 @@ title: Hello, World !
 
 Hi, Endilie here :)
 
+```py
+import hello
+def hi(name):
+    hello(name)
+    
+print('Welcome to my repos!')
+```
+
+
 ## Blockquotes
 
 > Blockquotes can also be nested...

lib/core/App.js

@@ -3,6 +3,6 @@ import {renderRoutes} from 'react-router-config';
 import routes from '@generated/routes'; // eslint-disable-line
 import docsData from '@generated/docsData'; // eslint-disable-line
 import pagesData from '@generated/pagesData'; // eslint-disable-line
-import config from '@site/siteConfig.js'; //eslint-disable-line
+import siteConfig from '@site/siteConfig'; //eslint-disable-line
 
-export default () => renderRoutes(routes, {docsData, pagesData, config});
+export default () => renderRoutes(routes, {docsData, pagesData, siteConfig});

lib/core/components/Markdown/highlight.js

@@ -0,0 +1,22 @@
+const hljs = require('highlight.js');
+const chalk = require('chalk');
+const escapeHtml = require('escape-html');
+
+export default (str, rawLang) => {
+  if (rawLang === 'text') {
+    return escapeHtml(str);
+  }
+  const lang = rawLang.toLowerCase();
+  try {
+    if (hljs.getLanguage(lang)) {
+      return hljs.highlight(lang, str).value;
+    }
+  } catch (e) {
+    console.error(
+      chalk.yellow(
+        `Highlight.js syntax highlighting for language "${lang}" is not supported.`
+      )
+    );
+  }
+  return hljs.highlightAuto(str).value;
+};

lib/core/components/Markdown/index.js

@@ -1,9 +1,8 @@
-/* eslint-disable react/no-danger */
+/* eslint-disable */
 
 import React from 'react';
 import Markdown from 'remarkable';
-import hljs from 'highlight.js';
-import prismjs from 'prismjs';
+import highlight from './highlight';
 import anchors from './anchors';
 
 class MarkdownBlock extends React.Component {
@@ -36,46 +35,7 @@ class MarkdownBlock extends React.Component {
     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 '';
-      },
+      highlight: highlight,
       html: true,
       linkify: true
     });

lib/theme/Docs/index.js

@@ -6,8 +6,8 @@ import Layout from '@theme/Layout'; // eslint-disable-line
 
 export default class Docs extends React.Component {
   render() {
-    const {location, docsData, config} = this.props;
-    const currentDoc = docsData.find(data => data.path === location.pathname);
+    const {route, docsData, siteConfig} = this.props;
+    const currentDoc = docsData.find(data => data.path === route.path);
 
     const highlight = Object.assign(
       {},
@@ -15,21 +15,21 @@ export default class Docs extends React.Component {
         version: '9.12.0',
         theme: 'default'
       },
-      config.highlight
+      siteConfig.highlight
     );
 
     // Use user-provided themeUrl if it exists, else construct one from version and theme.
     const highlightThemeURL = highlight.themeUrl
       ? highlight.themeUrl
-      : `//cdnjs.cloudflare.com/ajax/libs/highlight.js/${
+      : `https://cdnjs.cloudflare.com/ajax/libs/highlight.js/${
           highlight.version
         }/styles/${highlight.theme}.min.css`;
 
     return (
       <Layout {...this.props}>
         <Helmet>
-          <title>{currentDoc.title || 'Document'}</title>
-          <link rel="stylesheet" href={highlightThemeURL} />
+          <title>{(currentDoc && currentDoc.title) || siteConfig.title}</title>
+          <link rel="stylesheet" type="text/css" href={highlightThemeURL} />
         </Helmet>
         <div className={styles.mainContainer}>{this.props.children}</div>
       </Layout>

package.json

@@ -53,6 +53,7 @@
     "commander": "^2.16.0",
     "connect-history-api-fallback": "^1.5.0",
     "css-loader": "^1.0.0",
+    "escape-html": "^1.0.3",
     "front-matter": "^2.3.0",
     "fs-extra": "^7.0.0",
     "globby": "^8.0.1",