feat: introduce Expressive Code for code block rendering (#476)

* feat: improve code block feature with Expressive Code

* docs: add example Markdown file for visual review

* feat: improve styles of Expressive Code

* fix: errors from the merging

* chore: formatting

* chore: update config

* chore: update dependencies

* fix: fix build error

* fix: minor fixes

* fix: style tweaks

* docs: update example post

* fix: isolate copy button timeouts to avoid cross-button interference

---------

Co-authored-by: Hasenpfote <Hasenpfote36@gmail.com>

src/layouts/Layout.astro

@@ -305,17 +305,6 @@ function initCustomScrollbar() {
 			autoHideSuspend: false,
 		},
 	});
-	const preElements = document.querySelectorAll('pre');
-	preElements.forEach((ele) => {
-		OverlayScrollbars(ele, {
-			scrollbars: {
-				theme: 'scrollbar-base scrollbar-dark px-2',
-				autoHide: 'leave',
-				autoHideDelay: 500,
-				autoHideSuspend: false
-			}
-		});
-	});
 
 	const katexElements = document.querySelectorAll('.katex-display') as NodeListOf<HTMLElement>;
 
@@ -328,14 +317,14 @@ function initCustomScrollbar() {
 	const processKatexElement = (element: HTMLElement) => {
 		if (!element.parentNode) return;
 		if (element.hasAttribute('data-scrollbar-initialized')) return;
-		
+
 		const container = document.createElement('div');
 		container.className = 'katex-display-container';
 		container.setAttribute('aria-label', 'scrollable container for formulas');
-		
+
 		element.parentNode.insertBefore(container, element);
 		container.appendChild(element);
-		
+
 		OverlayScrollbars(container, {
 			scrollbars: {
 				theme: 'scrollbar-base scrollbar-auto',
@@ -344,7 +333,7 @@ function initCustomScrollbar() {
 				autoHideSuspend: false
 			}
 		});
-		
+
 		element.setAttribute('data-scrollbar-initialized', 'true');
 	};
 
@@ -364,13 +353,13 @@ function initCustomScrollbar() {
 
 function showBanner() {
 	if (!siteConfig.banner.enable) return;
-	
+
 	const banner = document.getElementById('banner');
 	if (!banner) {
 		console.error('Banner element not found');
 		return;
 	}
-	
+
 	banner.classList.remove('opacity-0', 'scale-105');
 }