Refactor markdown syntax highlighting. (#720)

* Refactor markdown syntax highlighting.

* Disable eslint error.

* Fix formatting.

* Fix naming and file locations.

* Change MarkdownHighlighter to be an object.

* Update CHANGELOG.

* Add plugins for async functions.

* Remove github stylesheet.

* Move highlight stylesheet import.

* Update hljs lazy loading.

* Add markdown highlighting test.

* Move stylesheet import to highlight.js.

* Add percy snapshot to test and fix window override test.

* Change assert to wait_for_text_to_equal.

* Use click to trigger md render in test.

Author: Shammamah Hossain

CHANGELOG.md

@@ -17,6 +17,10 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 - [#706](https://github.com/plotly/dash-core-components/pull/706)
   - Upgraded plotly.js to [1.51.3](https://github.com/plotly/plotly.js/releases/tag/v1.51.3)
 
+### Changed
+- [#720](https://github.com/plotly/dash-core-components/pull/720)
+  - `highlight.js` is now bundled into the package, and no longer sets the `window.hljs` variable. Similarly to how `plotly.js` is handled, it is overridden by a user-provided version if one exists.
+
 ## [1.6.0] - 2019-11-27
 ### Updated
 - Upgraded plotly.js to 1.51.2 [#708](https://github.com/plotly/dash-core-components/pull/708)

babel.config.js

@@ -4,7 +4,9 @@ const presets = [
 ];
 
 const plugins = [
-    '@babel/plugin-syntax-dynamic-import'
+    '@babel/plugin-syntax-dynamic-import',
+    '@babel/plugin-transform-async-to-generator',
+    '@babel/plugin-transform-runtime'
 ];
 
 // eslint-disable-next-line no-process-env

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

@@ -37,6 +37,7 @@
   "dependencies": {
     "color": "^3.1.0",
     "fast-isnumeric": "^1.1.3",
+    "highlight.js": "^9.17.1",
     "moment": "^2.20.1",
     "plotly.js": "1.51.3",
     "prop-types": "^15.6.0",
@@ -57,6 +58,8 @@
     "@babel/core": "^7.4.0",
     "@babel/plugin-proposal-object-rest-spread": "^7.4.0",
     "@babel/plugin-syntax-dynamic-import": "^7.2.0",
+    "@babel/plugin-transform-async-to-generator": "^7.7.4",
+    "@babel/plugin-transform-runtime": "^7.7.6",
     "@babel/preset-env": "^7.4.1",
     "@babel/preset-react": "^7.0.0",
     "@plotly/dash-component-plugins": "^1.0.2",

package-lock.json

@@ -2,12 +2,18 @@ import React, {Component} from 'react';
 import {type} from 'ramda';
 import Markdown from 'react-markdown';
 
+import MarkdownHighlighter from '../utils/MarkdownHighlighter';
 import {propTypes, defaultProps} from '../components/Markdown.react';
-import '../components/css/highlight.css';
 
 export default class DashMarkdown extends Component {
     constructor(props) {
         super(props);
+
+        if (MarkdownHighlighter.isReady !== true) {
+            MarkdownHighlighter.isReady.then(() => {
+                this.setState({});
+            });
+        }
         this.highlightCode = this.highlightCode.bind(this);
         this.dedent = this.dedent.bind(this);
     }
@@ -21,15 +27,15 @@ 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 (MarkdownHighlighter.hljs) {
+                for (let i = 0; i < nodes.length; i++) {
+                    MarkdownHighlighter.hljs.highlightBlock(nodes[i]);
+                }
+            } else {
+                MarkdownHighlighter.loadhljs();
             }
         }
     }