Merge pull request #372 from weseek/imprv/enable-to-switch-`pre.hljs`-border

#313 improve/enable to switch `pre.hljs` border

lib/models/config.js

@@ -460,6 +460,7 @@ module.exports = function(crowi) {
       behaviorType: Config.behaviorType(config),
       layoutType: Config.layoutType(config),
       isEnabledLineBreaks: Config.isEnabledLinebreaks(config),
+      highlightJsStyleBorder: Config.highlightJsStyleBorder(config),
       isSavedStatesOfTabChanges: Config.isSavedStatesOfTabChanges(config),
       env: {
         PLANTUML_URI: env.PLANTUML_URI || null,

lib/views/admin/customize.html

@@ -281,7 +281,7 @@
       </fieldset>
       </form>
 
-      <form action="/_api/admin/customize/highlightJsStyle" method="post" class="form-horizontal" id="cutomhighlightJsStyleSettingForm" role="form">
+      <form action="/_api/admin/customize/highlightJsStyle" method="post" class="form-horizontal" id="customhighlightJsStyleSettingForm" role="form">
         <fieldset>
           <legend>{{ t('customize_page.Code Highlight') }}</legend>
           <div class="form-group">
@@ -299,11 +299,11 @@
             <label for="settingForm[customize:highlightJsStyleBorder]" class="col-xs-3 control-label">(TBD) Border</label>
             <div class="col-xs-9">
               <div class="btn-group btn-toggle" data-toggle="buttons">
-                <label class="btn btn-default btn-rounded btn-outline {% if settingForm['customize:highlightJsStyleBorder'] %}active{% endif %}" data-active-class="primary">
+                <label class="btn btn-default btn-rounded btn-outline {% if settingForm['customize:highlightJsStyleBorder'] %}active{% endif %}" data-active-class="primary" onclick="selectBorderOn()">
                   <input name="settingForm[customize:highlightJsStyleBorder]" value="true" type="radio"
                       {% if true === settingForm['customize:highlightJsStyleBorder'] %}checked{% endif %}> ON
                 </label>
-                <label class="btn btn-default btn-rounded btn-outline {% if !settingForm['customize:highlightJsStyleBorder'] %}active{% endif %}" data-active-class="default">
+                <label class="btn btn-default btn-rounded btn-outline {% if !settingForm['customize:highlightJsStyleBorder'] %}active{% endif %}" data-active-class="default" onclick="selectBorderOff()">
                   <input name="settingForm[customize:highlightJsStyleBorder]" value="false" type="radio"
                       {% if !settingForm['customize:highlightJsStyleBorder'] %}checked{% endif %}> OFF
                 </label>
@@ -315,7 +315,7 @@
 
           <p class="help-block">
             Examples:
-            <pre class="hljs"><code class="highlightjs-demo">function $initHighlight(block, cls) {
+            <pre class="hljs {% if !settingForm['customize:highlightJsStyleBorder'] %}hljs-no-border{% endif %}"><code class="highlightjs-demo">function $initHighlight(block, cls) {
   try {
     if (cls.search(/\bno\-highlight\b/) != -1)
       return process(block, true, 0x0F) +
@@ -507,7 +507,7 @@ window.addEventListener('load', (event) => {
 {% block body_end %}
   {% parent %}
   <script>
-    $(`#customthemeSettingForm, #cutomlayoutSettingForm, #cutombehaviorSettingForm, #cutomhighlightJsStyleSettingForm,
+    $(`#customthemeSettingForm, #cutomlayoutSettingForm, #cutombehaviorSettingForm, #customhighlightJsStyleSettingForm,
        #customfeaturesSettingForm, #cutomheaderSettingForm, #cutomcssSettingForm, #cutomscriptSettingForm, #customtitleSettingForm`
     ).each(function() {
       $(this).submit(function()
@@ -592,6 +592,13 @@ window.addEventListener('load', (event) => {
       $('#themeOptions .active').removeClass('active');
       $(`#themeOptions #theme-option-${theme}`).addClass('active');
     }
+
+    function selectBorderOn(){
+      $('.hljs-no-border').removeClass('hljs-no-border');
+    }
+    function selectBorderOff(){
+      $('#customhighlightJsStyleSettingForm .hljs').addClass('hljs-no-border')
+    }
   </script>
 
 </div>

resource/js/util/GrowiRenderer.js

@@ -139,6 +139,9 @@ export default class GrowiRenderer {
   }
 
   codeRenderer(code, langExt) {
+    const config = this.crowi.getConfig();
+    const noborder = (!config.highlightJsStyleBorder) ? 'hljs-no-border' : '';
+
     if (langExt) {
       const langAndFn = langExt.split(':');
       const lang = langAndFn[0];
@@ -152,18 +155,18 @@ export default class GrowiRenderer {
       const citeTag = (langFn) ? `<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>`;
+          return `<pre class="hljs ${noborder}">${citeTag}<code class="language-${lang}">${hljs.highlight(lang, code, true).value}</code></pre>`;
         }
         catch (__) {
-          return `<pre class="hljs">${citeTag}<code class="language-${lang}">${code}}</code></pre>`;
+          return `<pre class="hljs ${noborder}">${citeTag}<code class="language-${lang}">${code}}</code></pre>`;
         }
       }
       else {
-        return `<pre class="hljs">${citeTag}<code>${code}</code></pre>`;
+        return `<pre class="hljs ${noborder}">${citeTag}<code>${code}</code></pre>`;
       }
     }
 
-    return `<pre class="hljs"><code>${code}</code></pre>`;
+    return `<pre class="hljs ${noborder}"><code>${code}</code></pre>`;
   }
 
 }

resource/styles/scss/_override-hljs.scss

@@ -0,0 +1,6 @@
+// override Highlight Js Style Border
+.wiki, .admin-customize{
+  pre.hljs.hljs-no-border {
+    border: none;
+  }
+}

resource/styles/scss/_wiki.scss

@@ -53,11 +53,6 @@ div.body {
     color: lighten($gray-dark, 35%);
   }
 
-  pre {
-    border: none;
-    border-radius: 3px;
-  }
-
   img {
     margin: 5px 0;
     max-width: 100%;

resource/styles/scss/style.scss

@@ -8,6 +8,9 @@
 // vendor
 @import 'vendor';
 
+// override highlightJsStyle
+@import 'override-hljs';
+
 // override react-bootstrap-typeahead styles
 @import 'override-rbt';