Use pre and code tags for setting codeblock type

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

@@ -14,11 +14,11 @@ Object.entries<object>(oneDark).forEach(([key, value]) => {
 
 
 type InlineCodeBlockProps = {
-  children: ReactNode,
-  className?: string,
+ children: ReactNode,
+ className?: string,
 }
 
-const InlineCodeBlockSubstance = (props: InlineCodeBlockProps): JSX.Element => {
+export const InlineCodeBlockSubstance = (props: InlineCodeBlockProps): JSX.Element => {
   const { children, className, ...rest } = props;
   return <code className={`code-inline ${className ?? ''}`} {...rest}>{children}</code>;
 };
@@ -50,22 +50,8 @@ function extractChildrenToIgnoreReactNode(children: ReactNode): ReactNode {
 }
 
 function CodeBlockSubstance({ lang, children }: { lang: string, children: ReactNode }): JSX.Element {
-  // return alternative element
-  //   in order to fix "CodeBlock string is be [object Object] if searched"
-  // see: https://github.com/weseek/growi/pull/7484
-  //
-  // Note: You can also remove this code if the user requests to see the code highlighted in Prism as-is.
-
-  const isSimpleString = typeof children === 'string' || (Array.isArray(children) && children.length === 1 && typeof children[0] === 'string');
-  if (!isSimpleString) {
-    return (
-      <div style={oneDark['pre[class*="language-"]']}>
-        <code className={`language-${lang}`} style={oneDark['code[class*="language-"]']}>
-          {children}
-        </code>
-      </div>
-    );
-  }
+  // SIMPLIFIED: Now that this function is only for block-level code,
+  // the conditional check for isSimpleString is no longer necessary.
 
   return (
     <PrismAsyncLight
@@ -79,18 +65,13 @@ function CodeBlockSubstance({ lang, children }: { lang: string, children: ReactN
 }
 
 type CodeBlockProps = {
-  children: ReactNode,
-  className?: string,
-  inline?: true,
+ children: ReactNode,
+ className?: string,
 }
 
 export const CodeBlock = (props: CodeBlockProps): JSX.Element => {
-
   // TODO: set border according to the value of 'customize:highlightJsStyleBorder'
-  const { className, children, inline } = props;
-  if (inline) {
-    return <InlineCodeBlockSubstance className={`code-inline ${className ?? ''}`}>{children}</InlineCodeBlockSubstance>;
-  }
+  const { className, children } = props;
 
   const match = /language-(\w+)(:?.+)?/.exec(className || '');
   const lang = match && match[1] ? match[1] : '';

apps/app/src/services/renderer/renderer.tsx

@@ -13,7 +13,7 @@ import deepmerge from 'ts-deepmerge';
 import type { Pluggable, PluginTuple } from 'unified';
 
 
-import { CodeBlock } from '~/components/ReactMarkdownComponents/CodeBlock';
+import { CodeBlock, InlineCodeBlockSubstance } from '~/components/ReactMarkdownComponents/CodeBlock';
 import { NextLink } from '~/components/ReactMarkdownComponents/NextLink';
 import type { RendererOptions } from '~/interfaces/renderer-options';
 import { RehypeSanitizeType } from '~/interfaces/services/rehype-sanitize';
@@ -118,6 +118,8 @@ export const generateCommonOptions = (pagePath: string|undefined): RendererOptio
     ],
     components: {
       a: NextLink,
+      pre: CodeBlock,
+      code: InlineCodeBlockSubstance,
     },
   };
 };