1 files changed, 32 insertions, 0 deletions
diff --git a/packages/web/src/components/share/content-code.tsx b/packages/web/src/components/share/content-code.tsx
new file mode 100644
index 000000000..b8c4f2ccd
--- /dev/null
+++ b/packages/web/src/components/share/content-code.tsx
@@ -0,0 +1,32 @@
+import { type JSX, splitProps, createResource, Suspense } from "solid-js"
+import { codeToHtml } from "shiki"
+import style from "./content-code.module.css"
+import { transformerNotationDiff } from "@shikijs/transformers"
+
+interface Props {
+  code: string
+  lang?: string
+  flush?: boolean
+}
+export function ContentCode(props: Props) {
+  const [html] = createResource(
+    () => [props.code, props.lang],
+    async ([code, lang]) => {
+      // TODO: For testing delays
+      // await new Promise((resolve) => setTimeout(resolve, 3000))
+      return (await codeToHtml(code || "", {
+        lang: lang || "text",
+        themes: {
+          light: "github-light",
+          dark: "github-dark",
+        },
+        transformers: [transformerNotationDiff()],
+      })) as string
+    },
+  )
+  return (
+    <Suspense>
+      <div innerHTML={html()} class={style.root} data-flush={props.flush === true ? true : undefined} />
+    </Suspense>
+  )
+}