Detect inline code blocks

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

@@ -65,14 +65,12 @@ function CodeBlockSubstance({ lang, children }: { lang: string, children: ReactN
     </PrismAsyncLight>
   );
 }
-
-export const InlineCodeBlock = ({ className, children }: { className: string, children: JSX.Element}): JSX.Element => {
-  return <code className={`code-inline ${className ?? ''}`}>{children}</code>;
-};
-
 export const CodeBlock = ({ className, children }: {className: string, children: JSX.Element}): JSX.Element => {
 
   // TODO: set border according to the value of 'customize:highlightJsStyleBorder'
+  if (className === 'inline') {
+    return <code className={`code-inline ${className ?? ''}`}>{children}</code>;
+  }
 
   const match = /language-(\w+)(:?.+)?/.exec(className || '');
   const lang = match && match[1] ? match[1] : '';

apps/app/src/services/renderer/remark-plugins/codeblock.ts

@@ -0,0 +1,33 @@
+
+import type { Root } from 'hast';
+import { selectAll } from 'hast-util-select';
+import type { InlineCode } from 'mdast';
+import type { Plugin } from 'unified';
+import { visit } from 'unist-util-visit';
+
+import { addClassToProperties } from '../rehype-plugins/add-class';
+
+export const remarkPlugin: Plugin = () => {
+  return (tree) => {
+    visit(tree, (node) => {
+      if (node.type === 'inlineCode') {
+        const data = (node as InlineCode).data || (node.data = {});
+        // setting inline for rehypePlugin
+        data.hProperties = { inline: true };
+      }
+    });
+  };
+};
+
+export const rehypePlugin: Plugin = () => {
+  return (tree: Root) => {
+    const codeElements = selectAll('code', tree);
+    codeElements.forEach((element) => {
+      // if inlineCode, properties.inline exists.
+      if (element.properties?.inline != null) {
+        element.properties.inline = true;
+        addClassToProperties(element.properties, 'inline');
+      }
+    });
+  };
+};

apps/app/src/services/renderer/remark-plugins/inline-codeblock.ts

@@ -1,25 +0,0 @@
-
-import type { Schema as SanitizeOption } from 'hast-util-sanitize';
-import type { InlineCode } from 'mdast';
-import type { Plugin } from 'unified';
-import { visit } from 'unist-util-visit';
-
-const rewriteNode = (node: InlineCode) => {
-  const data = node.data ?? (node.data = {});
-  data.hName = 'inlinecode';
-};
-
-
-export const remarkPlugin: Plugin = () => {
-  return (tree) => {
-    visit(tree, (node) => {
-      if (node.type === 'inlineCode') {
-        rewriteNode(node as InlineCode);
-      }
-    });
-  };
-};
-
-export const sanitizeOption: SanitizeOption = {
-  tagNames: ['inlinecode'],
-};

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

@@ -14,7 +14,7 @@ import deepmerge from 'ts-deepmerge';
 import type { Pluggable, PluginTuple } from 'unified';
 
 
-import { InlineCodeBlock, CodeBlock } from '~/components/ReactMarkdownComponents/CodeBlock';
+import { CodeBlock } from '~/components/ReactMarkdownComponents/CodeBlock';
 import { NextLink } from '~/components/ReactMarkdownComponents/NextLink';
 import type { RendererOptions } from '~/interfaces/renderer-options';
 import { RehypeSanitizeType } from '~/interfaces/services/rehype-sanitize';
@@ -25,6 +25,7 @@ import { tagNames as recommendedTagNames, attributes as recommendedAttributes }
 import * as addClass from './rehype-plugins/add-class';
 import { relativeLinks } from './rehype-plugins/relative-links';
 import { relativeLinksByPukiwikiLikeLinker } from './rehype-plugins/relative-links-by-pukiwiki-like-linker';
+import * as codeBlocks from './remark-plugins/codeblock';
 import { pukiwikiLikeLinker } from './remark-plugins/pukiwiki-like-linker';
 import * as xsvToTable from './remark-plugins/xsv-to-table';
 
@@ -96,6 +97,7 @@ export const generateCommonOptions = (pagePath: string|undefined): RendererOptio
       pukiwikiLikeLinker,
       growiDirective,
       remarkFrontmatter,
+      codeBlocks.remarkPlugin,
     ],
     remarkRehypeOptions: {
       clobberPrefix: '', // remove clobber prefix
@@ -108,10 +110,10 @@ export const generateCommonOptions = (pagePath: string|undefined): RendererOptio
       [addClass.rehypePlugin, {
         table: 'table table-bordered',
       }],
+      codeBlocks.rehypePlugin,
     ],
     components: {
       a: NextLink,
-      inlinecode: InlineCodeBlock,
       code: CodeBlock,
     },
   };