add customize:highlightJsStyleBorder configuration

lib/form/admin/customhighlightJsStyle.js

@@ -5,5 +5,6 @@ var form = require('express-form')
   ;
 
 module.exports = form(
-  field('settingForm[customize:highlightJsStyle]')
+  field('settingForm[customize:highlightJsStyle]'),
+  field('settingForm[customize:highlightJsStyleBorder]').trim().toBooleanStrict()
 );

lib/models/config.js

@@ -86,6 +86,7 @@ module.exports = function(crowi) {
       'customize:script' : '',
       'customize:header' : '',
       'customize:highlightJsStyle' : 'github',
+      'customize:highlightJsStyleBorder' : false,
       'customize:behavior' : 'crowi',
       'customize:layout' : 'crowi',
       'customize:isEnabledTimeline' : true,
@@ -377,6 +378,12 @@ module.exports = function(crowi) {
     return getValueForCrowiNS(config, key);
   }
 
+  configSchema.statics.highlightJsStyleBorder = function(config)
+  {
+    const key = 'customize:highlightJsStyleBorder';
+    return getValueForCrowiNS(config, key);
+  }
+
   configSchema.statics.isEnabledTimeline = function(config)
   {
     const key = 'customize:isEnabledTimeline';

lib/routes/admin.js

@@ -131,16 +131,16 @@ module.exports = function(crowi, app) {
     settingForm = Config.setupCofigFormData('crowi', req.config);
 
     const highlightJsCssSelectorOptions = {
-      "github": '[Light] Github',
-      "github-gist": '[Light] Github Gist',
-      "atom-one-light": '[Light] Atom One Light',
-      "xcode": '[Light] Xcode',
-      "vs": '[Light] Vs',
-      "atom-one-dark": '[Dark] Atom One Dark',
-      "hybrid": '[Dark] Hybrid',
-      "monokai": '[Dark] Monokai',
-      "tomorrow-night": '[Dark] Tomorrow Night',
-      "vs2015": '[Dark] Vs 2015',
+      "github":           { name: '[Light] Github',         border: false },
+      "github-gist":      { name: '[Light] Github Gist',    border: true },
+      "atom-one-light":   { name: '[Light] Atom One Light', border: true },
+      "xcode":            { name: '[Light] Xcode',          border: true },
+      "vs":               { name: '[Light] Vs',             border: true },
+      "atom-one-dark":    { name: '[Dark] Atom One Dark',   border: false },
+      "hybrid":           { name: '[Dark] Hybrid',          border: false },
+      "monokai":          { name: '[Dark] Monokai',         border: false },
+      "tomorrow-night":   { name: '[Dark] Tomorrow Night',  border: false },
+      "vs2015":           { name: '[Dark] Vs 2015',         border: false },
     }
 
     return res.render('admin/customize', {

lib/util/swigFunctions.js

@@ -112,6 +112,11 @@ module.exports = function(crowi, app, req, locals) {
     return Config.highlightJsStyle(config);
   }
 
+  locals.highlightJsStyleBorder = function() {
+    var config = crowi.getConfig()
+    return Config.highlightJsStyleBorder(config);
+  }
+
   locals.isEnabledTimeline = function() {
     var config = crowi.getConfig()
     return Config.isEnabledTimeline(config);

lib/views/admin/customize.html

@@ -209,12 +209,28 @@
             <div class="col-xs-9">
               <select class="form-control" name="settingForm[customize:highlightJsStyle]" onChange="selectHighlightJsStyle(event)">
                 {% for key in Object.keys(highlightJsCssSelectorOptions) %}
-                  <option value={{key}} {% if key == highlightJsStyle() %} selected {% endif %}>{{highlightJsCssSelectorOptions[key]}}</option>
+                  <option value={{key}} {% if key == highlightJsStyle() %} selected {% endif %}>{{highlightJsCssSelectorOptions[key].name}}</option>
                 {% endfor %}
               </select>
             </div>
           </div>
 
+          <div class="form-group">
+            <label for="settingForm[customize:highlightJsStyleBorder]" class="col-xs-3 control-label">Border</label>
+            <div class="col-xs-9">
+              <div class="btn-group btn-toggle" data-toggle="buttons">
+                <label class="btn btn-default {% if settingForm['customize:highlightJsStyleBorder'] %}active{% endif %}" data-active-class="primary">
+                  <input name="settingForm[customize:highlightJsStyleBorder]" value="true" type="radio"
+                      {% if true === settingForm['customize:highlightJsStyleBorder'] %}checked{% endif %}> {{ t('Valid') }}
+                </label>
+                <label class="btn btn-default {% if !settingForm['customize:highlightJsStyleBorder'] %}active{% endif %}" data-active-class="primary">
+                  <input name="settingForm[customize:highlightJsStyleBorder]" value="false" type="radio"
+                      {% if !settingForm['customize:highlightJsStyleBorder'] %}checked{% endif %}> {{ t('Invalid') }}
+                </label>
+              </div>
+            </div>
+          </div>
+
           <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/{{ highlightJsStyle() }}.css" class="highlightJsCss">
 
           <p class="help-block">