diff --git a/src/content/posts/markdown.md b/src/content/posts/markdown.md
index 43285c7..9695bbf 100644
--- a/src/content/posts/markdown.md
+++ b/src/content/posts/markdown.md
@@ -162,5 +162,14 @@ math should get its own line and be put in in double-dollarsigns:
 
 $$I = \int \rho R^{2} dV$$
 
+$$
+\begin{equation*}
+\pi
+=3.1415926535
+ \;8979323846\;2643383279\;5028841971\;6939937510\;5820974944
+ \;5923078164\;0628620899\;8628034825\;3421170679\;\ldots
+\end{equation*}
+$$
+
 And note that you can backslash-escape any punctuation characters
 which you wish to be displayed literally, ex.: \`foo\`, \*bar\*, etc.
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index fe29503..43a86f2 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -305,7 +305,8 @@ function initCustomScrollbar() {
 			autoHideSuspend: false,
 		},
 	});
-	document.querySelectorAll('pre').forEach((ele) => {
+	const preElements = document.querySelectorAll('pre');
+	preElements.forEach((ele) => {
 		OverlayScrollbars(ele, {
 			scrollbars: {
 				theme: 'scrollbar-base scrollbar-dark px-2',
@@ -315,6 +316,14 @@ function initCustomScrollbar() {
 			}
 		});
 	});
+	const katexElements = document.querySelectorAll('.katex-display') as NodeListOf<HTMLElement>;
+	katexElements.forEach((ele) => {
+		OverlayScrollbars(ele, {
+			scrollbars: {
+				theme: 'scrollbar-base scrollbar-auto py-1',
+			}
+		});
+	});
 }
 
 function showBanner() {