Scipaper/Frontend
5
0
Fork 0
Code Issues 15 Pull Requests Packages Projects Releases Wiki Activity

resolve headers, lists, link, paragraph..

Browse Source
This commit is contained in:
“Salar 2022-10-21 17:57:55 +03:00
parent 00deb05850
commit 9939b1c824
1 changed files with 121 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

134
src/components/Markdown.tsx
View File

@ -16,6 +16,7 @@ import Heading from "./typography/Heading";
import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
import { dark } from "react-syntax-highlighter/dist/esm/styles/prism";
import Link from "./typography/Link";
import style from "react-syntax-highlighter/dist/esm/styles/hljs/a11y-dark";
export type Props = {
markdown: string;
@ -27,19 +28,126 @@ const Markdown = ({ markdown }: Props) => {
remarkPlugins={[remarkGfm]}
children={markdown}
components={{
h1: Heading,
h2: Typography,
a: (props) => {
return (
<Link
href={props.href}
className="text-sky-600 font-bold text-base"
{...props}
>
{props.children}
</Link>
);
},
ul: ({ node, ...props }) => (
<ul
style={{
listStyleType: "disc",
}}
className="mx-8"
{...props}
/>
),
ol: ({ node, ...props }) => (
<ol className="list-decimal mx-8" {...props} />
),
h1: ({ node, ...props }) => (
<h1
style={{
fontWeight: "bold",
marginInlineEnd: 0,
marginInlineStart: 0,
marginBlockStart: 11,
marginBlockEnd: 11,
fontSize: 32,
}}
{...props}
/>
),
h2: ({ node, ...props }) => (
<h1
style={{
fontWeight: "bold",
marginInlineEnd: 0,
marginInlineStart: 0,
marginBlockStart: 13.28,
marginBlockEnd: 13.28,
fontSize: 24,
}}
{...props}
/>
),
h3: ({ node, ...props }) => (
<h1
style={{
fontWeight: "bold",
marginInlineEnd: 0,
marginInlineStart: 0,
marginBlockStart: 16,
marginBlockEnd: 16,
fontSize: 18.72,
}}
{...props}
/>
),
h4: ({ node, ...props }) => (
<h1
style={{
fontWeight: "bold",
marginInlineEnd: 0,
marginInlineStart: 0,
marginBlockStart: 21.28,
marginBlockEnd: 21.28,
}}
{...props}
/>
),
h5: ({ node, ...props }) => (
<h1
style={{
fontWeight: "bold",
marginInlineEnd: 0,
marginInlineStart: 0,
marginBlockStart: 26.72,
marginBlockEnd: 26.72,
fontSize: 13.28,
}}
{...props}
/>
),
h6: ({ node, ...props }) => (
<h1
style={{
fontWeight: "bold",
marginInlineEnd: 0,
marginInlineStart: 0,
marginBlockStart: 37.28,
marginBlockEnd: 37.28,
fontSize: 10.72,
}}
{...props}
/>
),
p: Typography,
a: ({ node, ...props }) => (
<Link
className=" inline-flex text-sm font-bold text-blue-500"
{...props}
/>
),
code({ node, inline, className, children, ...props }) {
const match = /language-(\w+)/.exec(className || "");
return !inline && match ? (