fix scrollbar

package.json

@@ -34,7 +34,6 @@
     "astro-icon": "^1.1.0",
     "astro-seo": "^0.8.4",
     "hast-util-to-html": "^9.0.1",
-    "hast-util-to-string": "^3.0.0",
     "license-checker": "^25.0.1",
     "license-checker-rseidelsohn": "^4.3.0",
     "lightningcss": "^1.25.1",
@@ -55,6 +54,7 @@
     "retext-english": "^5.0.0",
     "retext-equality": "^7.1.0",
     "retext-stringify": "^4.0.0",
+    "shiki": "^1.9.0",
     "sharp": "^0.33.4",
     "typescript": "^5.4.5",
     "unified": "^11.0.4",
@@ -71,7 +71,6 @@
     "npm-run-all2": "^6.2.0",
     "prettier": "^3.3.2",
     "prettier-plugin-astro": "^0.14.0",
-    "shiki": "^1.9.0",
     "stylelint": "^16.6.1",
     "stylelint-config-html": "^1.1.0",
     "stylelint-config-standard": "^36.0.0",

src/components/mdx/pre.astro

@@ -110,7 +110,8 @@ export interface Props {
     }
 
     pre {
-      overflow-x: scroll;
+      overflow-x: auto;
+      scrollbar-color: var(--fg-thumb) var(--fg-track);
       font-size: var(--font-size-sm);
     }
 

src/layouts/global.css

@@ -21,6 +21,8 @@
   --light-fg-normal: rgb(0 0 0 / 85%);
   --light-fg-strong: rgb(0 0 0 / 100%);
   --light-fg-linenum: rgb(0 0 0 / 40%);
+  --light-fg-thumb: #bbb;
+  --light-fg-track: #ddd;
 
   --dark-bg: #202020;
   --dark-bg-code: #303030;
@@ -32,6 +34,8 @@
   --dark-fg-normal: rgb(255 255 255 / 85%);
   --dark-fg-strong: rgb(255 255 255 / 100%);
   --dark-fg-linenum: rgb(255 255 255 / 40%);
+  --dark-fg-thumb: #555;
+  --dark-fg-track: #333;
 }
 
 body {
@@ -53,6 +57,8 @@ body {
   --fg-normal: var(--light-fg-normal);
   --fg-strong: var(--light-fg-strong);
   --fg-linenum: var(--light-fg-linenum);
+  --fg-thumb: var(--light-fg-thumb);
+  --fg-track: var(--light-fg-track);
 }
 
 :root:has(#theme-switcher[data-theme="dark"]) {
@@ -66,4 +72,6 @@ body {
   --fg-normal: var(--dark-fg-normal);
   --fg-strong: var(--dark-fg-strong);
   --fg-linenum: var(--dark-fg-linenum);
+  --fg-thumb: var(--dark-fg-thumb);
+  --fg-track: var(--dark-fg-track);
 }