gofnnp/w-lab-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

md

Browse Source
This commit is contained in:
dev.daminik00 2025-10-28 23:32:48 +01:00
parent 89ae5215d4
commit dd85ba62f1
1 changed files with 28 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
src/components/ui/MarkdownText/MarkdownText.tsx
View File

@ -1,6 +1,6 @@
"use client";
import ReactMarkdown from "react-markdown";
import ReactMarkdown, { type Components } from "react-markdown";
import remarkGfm from "remark-gfm";
import styles from "./MarkdownText.module.scss";
@ -14,35 +14,35 @@ export default function MarkdownText({
content,
className,
}: MarkdownTextProps) {
const components: Components = {
h1: ({ ...props }) => <h1 className={styles.h1} {...props} />,
h2: ({ ...props }) => <h2 className={styles.h2} {...props} />,
h3: ({ ...props }) => <h3 className={styles.h3} {...props} />,
h4: ({ ...props }) => <h4 className={styles.h4} {...props} />,
h5: ({ ...props }) => <h5 className={styles.h5} {...props} />,
h6: ({ ...props }) => <h6 className={styles.h6} {...props} />,
p: ({ ...props }) => <p className={styles.paragraph} {...props} />,
li: ({ ...props }) => <li className={styles.listItem} {...props} />,
strong: ({ ...props }) => <strong className={styles.bold} {...props} />,
em: ({ ...props }) => <em className={styles.italic} {...props} />,
pre: ({ ...props }) => <pre className={styles.codeBlock} {...props} />,
// @ts-expect-error - inline prop is provided by react-markdown
code: ({ inline, ...props }) =>
inline ? (
<code className={styles.inlineCode} {...props} />
) : (
<code className={styles.code} {...props} />
),
blockquote: ({ ...props }) => <blockquote className={styles.blockquote} {...props} />,
hr: ({ ...props }) => <hr className={styles.hr} {...props} />,
a: ({ ...props }) => (
<a className={styles.link} target="_blank" rel="noopener noreferrer" {...props} />
),
};
return (
<div className={`${styles.markdown} ${className || ""}`}>
<ReactMarkdown
remarkPlugins={[remarkGfm]}
components={{
h1: ({ ...props }) => <h1 className={styles.h1} {...props} />,
h2: ({ ...props }) => <h2 className={styles.h2} {...props} />,
h3: ({ ...props }) => <h3 className={styles.h3} {...props} />,
h4: ({ ...props }) => <h4 className={styles.h4} {...props} />,
h5: ({ ...props }) => <h5 className={styles.h5} {...props} />,
h6: ({ ...props }) => <h6 className={styles.h6} {...props} />,
p: ({ ...props }) => <p className={styles.paragraph} {...props} />,
li: ({ ...props }) => <li className={styles.listItem} {...props} />,
strong: ({ ...props }) => <strong className={styles.bold} {...props} />,
em: ({ ...props }) => <em className={styles.italic} {...props} />,
pre: ({ ...props }) => <pre className={styles.codeBlock} {...props} />,
code: ({ inline, ...props }: any) =>
inline ? (
<code className={styles.inlineCode} {...props} />
) : (
<code className={styles.code} {...props} />
),
blockquote: ({ ...props }) => <blockquote className={styles.blockquote} {...props} />,
hr: ({ ...props }) => <hr className={styles.hr} {...props} />,
a: ({ ...props }) => (
<a className={styles.link} target="_blank" rel="noopener noreferrer" {...props} />
),
}}
>
<ReactMarkdown remarkPlugins={[remarkGfm]} components={components}>
{content}
</ReactMarkdown>
</div>