impl CdnResourcesService.getHighlightJsStyleTag method

resource/cdn-manifests.js

@@ -88,6 +88,13 @@ module.exports = {
       args: {
         integrity: ''
       },
+    },
+    {
+      name: 'highlight-theme-github',
+      url: 'https://cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github.css',
+      args: {
+        integrity: ''
+      },
     }
   ]
 };

src/lib/service/cdn-resources-service.js

@@ -1,3 +1,4 @@
+const { URL } = require('url');
 const urljoin = require('url-join');
 
 const helpers = require('@commons/util/helpers');
@@ -89,7 +90,7 @@ class CdnResourcesService {
 
   getScriptTagByName(name) {
     const manifest = this.getScriptManifestByName(name);
-        return this.generateScriptTag(manifest, this.noCdn);
+    return this.generateScriptTag(manifest, this.noCdn);
   }
 
   getScriptTagsByGroup(group) {
@@ -130,7 +131,7 @@ class CdnResourcesService {
 
   getStyleTagByName(name) {
     const manifest = this.getStyleManifestByName(name);
-        return this.generateStyleTag(manifest, this.noCdn);
+    return this.generateStyleTag(manifest, this.noCdn);
   }
 
   getStyleTagsByGroup(group) {
@@ -142,6 +143,21 @@ class CdnResourcesService {
         return this.generateStyleTag(manifest, this.noCdn);
       });
   }
+
+  getHighlightJsStyleTag(styleName) {
+    let manifest = this.getStyleManifestByName('highlight-theme-github');
+
+    // replace style
+    if (!this.noCdn) {
+      const url = new URL(`${styleName}.css`, manifest.url);  // resolve `${styleName}.css` from manifest.url
+
+      // clone manifest
+      manifest = Object.assign(manifest, { url: url.toString() });
+    }
+
+    return this.generateStyleTag(manifest, this.noCdn);
+  }
+
 }
 
 module.exports = CdnResourcesService;

src/server/util/swigFunctions.js

@@ -75,6 +75,10 @@ module.exports = function(crowi, app, req, locals) {
     return tags.join('\n');
   };
 
+  locals.cdnHighlightJsStyleTag = function(styleName) {
+    return cdnResourcesService.getHighlightJsStyleTag(styleName);
+  };
+
   /**
    * return true if enabled
    */

src/server/views/admin/customize.html

@@ -339,7 +339,9 @@
             </div>
           </div>
 
-          <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/{{ highlightJsStyle() }}.css" class="highlightJsCss">
+          <div id="highlightJsCssContainer">
+            {{ cdnHighlightJsStyleTag(highlightJsStyle()) }}
+          </div>
 
           <p class="help-block">
             Examples:
@@ -591,7 +593,7 @@ window.addEventListener('load', (event) => {
     hljs.initHighlightingOnLoad()
 
     function selectHighlightJsStyle(event) {
-      var highlightJsCssDOM = $(".highlightJsCss")[0]
+      var highlightJsCssDOM = $("#highlightJsCssContainer link")[0]
       // selected value
       var val = event.target.value
       // replace css url

src/server/views/layout/layout.html

@@ -91,8 +91,7 @@
   {% endblock %}
 
   {{ cdnStyleTagsByGroup('basis') }}
-  <!-- highlight.js -->
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/{{ highlightJsStyle() }}.css">
+  {{ cdnHighlightJsStyleTag(highlightJsStyle()) }}
 
   {% block html_additional_headers %}{% endblock %}