Switch from astro built-in shikiji syntax highlighting to rehype-pretty-code

2025-12-06 07:16:46 -06:00 · 2023-11-28 01:42:50 -06:00
parent a078b0be36
commit 64f4ae80ce
3 changed files with 119 additions and 15 deletions
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -1,26 +1,38 @@
+// import { getHighlighter, BUNDLED_LANGUAGES } from "shiki";
 import { defineConfig } from "astro/config";
 import tailwind from "@astrojs/tailwind";
 import sitemap from "@astrojs/sitemap";
 import robotsTxt from "astro-robots-txt";
-
+import rehypePrettyCode from "rehype-pretty-code";
 import mdx from "@astrojs/mdx";

+/** @type {import('rehype-pretty-code').Options} */
+const prettyOptions = {
+  theme: "github-dark",
+  keepBackground: false,
+  tokensMap: {
+    fn: "entity.name.function",
+  },
+  // getHighlighter: (options) => getHighlighter({
+  //     ...options,
+  //     langs: [
+  //       ...BUNDLED_LANGUAGES,
+  //       {
+  //         id: "proc",
+  //         scopeName: "source.groq",
+  //         path: "../../../../../src/grammars/proc.json",
+  //       },
+  //     ],
+  //   }),
+};
+
 // https://astro.build/config
 export default defineConfig({
-  site: 'https://undefined.behavio.rs',
+  site: "https://undefined.behavio.rs",
  prefetch: true,
  integrations: [tailwind(), sitemap(), robotsTxt(), mdx()],
  markdown: {
-    shikiConfig: {
-      // Choose from Shiki's built-in themes (or add your own)
-      // https://github.com/shikijs/shiki/blob/main/docs/themes.md
-      theme: 'github-dark',
-      // Add custom languages
-      // Note: Shiki has countless langs built-in, including .astro!
-      // https://github.com/shikijs/shiki/blob/main/docs/languages.md
-      langs: [],
-      // Enable word wrap to prevent horizontal scrolling
-      wrap: true
-    }
-  }
+    syntaxHighlight: false,
+    rehypePlugins: [[rehypePrettyCode, prettyOptions]],
+  },
 });
--- a/package.json
+++ b/package.json
@@ -17,10 +17,13 @@
    "@astrojs/tailwind": "^5.0.2",
    "astro": "^3.6.0",
    "astro-robots-txt": "^1.0.0",
+    "astro-seo": "^0.8.0",
    "date-fns": "^2.30.0",
    "prettier": "^3.1.0",
    "prettier-plugin-astro": "^0.12.2",
+    "rehype-pretty-code": "^0.10.2",
    "sass": "^1.69.5",
+    "shiki": "^0.14.5",
    "tailwindcss": "^3.3.5",
    "typescript": "^5.3.2"
  }
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -26,6 +26,9 @@ dependencies:
  astro-robots-txt:
    specifier: ^1.0.0
    version: 1.0.0
+  astro-seo:
+    specifier: ^0.8.0
+    version: 0.8.0
  date-fns:
    specifier: ^2.30.0
    version: 2.30.0
@@ -35,9 +38,15 @@ dependencies:
  prettier-plugin-astro:
    specifier: ^0.12.2
    version: 0.12.2
+  rehype-pretty-code:
+    specifier: ^0.10.2
+    version: 0.10.2(shiki@0.14.5)
  sass:
    specifier: ^1.69.5
    version: 1.69.5
+  shiki:
+    specifier: ^0.14.5
+    version: 0.14.5
  tailwindcss:
    specifier: ^3.3.5
    version: 3.3.5
@@ -1162,6 +1171,10 @@ packages:
    engines: {node: '>=12'}
    dev: false

+  /ansi-sequence-parser@1.1.1:
+    resolution: {integrity: sha512-vJXt3yiaUL4UU546s3rPXlsry/RnM730G1+HkpKE012AN0sx1eOrxSu95oKDIonskeLTijMgqWZ3uDEe3NFvyg==}
+    dev: false
+
  /ansi-styles@3.2.1:
    resolution: {integrity: sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==}
    engines: {node: '>=4'}
@@ -1223,6 +1236,10 @@ packages:
      zod: 3.22.4
    dev: false

+  /astro-seo@0.8.0:
+    resolution: {integrity: sha512-7gq6lhibCM8FuzZIJlbLLWP5EJ9KL2/4XqeFrAg9O6ZK2xMFxJ5ubKf+a0VJwwTu8W8Xr421CmpiXu6Hq7n/7Q==}
+    dev: false
+
  /astro@3.6.0(sass@1.69.5)(typescript@5.3.2):
    resolution: {integrity: sha512-mRDzWXsaSBaN+juvunO4Ukq8HQ1WqrULlcZfKzaKEZEXvxiWmMKN9tH0onQH0EaQ7+f4nNR4VN9kYTM26uMrXQ==}
    engines: {node: '>=18.14.1', npm: '>=6.14.0'}
@@ -2073,6 +2090,15 @@ packages:
    engines: {node: '>=4'}
    dev: false

+  /hash-obj@4.0.0:
+    resolution: {integrity: sha512-FwO1BUVWkyHasWDW4S8o0ssQXjvyghLV2rfVhnN36b2bbcj45eGiuzdn9XOvOpjV3TKQD7Gm2BWNXdE9V4KKYg==}
+    engines: {node: '>=12'}
+    dependencies:
+      is-obj: 3.0.0
+      sort-keys: 5.0.0
+      type-fest: 1.4.0
+    dev: false
+
  /hasown@2.0.0:
    resolution: {integrity: sha512-vUptKVTpIJhcczKBbgnS+RtcuYMB8+oNzPK2/Hp3hanz8JmpATdmmgLgSaadVREkDm+e2giHwY3ZRkyjSIDDFA==}
    engines: {node: '>= 0.4'}
@@ -2229,6 +2255,12 @@ packages:
      zwitch: 2.0.4
    dev: false

+  /hast-util-to-string@2.0.0:
+    resolution: {integrity: sha512-02AQ3vLhuH3FisaMM+i/9sm4OXGSq1UhOOCpTLLQtHdL3tZt7qil69r8M8iDkZYyC0HCFylcYoP+8IO7ddta1A==}
+    dependencies:
+      '@types/hast': 2.3.8
+    dev: false
+
  /hast-util-whitespace@2.0.1:
    resolution: {integrity: sha512-nAxA0v8+vXSBDt3AnRUNjyRIQ0rD+ntpbAp4LnPkumc5M9yUbSMa4XDU9Q6etY4f1Wp4bNgvc1yjiZtsTTrSng==}
    dev: false
@@ -2409,6 +2441,11 @@ packages:
    engines: {node: '>=0.12.0'}
    dev: false

+  /is-obj@3.0.0:
+    resolution: {integrity: sha512-IlsXEHOjtKhpN8r/tRFj2nDyTmHvcfNeu/nrRIcXE17ROeatXchkojffa1SpdqW4cr/Fj6QkEf/Gn4zf6KKvEQ==}
+    engines: {node: '>=12'}
+    dev: false
+
  /is-plain-obj@4.1.0:
    resolution: {integrity: sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==}
    engines: {node: '>=12'}
@@ -2481,6 +2518,10 @@ packages:
    resolution: {integrity: sha512-H8jvkz1O50L3dMZCsLqiuB2tA7muqbSg1AtGEkN0leAqGjsUzDJir3Zwr02BhqdcITPg3ei3mZ+HjMocAknhhg==}
    dev: false

+  /jsonc-parser@3.2.0:
+    resolution: {integrity: sha512-gfFQZrcTc8CnKXp6Y4/CBT3fTc0OVuDofpre4aEeEpSBPV5X5v4+Vmx+8snU7RLPrNHPKSgLxGo9YuQzz20o+w==}
+    dev: false
+
  /kind-of@6.0.3:
    resolution: {integrity: sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==}
    engines: {node: '>=0.10.0'}
@@ -3420,6 +3461,10 @@ packages:
      unist-util-visit-children: 2.0.2
    dev: false

+  /parse-numeric-range@1.3.0:
+    resolution: {integrity: sha512-twN+njEipszzlMJd4ONUYgSfZPDxgHhT9Ahed5uTigpQn90FggW4SA/AIPq/6a149fTbE9qBEcSwE3FAEp6wQQ==}
+    dev: false
+
  /parse5@6.0.1:
    resolution: {integrity: sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw==}
    dev: false
@@ -3710,6 +3755,21 @@ packages:
      unified: 10.1.2
    dev: false

+  /rehype-pretty-code@0.10.2(shiki@0.14.5):
+    resolution: {integrity: sha512-yBgk3S4yXtkAWVrkoN1DqDihjsaP0ReuN9Du4Dtkl/wsgwyqGNGuIUGi2etVHAOsi40e2KRHoOulQqnKPuscPA==}
+    engines: {node: '>=16'}
+    peerDependencies:
+      shiki: 0.x
+    dependencies:
+      hash-obj: 4.0.0
+      hast-util-to-string: 2.0.0
+      parse-numeric-range: 1.3.0
+      rehype-parse: 8.0.5
+      shiki: 0.14.5
+      unified: 10.1.2
+      unist-util-visit: 4.1.2
+    dev: false
+
  /rehype-raw@6.1.1:
    resolution: {integrity: sha512-d6AKtisSRtDRX4aSPsJGTfnzrX2ZkHQLE5kiUuGOeEoLpbEulFF4hj0mLPbsa+7vmguDKOVVEQdHKDSwoaIDsQ==}
    dependencies:
@@ -3955,6 +4015,15 @@ packages:
    engines: {node: '>=8'}
    dev: false

+  /shiki@0.14.5:
+    resolution: {integrity: sha512-1gCAYOcmCFONmErGTrS1fjzJLA7MGZmKzrBNX7apqSwhyITJg2O102uFzXUeBxNnEkDA9vHIKLyeKq0V083vIw==}
+    dependencies:
+      ansi-sequence-parser: 1.1.1
+      jsonc-parser: 3.2.0
+      vscode-oniguruma: 1.7.0
+      vscode-textmate: 8.0.0
+    dev: false
+
  /shikiji@0.6.13:
    resolution: {integrity: sha512-4T7X39csvhT0p7GDnq9vysWddf2b6BeioiN3Ymhnt3xcy9tXmDcnsEFVxX18Z4YcQgEE/w48dLJ4pPPUcG9KkA==}
    dependencies:
@@ -4009,6 +4078,13 @@ packages:
      sax: 1.3.0
    dev: false

+  /sort-keys@5.0.0:
+    resolution: {integrity: sha512-Pdz01AvCAottHTPQGzndktFNdbRA75BgOfeT1hH+AMnJFv8lynkPi42rfeEhpx1saTEI3YNMWxfqu0sFD1G8pw==}
+    engines: {node: '>=12'}
+    dependencies:
+      is-plain-obj: 4.1.0
+    dev: false
+
  /source-map-js@1.0.2:
    resolution: {integrity: sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==}
    engines: {node: '>=0.10.0'}
@@ -4302,6 +4378,11 @@ packages:
    dev: false
    optional: true

+  /type-fest@1.4.0:
+    resolution: {integrity: sha512-yGSza74xk0UG8k+pLh5oeoYirvIiWo5t0/o3zHHAO2tRDiZcxWP7fywNlXhqb6/r6sWvwi+RsyQMWhVLe4BVuA==}
+    engines: {node: '>=10'}
+    dev: false
+
  /type-fest@2.19.0:
    resolution: {integrity: sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA==}
    engines: {node: '>=12.20'}
@@ -4693,6 +4774,14 @@ packages:
    resolution: {integrity: sha512-RAaHx7B14ZU04EU31pT+rKz2/zSl7xMsfIZuo8pd+KZO6PXtQmpevpq3vxvWNcrGbdmhM/rr5Uw5Mz+NBfhVng==}
    dev: false

+  /vscode-oniguruma@1.7.0:
+    resolution: {integrity: sha512-L9WMGRfrjOhgHSdOYgCt/yRMsXzLDJSL7BPrOZt73gU0iWO4mpqzqQzOz5srxqTvMBaR0XZTSrVWo4j55Rc6cA==}
+    dev: false
+
+  /vscode-textmate@8.0.0:
+    resolution: {integrity: sha512-AFbieoL7a5LMqcnOF04ji+rpXadgOXnZsxQr//r83kLPr7biP7am3g9zbaZIaBGwBRWeSvoMD4mgPdX3e4NWBg==}
+    dev: false
+
  /vscode-uri@2.1.2:
    resolution: {integrity: sha512-8TEXQxlldWAuIODdukIb+TR5s+9Ds40eSJrw+1iDDA9IFORPjMELarNQE3myz5XIkWWpdprmJjm1/SxMlWOC8A==}
    dev: false