use shiki as highlighter

astro.config.mts

@@ -11,7 +11,13 @@ export default defineConfig({
   site: SITE_URL,
   markdown: {
     rehypePlugins: [handleLocalCoverPlugin, ...themePipeline],
-    syntaxHighlight: "prism",
+    syntaxHighlight: "shiki",
+    shikiConfig: {
+      themes: {
+        light: 'github-light',
+        dark: 'github-dark',
+      },
+    }
   },
   integrations: [
     vue(),

cspell.json

@@ -19,6 +19,7 @@
     "openapi",
     "Rehype",
     "rehypePlugins",
+    "shiki",
     "tseslint"
   ]
 }

public/static/js/initPost.js

@@ -5,9 +5,7 @@ document.head.appendChild(scriptMd5)
 
 scriptMd5.onload = function () {
   console.log("md5.js loaded")
-  // step1. sythx highlighting
-  syntaxHighlight()
-  // step2. lazyload
+  // step1. lazyload
   initLazyLoad()
 }
 
@@ -81,31 +79,3 @@ function renderStyle(sign, percent) {
   }
   };`
 }
-
-function syntaxHighlight() {
-  var script = document.createElement("script")
-  script.src = "/static/js/hljs.js"
-  document.head.appendChild(script)
-
-  var styleLight = document.createElement("link")
-  styleLight.rel = "stylesheet"
-  styleLight.href = "/static/css/stackoverflow-light.min.css"
-
-  var styleDark = document.createElement("link")
-  styleDark.rel = "stylesheet"
-  styleDark.href = "/static/css/stackoverflow-dark.min.css"
-
-  if (document.querySelector("body").classList.contains("theme-dark")) {
-    document.head.appendChild(styleDark)
-  }
-  else {
-    document.head.appendChild(styleLight)
-  }
-
-  script.onload = function () {
-    console.log("hljs.js loaded")
-    document.querySelectorAll("pre code").forEach(function (block) {
-      hljs.highlightBlock(block)
-    })
-  }
-}

src/plugins/theme.ts

@@ -145,6 +145,12 @@ const body: RehypePlugin = () => (tree) => {
             node.properties.className = ["page-body-copy"]
             node.tagName = "div"
           }
+          if (node.tagName === "pre") {
+            const originalClassName = node.properties.className
+            node.properties.className = originalClassName instanceof Array
+              ? [...originalClassName, "page-body-copy"]
+              : ["page-body-copy"]
+          }
           if (["h1", "h2", "h3", "h4", "h5", "h6"].includes(node.tagName)) {
             node.properties.className = ["page-body-header"]
           }

src/styles/global.css

@@ -12,6 +12,7 @@
   --footer-pipe-color: #86868b;
   --footer-directory-title-color: #1d1d1f;
   --footer-directory-title-color-hover: #000;
+  --borer-radius: 10px;
 }
 
 *,
@@ -37,6 +38,21 @@ body, input, textarea, select, button {
     -moz-osx-font-smoothing:grayscale
 }
 
+body.theme-dark .astro-code,
+body.theme-dark .astro-code span {
+    color: var(--shiki-dark) !important;
+    background-color: var(--shiki-dark-bg) !important;
+    /* Optional, if you also want font styles */
+    font-style: var(--shiki-dark-font-style) !important;
+    font-weight: var(--shiki-dark-font-weight) !important;
+    text-decoration: var(--shiki-dark-text-decoration) !important;
+}
+.astro-code{
+  padding: 12px;
+  border-radius: var(--borer-radius);
+  background-color: var(--gray-primary) !important; 
+}
+
 ul,
 ol,
 li,