diff --git a/packages/ui/src/Atoms/Markdown/Markdown.tsx b/packages/ui/src/Atoms/Markdown/Markdown.tsx
index 8f8dd16b7..22101aafb 100644
--- a/packages/ui/src/Atoms/Markdown/Markdown.tsx
+++ b/packages/ui/src/Atoms/Markdown/Markdown.tsx
@@ -23,6 +23,19 @@ export function Markdown({ content }: Props) {
                             {children}
                         </a>
                     ),
+                    pre: ({ children, ...props }) => (
+                        <pre
+                            className="border border-border-solid rounded p-4 bg-transparent font-mono text-sm overflow-x-auto text-inherit"
+                            {...props}
+                        >
+                            {children}
+                        </pre>
+                    ),
+                    code: ({ children, ...props }) => (
+                        <code className="font-mono text-sm text-inherit" {...props}>
+                            {children}
+                        </code>
+                    ),
                 }}
             >
                 {content}
diff --git a/packages/ui/tailwind.config.js b/packages/ui/tailwind.config.js
index 9e6f56c5c..504e6be7d 100644
--- a/packages/ui/tailwind.config.js
+++ b/packages/ui/tailwind.config.js
@@ -16,9 +16,9 @@ module.exports = {
                         "--tw-prose-quotes": "var(--color-txt-secondary)",
                         "--tw-prose-quote-borders": "var(--color-txt-primary)",
                         "--tw-prose-captions": "var(--color-txt-secondary)",
-                        "--tw-prose-code": "var(--color-txt-secondary)",
-                        "--tw-prose-pre-code": "var(--color-txt-secondary)",
-                        "--tw-prose-pre-bg": "var(--color-txt-secondary)",
+                        "--tw-prose-code": "var(--color-txt-primary)",
+                        "--tw-prose-pre-code": "var(--color-txt-primary)",
+                        "--tw-prose-pre-bg": "transparent",
                         "--tw-prose-th-borders": "var(--color-txt-secondary)",
                         "--tw-prose-td-borders": "var(--color-txt-secondary)",
                     },
diff --git a/pkg/docgen/template.html b/pkg/docgen/template.html
index 52b82dc38..968b76e5d 100644
--- a/pkg/docgen/template.html
+++ b/pkg/docgen/template.html
@@ -318,6 +318,29 @@
         .document-content table tr {
             page-break-inside: avoid;
         }
+
+        .document-content pre {
+            border: 1px solid #ddd;
+            border-radius: 4px;
+            padding: 12px;
+            margin: 12px 0;
+            font-family: 'Courier New', Courier, monospace;
+            font-size: 10pt;
+            background: transparent;
+            overflow-x: auto;
+            page-break-inside: avoid;
+        }
+
+        .document-content code {
+            font-family: 'Courier New', Courier, monospace;
+            font-size: 10pt;
+        }
+
+        .document-content pre code {
+            padding: 0;
+            background: transparent;
+            border: none;
+        }
     </style>
 </head>
 <body>
