Fix: use highlight.js from CDN

config/webpack.common.js

@@ -34,6 +34,7 @@ module.exports = function (options) {
       //  on the global var jQuery
       "jquery": "jQuery",
       "emojione": "emojione",
+      "hljs": "hljs",
     },
     resolve: {
       extensions: ['.js', '.json'],
@@ -97,11 +98,9 @@ module.exports = function (options) {
         chunks: ['commons', 'plugin'],
       }),
 
-      new webpack.ProvidePlugin({
+      new webpack.ProvidePlugin({ // refs externals
         jQuery: "jquery",
         $: "jquery",
-        hljs: "highlight",
-        emojione: "emojione",
       }),
 
     ]

lib/views/layout/layout.html

@@ -33,8 +33,10 @@
     }
   </script>
 
-  <!-- jQuery, emojione, highlight.js -->
-  <script src="https://cdn.jsdelivr.net/combine/npm/emojione@3.1.2,npm/jquery@3.3.1,npm/highlight.js@9.12.0"></script>
+  <!-- jQuery, emojione -->
+  <script src="https://cdn.jsdelivr.net/combine/npm/emojione@3.1.2,npm/jquery@3.3.1"></script>
+  <!-- highlight.js -->
+  <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.12.0/build/highlight.min.js"></script>
   {% if local_config.env.MATHJAX %}
     <!-- Mathjax -->
     <script type="text/x-mathjax-config" async>

lib/views/page_presentation.html

@@ -17,8 +17,10 @@
       }
     </script>
 
-    <!-- jQuery, emojione, highlight.js (expect to hit the cache) -->
-    <script src="https://cdn.jsdelivr.net/combine/npm/emojione@3.1.2,npm/jquery@3.3.1,npm/highlight.js@9.12.0"></script>
+    <!-- jQuery, emojione (expect to hit the cache) -->
+    <script src="https://cdn.jsdelivr.net/combine/npm/emojione@3.1.2,npm/jquery@3.3.1"></script>
+    <!-- highlight.js -->
+    <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.12.0/build/highlight.min.js"></script>
 
     {% if env === 'development' %}
       <script src="/dll/vendor.dll.js"></script>

resource/js/util/GrowiRenderer.js

@@ -14,10 +14,6 @@ export default class GrowiRenderer {
   constructor(crowi) {
     this.crowi = crowi;
 
-    this.md = new MarkdownIt();
-    this.configure(this.crowi.getConfig());
-    this.configurePlugins(this.crowi.getConfig());
-
     this.preProcessors = [
       new Linker(crowi),
       new XssFilter(crowi),
@@ -34,6 +30,11 @@ export default class GrowiRenderer {
 
     this.configure = this.configure.bind(this);
     this.parseMarkdown = this.parseMarkdown.bind(this);
+    this.codeRenderer = this.codeRenderer.bind(this);
+
+    this.md = new MarkdownIt();
+    this.configure(this.crowi.getConfig());
+    this.configurePlugins(this.crowi.getConfig());
   }
 
   /**
@@ -45,17 +46,7 @@ export default class GrowiRenderer {
       html: true,
       linkify: true,
       breaks: config.isEnabledLineBreaks,
-      highlight: (str, lang) => {
-        if (lang && hljs.getLanguage(lang)) {
-          try {
-            return '<pre class="hljs"><code>' +
-                    hljs.highlight(lang, str, true).value +
-                    '</code></pre>';
-          } catch (__) {}
-        }
-
-        return '<pre class="hljs"><code>' + this.md.utils.escapeHtml(str) + '</code></pre>';
-      },
+      highlight: this.codeRenderer,
     });
   }
 
@@ -96,6 +87,27 @@ export default class GrowiRenderer {
     return html;
   }
 
+  codeRenderer(code, langExt) {
+    let citeTag = '';
+    if (langExt) {
+      const langAndFn = langExt.split(':');
+      const lang = langAndFn[0];
+      const langFn = langAndFn[1] || null;
+
+      if (langFn) {
+        citeTag = `<cite>${langFn}</cite>`;
+      }
+
+      if (hljs.getLanguage(lang)) {
+        try {
+          return `<pre class="hljs">${citeTag}<code class="language-${lang}">${hljs.highlight(lang, code, true).value}</code></pre>`;
+        } catch (__) {}
+      }
+    }
+
+    return '';
+  }
+
   parseMarkdown(markdown, dom, markedOpts) {
     let parsed = '';
     parsed = this.md.render(markdown);