diff --git a/app/lish/[did]/[publication]/[rkey]/PubCodeBlock.tsx b/app/lish/[did]/[publication]/[rkey]/PubCodeBlock.tsx
index 726b1a54..93ce70ef 100644
--- a/app/lish/[did]/[publication]/[rkey]/PubCodeBlock.tsx
+++ b/app/lish/[did]/[publication]/[rkey]/PubCodeBlock.tsx
@@ -2,7 +2,7 @@
 
 import { PubLeafletBlocksCode } from "lexicons/api";
 import { useLayoutEffect, useState } from "react";
-import { codeToHtml } from "shiki";
+import { codeToHtml, bundledLanguagesInfo, bundledThemesInfo } from "shiki";
 
 export function PubCodeBlock({
   block,
@@ -14,10 +14,10 @@ export function PubCodeBlock({
   const [html, setHTML] = useState<string | null>(prerenderedCode || null);
 
   useLayoutEffect(() => {
-    codeToHtml(block.plaintext, {
-      lang: block.language || "plaintext",
-      theme: block.syntaxHighlightingTheme || "github-light",
-    }).then(setHTML);
+    const lang = bundledLanguagesInfo.find((l) => l.id === block.language)?.id || "plaintext";
+    const theme = bundledThemesInfo.find((t) => t.id === block.syntaxHighlightingTheme)?.id || "github-light";
+
+    codeToHtml(block.plaintext, { lang, theme }).then(setHTML);
   }, [block]);
   return (
     <div
diff --git a/app/lish/[did]/[publication]/[rkey]/StaticPostContent.tsx b/app/lish/[did]/[publication]/[rkey]/StaticPostContent.tsx
index 49afb00c..7721d9b0 100644
--- a/app/lish/[did]/[publication]/[rkey]/StaticPostContent.tsx
+++ b/app/lish/[did]/[publication]/[rkey]/StaticPostContent.tsx
@@ -14,7 +14,7 @@ import {
 import { blobRefToSrc } from "src/utils/blobRefToSrc";
 import { BaseTextBlock } from "./BaseTextBlock";
 import { StaticMathBlock } from "./StaticMathBlock";
-import { codeToHtml } from "shiki";
+import { codeToHtml, bundledLanguagesInfo, bundledThemesInfo } from "shiki";
 
 export function StaticPostContent({
   blocks,
@@ -62,10 +62,14 @@ let Block = async ({
       return <StaticMathBlock block={b.block} />;
     }
     case PubLeafletBlocksCode.isMain(b.block): {
-      let html = await codeToHtml(b.block.plaintext, {
-        lang: b.block.language || "plaintext",
-        theme: b.block.syntaxHighlightingTheme || "github-light",
-      });
+      let { language, syntaxHighlightingTheme } = b.block;
+      const lang =
+        bundledLanguagesInfo.find((l) => l.id === language)?.id || "plaintext";
+      const theme =
+        bundledThemesInfo.find((t) => t.id === syntaxHighlightingTheme)?.id ||
+        "github-light";
+
+      let html = await codeToHtml(b.block.plaintext, { lang, theme });
       return (
         <div
           className="w-full min-h-[42px] rounded-md border-border-light outline-border-light selected-outline"
diff --git a/app/lish/[did]/[publication]/[rkey]/extractCodeBlocks.ts b/app/lish/[did]/[publication]/[rkey]/extractCodeBlocks.ts
index b69f92e5..85e8df84 100644
--- a/app/lish/[did]/[publication]/[rkey]/extractCodeBlocks.ts
+++ b/app/lish/[did]/[publication]/[rkey]/extractCodeBlocks.ts
@@ -3,7 +3,7 @@ import {
   PubLeafletPagesLinearDocument,
   PubLeafletBlocksCode,
 } from "lexicons/api";
-import { codeToHtml } from "shiki";
+import { codeToHtml, bundledLanguagesInfo, bundledThemesInfo } from "shiki";
 
 export async function extractCodeBlocks(
   blocks: PubLeafletPagesLinearDocument.Block[],
@@ -17,10 +17,14 @@ export async function extractCodeBlocks(
     const indexKey = currentIndex.join(".");
 
     if (PubLeafletBlocksCode.isMain(block.block)) {
-      const html = await codeToHtml(block.block.plaintext, {
-        lang: block.block.language || "plaintext",
-        theme: block.block.syntaxHighlightingTheme || "github-light",
-      });
+      let { language, syntaxHighlightingTheme } = block.block;
+      const lang =
+        bundledLanguagesInfo.find((l) => l.id === language)?.id || "plaintext";
+      let theme =
+        bundledThemesInfo.find((t) => t.id === syntaxHighlightingTheme)?.id ||
+        "github-light";
+
+      const html = await codeToHtml(block.block.plaintext, { lang, theme });
       codeBlocks.set(indexKey, html);
     }
   }