Improve markdown styles

src/components/StaticSites/Markdown.tsx

@@ -6,7 +6,7 @@ import rehypeKatex from 'rehype-katex'
 import remarkGfm from 'remark-gfm'
 import remarkMath from 'remark-math'
 
-import {H1, H2, H3, MarkdownLink, P, Table, Td, Th} from './Texts'
+import {H1, H2, H3, Li, MarkdownLink, P, Table, Td, Th} from './Texts'
 
 type MarkdownProps = {
   content: string
@@ -17,14 +17,15 @@ export const Markdown: FC<MarkdownProps> = ({content}) => (
     remarkPlugins={[remarkGfm, remarkMath]}
     rehypePlugins={[rehypeKatex]}
     components={{
-      th: Th,
-      td: Td,
       a: MarkdownLink,
       table: Table,
+      th: Th,
+      td: Td,
       p: P,
       h1: H1,
       h2: H2,
       h3: H3,
+      li: Li,
     }}
   >
     {content}

src/components/StaticSites/Texts.module.scss

@@ -9,11 +9,4 @@
 .th {
   background-color: black;
   color: white;
-  font-weight: bold;
-  font-style: italic;
-  text-transform: uppercase;
-}
-
-.p {
-  margin: 1rem 0;
 }

src/components/StaticSites/Texts.module.scss.d.ts

@@ -1,5 +1,4 @@
 export type Styles = {
-  p: string
   table: string
   td: string
   th: string

src/components/StaticSites/Texts.tsx

@@ -1,6 +1,12 @@
 import {Typography} from '@mui/material'
 import {FC, ReactNode} from 'react'
-import {ReactMarkdownProps, TableDataCellProps, TableHeaderCellProps} from 'react-markdown/lib/ast-to-react'
+import {
+  HeadingProps,
+  LiProps,
+  ReactMarkdownProps,
+  TableDataCellProps,
+  TableHeaderCellProps,
+} from 'react-markdown/lib/ast-to-react'
 
 import {Link} from '../Clickable/Link'
 import styles from './Texts.module.scss'
@@ -15,26 +21,51 @@ export const MarkdownLink: FC<MarkdownLinkProps> = ({children, href}) => (
     {children}
   </Link>
 )
-export const Th: FC<TableHeaderCellProps> = ({children}) => <th className={styles.th}>{children}</th>
-export const Td: FC<TableDataCellProps> = ({children}) => <td className={styles.td}>{children}</td>
+
 export const Table: FC<ReactMarkdownProps> = ({children}) => <table className={styles.table}>{children}</table>
+
+export const Th: FC<TableHeaderCellProps> = ({children}) => (
+  <th className={styles.th}>
+    <Typography variant="h3" component="span">
+      {children}
+    </Typography>
+  </th>
+)
+
+export const Td: FC<TableDataCellProps> = ({children}) => (
+  <td className={styles.td}>
+    <Typography variant="body1">{children}</Typography>
+  </td>
+)
+
+export const Li: FC<LiProps> = ({children}) => (
+  <li>
+    <Typography variant="body1" mt={1} component="div">
+      {children}
+    </Typography>
+  </li>
+)
+
 export const P: FC<ReactMarkdownProps> = ({children}) => (
-  <Typography variant="body1" sx={{marginTop: 1}} component="div">
+  <Typography variant="body1" mt={1} component="div">
     {children}
   </Typography>
 )
-export const H1: FC<ReactMarkdownProps> = ({children}) => (
-  <Typography variant="h1" sx={{marginTop: 10}}>
+
+export const H1: FC<HeadingProps> = ({children}) => (
+  <Typography variant="h1" mt={10}>
     {children}
   </Typography>
 )
-export const H2: FC<ReactMarkdownProps> = ({children}) => (
-  <Typography variant="h2" sx={{marginTop: 5}}>
+
+export const H2: FC<HeadingProps> = ({children}) => (
+  <Typography variant="h2" mt={5}>
     {children}
   </Typography>
 )
-export const H3: FC<ReactMarkdownProps> = ({children}) => (
-  <Typography variant="h3" sx={{marginTop: 3}}>
+
+export const H3: FC<HeadingProps> = ({children}) => (
+  <Typography variant="h3" mt={3}>
     {children}
   </Typography>
 )