organize inline code styles

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,10 @@
+/*
+ * style of inline-code
+ */
+:not(pre) {
+  > code {
+    font-family: $font-family-monospace-not-strictly;
+    border: 1px solid;
+    border-radius: 2px;
+  }
+}

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

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

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

@@ -180,13 +180,14 @@ $input-focus-color: $color-global;
 }
 
 /*
- * code color of inline-code
+ * style 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;
+:not(pre) {
+  > code {
+    color: $color-inline-code;
+    background-color: $bgcolor-inline-code;
+    border-color: $bordercolor-inline-code;
+  }
 }
 
 /*

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

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