feat: footnote style and gfm task style

Signed-off-by: Innei <i@innei.in>
Innei · Jun 20, 2024 · fafd9e4 · fafd9e4
1 parent 2bae0e7
commit fafd9e4
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 16 deletions.
diff --git a/src/components/ui/markdown/Markdown.tsx b/src/components/ui/markdown/Markdown.tsx
@@ -1,12 +1,12 @@
 'use client'
 
-/* eslint-disable react-hooks/rules-of-hooks */
-import type React from 'react'
 import { Fragment, memo, Suspense, useMemo, useRef } from 'react'
 import { clsx } from 'clsx'
 import { compiler, sanitizeUrl } from 'markdown-to-jsx'
 import Script from 'next/script'
 import type { MarkdownToJSX } from 'markdown-to-jsx'
+/* eslint-disable react-hooks/rules-of-hooks */
+import type React from 'react'
 import type { FC, PropsWithChildren } from 'react'
 
 import { CodeBlockRender } from '~/components/modules/shared/CodeBlock'
@@ -139,6 +139,7 @@ export const Markdown: FC<MdProps & MarkdownToJSX.Options & PropsWithChildren> =
                   key={state?.key}
                   checked={node.completed}
                   readOnly
+                  className="!size-[1em]"
                 />
               )
             },

diff --git a/src/components/ui/markdown/renderers/footnotes.tsx b/src/components/ui/markdown/renderers/footnotes.tsx
@@ -10,14 +10,14 @@ import { redHighlight } from '../utils/redHighlight'
 
 export const MFootNote: FC<PropsWithChildren> = (props) => {
   return (
-    <div className="children:my-2 children:leading-6 children:text-base mt-4">
+    <div id="md-footnote" className="mt-4">
       <Divider />
-      {React.Children.map(props.children, (child) => {
-        if (React.isValidElement(child)) {
-          const id = child.props.id
-          return (
-            <div id={`${getFootNoteDomId(id)}`}>
-              <div className="inline">
+      <ul className="list-[upper-roman] space-y-3 text-base text-zinc-600 dark:text-neutral-400">
+        {React.Children.map(props.children, (child) => {
+          if (React.isValidElement(child)) {
+            const id = child.props.id
+            return (
+              <li id={`${getFootNoteDomId(id)}`} key={id}>
                 {React.cloneElement(child as React.ReactElement, {
                   className: 'inline',
                 })}
@@ -39,13 +39,13 @@ export const MFootNote: FC<PropsWithChildren> = (props) => {
                     {id}
                   </span>
                 </a>
-              </div>
-            </div>
-          )
-        } else {
-          return null // 或者其他处理方式
-        }
-      })}
+              </li>
+            )
+          } else {
+            return null // 或者其他处理方式
+          }
+        })}
+      </ul>
     </div>
   )
 }