diff --git a/ui/desktop/src/components/MarkdownContent.tsx b/ui/desktop/src/components/MarkdownContent.tsx index 67f3d20e69..3d712a653e 100644 --- a/ui/desktop/src/components/MarkdownContent.tsx +++ b/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, React.HTMLAttributes { + 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 +) { + const match = /language-(\w+)/.exec(className || ''); + return !inline && match ? ( + {String(children).replace(/\n$/, '')} + ) : ( + + {children} + + ); +}); + export default function MarkdownContent({ content, className = '' }: MarkdownContentProps) { return (
, - code({ className, children, inlinecode, ...props }) { - const match = /language-(\w+)/.exec(className || 'language-text'); - return inlinecode == 'false' && match ? ( - {String(children).replace(/\n$/, '')} - ) : ( - - {children} - - ); - }, + code: MarkdownCode, }} > {content} diff --git a/ui/desktop/src/styles/main.css b/ui/desktop/src/styles/main.css index 752358238c..8f7310df1a 100644 --- a/ui/desktop/src/styles/main.css +++ b/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;