File size: 1,725 Bytes
9b906ea | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 | import React from "react";
import { ExtraProps } from "react-markdown";
import { vscDarkPlus } from "react-syntax-highlighter/dist/esm/styles/prism";
import { CopyableContentWrapper } from "#/components/shared/buttons/copyable-content-wrapper";
import { cn } from "#/utils/utils";
import { SyntaxHighlighter } from "./syntax-highlighter";
// See https://github.com/remarkjs/react-markdown?tab=readme-ov-file#use-custom-components-syntax-highlight
/**
* Component to render code blocks in markdown.
*/
export function code({
children,
className,
}: React.ClassAttributes<HTMLElement> &
React.HTMLAttributes<HTMLElement> &
ExtraProps) {
const match = /language-(\w+)/.exec(className || ""); // get the language
const codeString = String(children).replace(/\n$/, "");
if (!match) {
const isMultiline = String(children).includes("\n");
if (!isMultiline) {
return (
<code
className={cn(
className,
"bg-surface-raised text-foreground border border-surface-raised rounded px-[0.4em] py-[0.2em]",
)}
>
{children}
</code>
);
}
return (
<CopyableContentWrapper text={codeString}>
<pre className="bg-surface-raised text-foreground border border-surface-raised rounded p-[1em] overflow-auto">
<code className={className}>{codeString}</code>
</pre>
</CopyableContentWrapper>
);
}
return (
<CopyableContentWrapper text={codeString}>
<SyntaxHighlighter
className="rounded-lg"
style={vscDarkPlus}
language={match?.[1]}
PreTag="div"
>
{codeString}
</SyntaxHighlighter>
</CopyableContentWrapper>
);
}
|