Refactor markdown syntax highlighting.

Author: Shammamah Hossain

dash_core_components_base/__init__.py

@@ -43,6 +43,7 @@
     'datepicker',
     'dropdown',
     'graph',
+    'highlight',
     'markdown',
     'upload'
 ]
@@ -70,10 +71,6 @@
     } for async_resource in async_resources])
 
 _js_dist.extend([
-    {
-        'relative_package_path': 'highlight.pack.js',
-        'namespace': 'dash_core_components'
-    },
     {
         'relative_package_path': '{}.min.js'.format(__name__),
         'external_url': (

dash_core_components_base/highlight.pack.js

@@ -35,6 +35,7 @@
   "dependencies": {
     "color": "^3.1.0",
     "fast-isnumeric": "^1.1.3",
+    "highlight.js": "^9.17.1",
     "moment": "^2.20.1",
     "plotly.js": "1.51.2",
     "prop-types": "^15.6.0",

package-lock.json

@@ -2,12 +2,17 @@ import React, {Component} from 'react';
 import {type} from 'ramda';
 import Markdown from 'react-markdown';
 
+import Highlight from '../utils/Highlight';
 import {propTypes, defaultProps} from '../components/Markdown.react';
 import '../components/css/highlight.css';
 
 export default class DashMarkdown extends Component {
     constructor(props) {
         super(props);
+        new Highlight();
+        if (Highlight.isReady !== true) {
+            Highlight.isReady.then(() => { this.setState({}); })
+        }
         this.highlightCode = this.highlightCode.bind(this);
         this.dedent = this.dedent.bind(this);
     }
@@ -21,16 +26,14 @@ export default class DashMarkdown extends Component {
     }
 
     highlightCode() {
-        if (!window.hljs) {
-            // skip highlighting if highlight.js isn't found
-            return;
-        }
         if (this.mdContainer) {
             const nodes = this.mdContainer.querySelectorAll('pre code');
 
-            for (let i = 0; i < nodes.length; i++) {
-                window.hljs.highlightBlock(nodes[i]);
-            }
+            if(Highlight.hljs) {
+                for (let i = 0; i < nodes.length; i++) {
+                    Highlight.hljs.highlightBlock(nodes[i]);
+                }
+            } else { Highlight.loadhljs(); }
         }
     }
 

package.json

@@ -0,0 +1,21 @@
+import LazyLoader from './LazyLoader';
+
+export default class Highlight {
+
+    static hljsResolve() {}
+
+    constructor() {
+        if(!Highlight.isReady) {
+            Highlight.isReady = new Promise(resolve => {
+                Highlight.hljsResolve = resolve;
+            });
+        }
+    }
+
+    static async loadhljs() {
+        Highlight.hljs = await LazyLoader.hljs();
+        Highlight.hljsResolve();
+        Highlight.isReady = true;
+    }
+
+}

src/fragments/Markdown.react.js

@@ -7,6 +7,13 @@ export default {
         import(/* webpackChunkName: "dropdown" */ '../fragments/Dropdown.react'),
     graph: () =>
         import(/* webpackChunkName: "graph" */ '../fragments/Graph.react'),
+    hljs: () =>
+        Promise.resolve(
+            window.hljs ||
+                import(/* webpackChunkName: "highlight" */ '../../third-party/highlight.js').then(
+                    result => result.default
+                )
+        ),
     markdown: () =>
         import(/* webpackChunkName: "markdown" */ '../fragments/Markdown.react'),
     plotly: () =>

src/utils/Highlight.js

@@ -0,0 +1,32 @@
+import highlightjs from 'highlight.js/lib/highlight';
+import 'highlight.js/styles/github.css';
+
+import bash from 'highlight.js/lib/languages/bash';
+import css from 'highlight.js/lib/languages/css';
+import http from 'highlight.js/lib/languages/http';
+import javascript from 'highlight.js/lib/languages/javascript';
+import json from 'highlight.js/lib/languages/json';
+import markdown from 'highlight.js/lib/languages/markdown';
+import python from 'highlight.js/lib/languages/python';
+import r from 'highlight.js/lib/languages/r';
+import ruby from 'highlight.js/lib/languages/ruby';
+import shell from 'highlight.js/lib/languages/shell';
+import sql from 'highlight.js/lib/languages/sql';
+import xml from 'highlight.js/lib/languages/xml';
+import yaml from 'highlight.js/lib/languages/yaml';
+
+highlightjs.registerLanguage('bash', bash);
+highlightjs.registerLanguage('css', css);
+highlightjs.registerLanguage('http', http);
+highlightjs.registerLanguage('javascript', javascript);
+highlightjs.registerLanguage('json', json);
+highlightjs.registerLanguage('markdown', markdown);
+highlightjs.registerLanguage('python', python);
+highlightjs.registerLanguage('r', r);
+highlightjs.registerLanguage('ruby', ruby);
+highlightjs.registerLanguage('shell', shell);
+highlightjs.registerLanguage('sql', sql);
+highlightjs.registerLanguage('xml', xml);
+highlightjs.registerLanguage('yaml', yaml);
+
+export default highlightjs;