File size: 1,679 Bytes
246d201 |
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 61 62 63 64 65 66 |
import React from "react";
import { ExtraProps } from "react-markdown";
import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
import { vscDarkPlus } from "react-syntax-highlighter/dist/esm/styles/prism";
// 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
if (!match) {
const isMultiline = String(children).includes("\n");
if (!isMultiline) {
return (
<code
className={className}
style={{
backgroundColor: "#2a3038",
padding: "0.2em 0.4em",
borderRadius: "4px",
color: "#e6edf3",
border: "1px solid #30363d",
}}
>
{children}
</code>
);
}
return (
<pre
style={{
backgroundColor: "#2a3038",
padding: "1em",
borderRadius: "4px",
color: "#e6edf3",
border: "1px solid #30363d",
overflow: "auto",
}}
>
<code className={className}>{String(children).replace(/\n$/, "")}</code>
</pre>
);
}
return (
<SyntaxHighlighter
className="rounded-lg"
style={vscDarkPlus}
language={match?.[1]}
PreTag="div"
>
{String(children).replace(/\n$/, "")}
</SyntaxHighlighter>
);
}
|