70 lines
2.2 KiB
TypeScript
70 lines
2.2 KiB
TypeScript
import React from "react";
|
|
|
|
/* -------------------------------------------------------------------------- */
|
|
/* MarkDown */
|
|
/* -------------------------------------------------------------------------- */
|
|
import ReactMarkdown from "react-markdown";
|
|
import remarkGfm from "remark-gfm";
|
|
|
|
/* -------------------------------------------------------------------------- */
|
|
/* Components */
|
|
/* -------------------------------------------------------------------------- */
|
|
import Typography from "./typography/Typography";
|
|
import Heading from "./typography/Heading";
|
|
|
|
/* -------------------------------------------------------------------------- */
|
|
/* Code */
|
|
/* -------------------------------------------------------------------------- */
|
|
import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
|
|
import { dark } from "react-syntax-highlighter/dist/esm/styles/prism";
|
|
import Link from "./typography/Link";
|
|
import { indexOf } from "lodash";
|
|
|
|
export type Props = {
|
|
markdown: string;
|
|
};
|
|
|
|
const Markdown = ({ markdown }: Props) => {
|
|
let newMarkdown = markdown.replace(/\n/g, " \n");
|
|
|
|
return (
|
|
<ReactMarkdown
|
|
remarkPlugins={[remarkGfm]}
|
|
children={newMarkdown}
|
|
components={{
|
|
h1: Heading,
|
|
h2: Typography,
|
|
a: (props) => {
|
|
return (
|
|
<Link
|
|
href={props.href}
|
|
className="text-sky-600 font-bold text-base"
|
|
{...props}
|
|
>
|
|
{props.children}
|
|
</Link>
|
|
);
|
|
},
|
|
|
|
code({ node, inline, className, children, ...props }) {
|
|
const match = /language-(\w+)/.exec(className || "");
|
|
return !inline && match ? (
|
|
<SyntaxHighlighter
|
|
children={String(children).replace(/\n$/, "")}
|
|
style={dark}
|
|
language={match[1]}
|
|
PreTag="div"
|
|
/>
|
|
) : (
|
|
<code className={className} {...props}>
|
|
{children}
|
|
</code>
|
|
);
|
|
},
|
|
}}
|
|
/>
|
|
);
|
|
};
|
|
|
|
export default Markdown;
|