fix(frontend): prevent flickering

1 files changed, 20 insertions, 0 deletions

diff --git a/frontend/app/highlight.ts b/frontend/app/highlight.ts
new file mode 100644
index 0000000..1eea8a2
--- /dev/null
+++ b/frontend/app/highlight.ts
@@ -0,0 +1,20 @@
+import { toJsxRuntime } from "hast-util-to-jsx-runtime";
+import { Fragment, type JSX } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { type BundledLanguage, codeToHast } from "./shiki.bundle";
+
+export type { BundledLanguage };
+
+// https://shiki.matsu.io/packages/next
+export async function highlight(code: string, lang: BundledLanguage) {
+	const out = await codeToHast(code.trimEnd(), {
+		lang,
+		theme: "github-light",
+	});
+
+	return toJsxRuntime(out, {
+		Fragment,
+		jsx,
+		jsxs,
+	}) as JSX.Element;
+}