diff --git a/decohub/components/Markdown.tsx b/decohub/components/Markdown.tsx index be4eb92a7..1f590df3d 100644 --- a/decohub/components/Markdown.tsx +++ b/decohub/components/Markdown.tsx @@ -1,10 +1,33 @@ -import { CSS, KATEX_CSS, render } from "jsr:@deno/gfm@0.9.0"; -import "npm:prismjs@1.29.0/components/prism-diff.js"; -import "npm:prismjs@1.29.0/components/prism-jsx.js"; -import "npm:prismjs@1.29.0/components/prism-tsx.js"; -import "npm:prismjs@1.29.0/components/prism-typescript.js"; +interface DenoGfm { + render: ( + content: string, + options: { + allowIframes: boolean; + allowMath: boolean; + disableHtmlSanitization: boolean; + }, + ) => string; + KATEX_CSS: string; + CSS: string; +} +let denoGfm: Promise | null = null; +const importDenoGfm = async (): Promise => { + const gfmVersion = `0.9.0`; + try { + const gfm = await import(`jsr:@deno/gfm@${gfmVersion}`); + return gfm; + } catch (err) { + return { + render: () => `could not dynamic load @deno/gfm@${gfmVersion} ${err}`, + KATEX_CSS: "", + CSS: "", + }; + } +}; export const Markdown = async (path: string) => { + denoGfm ??= importDenoGfm(); + const { CSS, KATEX_CSS, render } = await denoGfm; const content = await fetch(path) .then((res) => res.text()) .catch(() => `Could not fetch README.md for ${path}`);