feat(docs): enhance code presentation

docs/vite.config.ts

@@ -3,6 +3,7 @@ import babel from "@rolldown/plugin-babel"
 import tailwindcss from "@tailwindcss/vite"
 import { icones } from "@icones/vite"
 import { readFile } from "node:fs/promises"
+import expressiveCode from "satteri-expressive-code"
 import { fileURLToPath } from "node:url"
 import { defineConfig, type Plugin } from "vite"
 import { satteri } from "vite-plugin-satteri"
@@ -69,6 +70,23 @@ export default defineConfig({
       mdx: {
         jsxImportSource: "react",
       },
+      hastPlugins: [
+        expressiveCode({
+          frames: false,
+          textMarkers: false,
+          themes: ["github-light", "github-dark"],
+          useDarkModeMediaQuery: false,
+          themeCssSelector: (theme) =>
+            theme.type === "dark" ? ".dark" : ":root:not(.dark)",
+          styleOverrides: {
+            borderRadius: "0.75rem",
+            borderWidth: "1px",
+            codeFontSize: "0.875rem",
+            codeLineHeight: "1.5rem",
+            codePaddingInline: "1rem",
+          },
+        }),
+      ],
     }),
     tailwindcss(),
     icones({