fix: missing font of katex (close alist-org/alist#5417)

package.json

@@ -66,6 +66,7 @@
     "copy-to-clipboard": "^3.3.2",
     "flv.js": "^1.6.2",
     "hls.js": "^1.2.1",
+    "just-once": "^2.2.0",
     "lightgallery": "^2.5.0",
     "mark.js": "^8.11.1",
     "mitt": "^3.0.0",

src/components/Markdown.tsx

@@ -6,12 +6,20 @@ import rehypeRaw from "rehype-raw"
 import reMarkMath from "remark-math"
 import rehypeKatex from "rehype-katex"
 import "./markdown.css"
-import "./katex.css"
 import { Show, createEffect, createMemo, createSignal, on } from "solid-js"
 import { clsx } from "clsx"
 import { Box } from "@hope-ui/solid"
 import { useParseText } from "~/hooks"
 import { EncodingSelect } from "."
+import once from "just-once"
+
+const insertKatexCSS = once(() => {
+  const link = document.createElement("link")
+  link.rel = "stylesheet"
+  link.href =
+    "https://registry.npmmirror.com/katex/0.16.8/files/dist/katex.min.css"
+  document.head.appendChild(link)
+})
 
 export const Markdown = (props: {
   children?: string | ArrayBuffer
@@ -31,6 +39,7 @@ export const Markdown = (props: {
   createEffect(
     on(md, () => {
       setShow(false)
+      insertKatexCSS()
       setTimeout(() => {
         setShow(true)
         hljs.highlightAll()