Merge pull request #6777 from weseek/fix/code-style

fix: code block styles

packages/app/src/components/ReactMarkdownComponents/CodeBlock.module.scss

@@ -1,9 +1,11 @@
 @use '~/styles/variables' as var;
 @use '~/styles/bootstrap/init' as bs;
-@use '~/styles/atoms/mixins' as atm;
 
-.code-inline {
-  @include atm.code-inline;
+.code-highlighted :global {
+  code {
+    padding: 0;
+    border: none;
+  }
 }
 
 .code-highlighted-title {

packages/app/src/components/ReactMarkdownComponents/CodeBlock.tsx

@@ -6,7 +6,7 @@ import styles from './CodeBlock.module.scss';
 
 export const CodeBlock: CodeComponent = ({ inline, className, children }) => {
   if (inline) {
-    return <code className={`code-inline ${styles['code-inline']} ${className ?? ''}`}>{children}</code>;
+    return <code className={`code-inline ${className ?? ''}`}>{children}</code>;
   }
 
   // TODO: set border according to the value of 'customize:highlightJsStyleBorder'
@@ -21,7 +21,7 @@ export const CodeBlock: CodeComponent = ({ inline, className, children }) => {
         <cite className={`code-highlighted-title ${styles['code-highlighted-title']}`}>{name}</cite>
       )}
       <SyntaxHighlighter
-        className="code-highlighted"
+        className={`code-highlighted ${styles['code-highlighted']}`}
         PreTag="div"
         style={oneLight}
         language={lang}

packages/app/src/styles/atoms/_code.scss

@@ -1,12 +1,12 @@
 @use '~/styles/variables' as var;
 @use '~/styles/bootstrap/init' as bs;
-@use '~/styles/atoms/mixins' as atm;
 
 /*
  * style of inline-code
  */
-:not(pre) {
-  > code {
-    @include atm.code-inline;
-  }
+code {
+  padding: 2px 4px;
+  font-family: var.$font-family-monospace-not-strictly;
+  border: 1px solid;
+  border-radius: bs.$border-radius;
 }

packages/app/src/styles/atoms/_mixins.scss

@@ -1,15 +0,0 @@
-@use '~/styles/variables' as var;
-@use '~/styles/bootstrap/init' as bs;
-
-@mixin code-inline {
-  padding: 2px 4px;
-  font-family: var.$font-family-monospace-not-strictly;
-  border: 1px solid;
-  border-radius: bs.$border-radius;
-}
-
-@mixin code-inline-color($color-inline-code,$bgcolor-inline-code, $bordercolor-inline-code) {
-  color: $color-inline-code;
-  background-color: $bgcolor-inline-code;
-  border-color: $bordercolor-inline-code;
-}

packages/app/src/styles/atoms/mixins/_code.scss

@@ -0,0 +1,5 @@
+@mixin code-inline-color($color-inline-code,$bgcolor-inline-code, $bordercolor-inline-code) {
+  color: $color-inline-code;
+  background-color: $bgcolor-inline-code;
+  border-color: $bordercolor-inline-code;
+}

packages/app/src/styles/theme/_apply-colors.scss

@@ -2,7 +2,8 @@
 @use '../bootstrap/init' as *;
 @use '../mixins';
 @use './mixins/tables'; // comment out and use _reboot-bootstrap-tables instead -- 2020.05.28 Yuki Takei
-@use '../atoms/mixins' as atm;
+@use '../atoms/mixins/code';
+
 //
 //== Apply to Bootstrap
 //
@@ -51,12 +52,12 @@ $color-modal-header: color-yiq($primary) !default;
 
 :not(pre) {
   > code {
-    @include atm.code-inline-color($color-inline-code, $bgcolor-inline-code, $bordercolor-inline-code);
+    @include code.code-inline-color($color-inline-code, $bgcolor-inline-code, $bordercolor-inline-code);
   }
 }
 
-.code-inline {
-  @include atm.code-inline-color($color-inline-code, $bgcolor-inline-code, $bordercolor-inline-code);
+.code {
+  @include code.code-inline-color($color-inline-code, $bgcolor-inline-code, $bordercolor-inline-code);
 }
 
 .code-highlighted {