refs #276: Enable to select highlight.js style

WIP
change css with jquery

lib/views/admin/customize.html

@@ -14,7 +14,6 @@
   </style>
 {% endblock %}
 
-
 {% block content_head %}
 <div class="header-wrap">
   <header id="page-header">
@@ -39,6 +38,9 @@
   </div>
   {% endif %}
 
+  <!-- highlight.js -->
+  <link class="highlightJsCss" rel="stylesheet" href="">
+
   <div class="row">
     <div class="col-md-3">
       {% include './widget/menu.html' with {current: 'customize'} %}
@@ -420,6 +422,10 @@ window.addEventListener('load', (event) => {
         return false;
       });
     });
+
+    // highlight.js の css の URL を代入
+    $(".highlightJsCss")[0].href = "https://cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/{{ highlightJsStyle() }}.css"
+
     // highlight.js 有効化
     hljs.initHighlighting()
 
@@ -430,9 +436,7 @@ window.addEventListener('load', (event) => {
       // selecter で選択された値
       var val = $('#cutomhighlightJsStyleSettingForm select').val()
       // 追加する style の DOM
-      var style = `<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/${val}.css">`;
-      // body の最後に追加 layout.html は body に読み込まれてるため、body の一番下に追加しないと上書きされない
-      $('body link:last').after(style);
+      $(".highlightJsCss")[0].href = `https://cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/${val}.css`;
       // demo の部分だけ highlight.js 再読み込み
       hljs.highlightBlock($(".highlight-demo")[0]);
     }