Merge branch 'master' into fix/sharelink-page

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

@@ -1,10 +1,5 @@
 @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-title {
   position: absolute;
@@ -16,5 +11,5 @@
   color: bs.$gray-900;
   background: bs.$gray-300;
   border-radius: bs.$border-radius;
-  opacity: 0.6;
+  opacity: 0.8;
 }

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

@@ -1,12 +1,14 @@
-import { CodeComponent } from 'react-markdown/lib/ast-to-react';
-import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
-import { oneLight } from 'react-syntax-highlighter/dist/cjs/styles/prism';
+import type { CodeComponent } from 'react-markdown/lib/ast-to-react';
+import { PrismAsyncLight } from 'react-syntax-highlighter';
+import { oneDark } from 'react-syntax-highlighter/dist/cjs/styles/prism';
 
 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'
@@ -20,14 +22,14 @@ export const CodeBlock: CodeComponent = ({ inline, className, children }) => {
       {name != null && (
         <cite className={`code-highlighted-title ${styles['code-highlighted-title']}`}>{name}</cite>
       )}
-      <SyntaxHighlighter
+      <PrismAsyncLight
         className="code-highlighted"
         PreTag="div"
-        style={oneLight}
+        style={oneDark}
         language={lang}
       >
         {String(children).replace(/\n$/, '')}
-      </SyntaxHighlighter>
+      </PrismAsyncLight>
     </>
   );
 };

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:not([class^='language-']) {
+  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
 //
@@ -49,14 +50,8 @@ $theme-colors: map-merge($theme-colors, ( primary: $primary ));
 // determine variables with　bootstrap function (These variables can be used after importing bootstrap above)
 $color-modal-header: color-yiq($primary) !default;
 
-:not(pre) {
-  > code {
-    @include atm.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:not([class^='language-']) {
+  @include code.code-inline-color($color-inline-code, $bgcolor-inline-code, $bordercolor-inline-code);
 }
 
 .code-highlighted {