diff --git a/libs/rich-text-renderer/src/lib/RenderPoetry.astro b/libs/rich-text-renderer/src/lib/RenderPoetry.astro
new file mode 100644
index 0000000..c1dd80e
--- /dev/null
+++ b/libs/rich-text-renderer/src/lib/RenderPoetry.astro
@@ -0,0 +1,30 @@
+---
+import shiki from 'shiki'
+
+const { poetry } = Astro.props
+
+let poetryOutput
+
+await shiki.getHighlighter({
+  theme: 'poimandres',
+}).then(highlighter => {
+  poetryOutput = highlighter.codeToHtml(poetry, { lang: 'markdown' })
+})
+---
+<div class="poetry text-black" set:html={poetryOutput} />
+
+<style is:global>
+  .poetry > pre.shiki {
+    background-color: transparent!important;
+  }
+  pre.shiki {
+    overflow-y: auto;
+    background-color: transparent;
+  }
+  pre.shiki > code {
+    font-family: sans-serif;
+  }
+  pre.shiki > code > * > * {
+    color: black!important;
+  }
+</style>
diff --git a/libs/rich-text-renderer/src/lib/RichTextRenderer.astro b/libs/rich-text-renderer/src/lib/RichTextRenderer.astro
index b4c2be6..42f817d 100644
--- a/libs/rich-text-renderer/src/lib/RichTextRenderer.astro
+++ b/libs/rich-text-renderer/src/lib/RichTextRenderer.astro
@@ -1,5 +1,6 @@
 ---
 import RenderCode from "./RenderCode.astro"
+import RenderPoetry from "./RenderPoetry.astro"
 interface Props {
   data: any
 }
@@ -57,6 +58,9 @@ const { data } = Astro.props
       {field.type === 'code' && (
         <RenderCode code={field.data.code} />
       )}
+      {field.type === 'poetry' && (
+        <RenderPoetry poetry={field.data.poetry} />
+      )}
     </>
   ))}
 </>