fix syntax highlighting (#2301)

ui/desktop/src/components/MarkdownContent.tsx

@@ -5,19 +5,9 @@ import rehypeRaw from 'rehype-raw';
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
 import { oneDark } from 'react-syntax-highlighter/dist/esm/styles/prism';
 import { Check, Copy } from './icons';
-import { visit } from 'unist-util-visit';
 
-function rehypeinlineCodeProperty() {
-  return function (tree) {
-    if (!tree) return;
-    visit(tree, 'element', function (node) {
-      if (node.tagName == 'code' && node.parent && node.parent.tagName === 'pre') {
-        node.properties.inlinecode = 'false';
-      } else {
-        node.properties.inlinecode = 'true';
-      }
-    });
-  };
+interface CodeProps extends React.ClassAttributes<HTMLElement>, React.HTMLAttributes<HTMLElement> {
+  inline?: boolean;
 }
 
 interface MarkdownContentProps {
@@ -73,12 +63,26 @@ const CodeBlock = ({ language, children }: { language: string; children: string
   );
 };
 
+const MarkdownCode = React.forwardRef(function MarkdownCode(
+  { inline, className, children, ...props }: CodeProps,
+  ref: React.Ref<HTMLElement>
+) {
+  const match = /language-(\w+)/.exec(className || '');
+  return !inline && match ? (
+    <CodeBlock language={match[1]}>{String(children).replace(/\n$/, '')}</CodeBlock>
+  ) : (
+    <code ref={ref} {...props} className="break-all bg-inline-code whitespace-pre-wrap">
+      {children}
+    </code>
+  );
+});
+
 export default function MarkdownContent({ content, className = '' }: MarkdownContentProps) {
   return (
     <div className="w-full overflow-x-hidden">
       <ReactMarkdown
         remarkPlugins={[remarkGfm]}
-        rehypePlugins={[rehypeinlineCodeProperty, rehypeRaw]}
+        rehypePlugins={[rehypeRaw]}
         className={`prose prose-sm text-textStandard dark:prose-invert w-full max-w-full word-break
           prose-pre:p-0 prose-pre:m-0 !p-0
           prose-code:break-all prose-code:whitespace-pre-wrap
@@ -98,16 +102,7 @@ export default function MarkdownContent({ content, className = '' }: MarkdownCon
           ${className}`}
         components={{
           a: ({ ...props }) => <a {...props} target="_blank" rel="noopener noreferrer" />,
-          code({ className, children, inlinecode, ...props }) {
-            const match = /language-(\w+)/.exec(className || 'language-text');
-            return inlinecode == 'false' && match ? (
-              <CodeBlock language={match[1]}>{String(children).replace(/\n$/, '')}</CodeBlock>
-            ) : (
-              <code {...props} className={`break-all bg-inline-code whitespace-pre-wrap`}>
-                {children}
-              </code>
-            );
-          },
+          code: MarkdownCode,
         }}
       >
         {content}

ui/desktop/src/styles/main.css

@@ -290,6 +290,7 @@
     padding: 1em;
   }
 
+  li > code.bg-inline-code,
   p > code.bg-inline-code {
     color: var(--block-orange);
     padding: 2px 4px;