Merge pull request #2261 from weseek/imprv/code

Imprv/code

src/client/styles/scss/_override-bootstrap-variables.scss

@@ -82,6 +82,9 @@ $progress-border-radius: 0;
 $progress-bg: #f0f0f0;
 $progress-box-shadow: none;
 
+//== Code
+$pre-color: dummyinvalildcolor; // disable pre color specification with invalid value
+
 //== Custom Checkbox
 $custom-checkbox-indicator-border-radius: 0px;
 $custom-control-indicator-focus-box-shadow: none;

src/client/styles/scss/_override-bootstrap.scss

@@ -39,11 +39,6 @@
     line-height: 14px;
   }
 
-  code {
-    padding: 2px 4px;
-    font-size: 90%;
-  }
-
   // Navs
   .nav-tabs {
     .nav-item {

src/client/styles/scss/_wiki.scss

@@ -127,15 +127,6 @@ div.body {
     }
   }
 
-  pre {
-    white-space: pre-line;
-  }
-
-  // only inline code blocks
-  p code {
-    font-family: $font-family-monospace-not-strictly;
-  }
-
   .page-template-builder {
     position: relative;
 

src/client/styles/scss/atoms/_code.scss

@@ -0,0 +1,11 @@
+/*
+ * style of inline-code
+ */
+:not(pre) {
+  > code {
+    padding: 2px 4px;
+    font-family: $font-family-monospace-not-strictly;
+    border: 1px solid;
+    border-radius: 2px;
+  }
+}

src/client/styles/scss/atoms/_pre.scss

@@ -0,0 +1,4 @@
+pre {
+  padding: 0.5em;
+  border-radius: 2px;
+}

src/client/styles/scss/style-app.scss

@@ -16,7 +16,9 @@
 
 // atoms
 @import 'atoms/buttons';
+@import 'atoms/code';
 @import 'atoms/nav';
+@import 'atoms/pre';
 @import 'atoms/spinners';
 @import 'atoms/custom_control';
 

src/client/styles/scss/theme/_apply-colors.scss

@@ -34,6 +34,23 @@ $input-focus-color: $color-global;
 @import 'reboot-bootstrap-theme-colors';
 @import 'reboot-toastr-colors';
 
+:not(pre) {
+  > code {
+    color: $color-inline-code;
+    background-color: $bgcolor-inline-code;
+    border-color: $bordercolor-inline-code;
+  }
+}
+
+pre:not(.hljs) {
+  background-color: $bgcolor-inline-code;
+  border-color: $bordercolor-inline-code;
+}
+
+//
+//== Apply to Bootstrap Elements
+//
+
 // Link buttons
 .btn-link {
   color: $link-color;
@@ -179,16 +196,6 @@ $input-focus-color: $color-global;
   fill: $color-editor-icons;
 }
 
-/*
- * code color of inline-code
- */
-:not(.hljs) > code:not(.hljs) {
-  color: $color-inline-code;
-  background-color: $bgcolor-inline-code;
-  border: solid 1px $bordercolor-inline-code;
-  border-radius: 0.35em;
-}
-
 /*
  * Modal
  */

src/client/styles/scss/theme/_reboot-bootstrap-colors.scss

@@ -25,9 +25,7 @@ body {
   background-color: $body-bg; // 2
 }
 
-//
 // Links
-//
 
 a {
   color: $link-color;

src/server/views/admin/customize.html

@@ -19,6 +19,9 @@
 {% block content_main %}
 <div class="content-main admin-customize row">
   {% parent %}
+  <div id="grw-hljs-container-for-demo">
+    {{ cdnHighlightJsStyleTag(getConfig('crowi', 'customize:highlightJsStyle')) }}
+  </div>
   <div class="col-lg-9" id="admin-customize"></div>
 </div>
 {% endblock content_main %}