set scss for word breaking

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

@@ -1,6 +1,25 @@
 @use '~/styles/variables' as var;
 @use '@growi/core/scss/bootstrap/init' as bs;
 
+
+.code-highlighted {
+  // for word wrapping
+  // ref: https://qiita.com/spaceonly/items/9aa8599a082cb72740b7
+  %breaker {
+    word-break: break-all !important;
+    word-wrap: break-word !important;
+    overflow-wrap: break-word !important;
+    white-space: break-spaces !important;
+    line-break: anywhere !important;
+  };
+
+  @extend %breaker;
+
+  code {
+    @extend %breaker;
+  }
+}
+
 .code-highlighted-title {
   position: absolute;
   top: 0;

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

@@ -1,11 +1,12 @@
-import { ReactNode } from 'react';
+import type { ReactNode } from 'react';
 
-import type { CodeComponent } from 'react-markdown/lib/ast-to-react';
+import type { CodeComponent, CodeProps } 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';
 
+const codeHighlightedClass = styles['code-highlighted'];
 
 // remove font-family
 Object.entries<object>(oneDark).forEach(([key, value]) => {
@@ -49,7 +50,7 @@ function CodeBlockSubstance({ lang, children }: { lang: string, children: ReactN
   const isSimpleString = Array.isArray(children) && children.length === 1 && typeof children[0] === 'string';
   if (!isSimpleString) {
     return (
-      <div className="code-highlighted" style={oneDark['pre[class*="language-"]']}>
+      <div className={codeHighlightedClass} style={oneDark['pre[class*="language-"]']}>
         <code className={`language-${lang}`} style={oneDark['code[class*="language-"]']}>
           {children}
         </code>
@@ -59,7 +60,7 @@ function CodeBlockSubstance({ lang, children }: { lang: string, children: ReactN
 
   return (
     <PrismAsyncLight
-      className="code-highlighted"
+      className={codeHighlightedClass}
       PreTag="div"
       style={oneDark}
       language={lang}
@@ -69,7 +70,7 @@ function CodeBlockSubstance({ lang, children }: { lang: string, children: ReactN
   );
 }
 
-export const CodeBlock: CodeComponent = ({ inline, className, children }) => {
+export const CodeBlock: CodeComponent = ({ inline, className, children }: CodeProps) => {
 
   if (inline) {
     return <code className={`code-inline ${className ?? ''}`}>{children}</code>;