From d3317d828e41190ba75a063f7da7acb7206c89af Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Wed, 18 Sep 2024 10:54:59 +0200
Subject: [PATCH] docs: use `shiki-transformer-color-highlight` (#2215)

---
 docs/app/mdc.config.ts                    | 10 ++++++++++
 docs/content/1.getting-started/3.theme.md |  2 +-
 docs/package.json                         |  1 +
 pnpm-lock.yaml                            | 17 +++++++++++++++++
 4 files changed, 29 insertions(+), 1 deletion(-)
 create mode 100644 docs/app/mdc.config.ts

diff --git a/docs/app/mdc.config.ts b/docs/app/mdc.config.ts
new file mode 100644
index 00000000..8291dae8
--- /dev/null
+++ b/docs/app/mdc.config.ts
@@ -0,0 +1,10 @@
+import { defineConfig } from '@nuxtjs/mdc/config'
+import { transformerColorHighlight } from 'shiki-transformer-color-highlight'
+
+export default defineConfig({
+  shiki: {
+    transformers: [
+      transformerColorHighlight()
+    ]
+  }
+})
diff --git a/docs/content/1.getting-started/3.theme.md b/docs/content/1.getting-started/3.theme.md
index 2d86eecd..be20cb14 100644
--- a/docs/content/1.getting-started/3.theme.md
+++ b/docs/content/1.getting-started/3.theme.md
@@ -27,7 +27,7 @@ Tailwind CSS v4 takes a CSS-first configuration approach, you now customize your
   --color-green-700: #007F45;
   --color-green-800: #016538;
   --color-green-900: #0A5331;
-  --color-green-950: #052e16;
+  --color-green-950: #052E16;
 }
 ```
 
diff --git a/docs/package.json b/docs/package.json
index 12dbf593..58c26101 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -18,6 +18,7 @@
     "nuxt-component-meta": "^0.8.2",
     "nuxt-og-image": "^3.0.2",
     "prettier": "^3.3.3",
+    "shiki-transformer-color-highlight": "^0.0.0",
     "ufo": "^1.5.4",
     "valibot": "^0.42.0",
     "yup": "^1.4.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 420bb1d6..e5613a1d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -175,6 +175,9 @@ importers:
       prettier:
         specifier: ^3.3.3
         version: 3.3.3
+      shiki-transformer-color-highlight:
+        specifier: ^0.0.0
+        version: 0.0.0
       ufo:
         specifier: ^1.5.4
         version: 1.5.4
@@ -2630,6 +2633,9 @@ packages:
   colorette@2.0.20:
     resolution: {integrity: sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==}
 
+  colorjs.io@0.5.2:
+    resolution: {integrity: sha512-twmVoizEW7ylZSN32OgKdXRmo1qg+wT5/6C3xu5b9QsWzSFAhHLn2xd8ro0diCsKfCj1RdaTP/nrcW+vAoQPIw==}
+
   comma-separated-tokens@2.0.3:
     resolution: {integrity: sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==}
 
@@ -5589,6 +5595,9 @@ packages:
     engines: {node: '>=4'}
     hasBin: true
 
+  shiki-transformer-color-highlight@0.0.0:
+    resolution: {integrity: sha512-jzaEo6wdBIYelDNrc0UqoHn2zc6m4AXGVWUrHLbV2pw9V3SYjX5VjNQR0eEGPlXZ9BL9NVYXVxHsVxrOxFDZEw==}
+
   shiki@1.17.7:
     resolution: {integrity: sha512-Zf6hNtWhFyF4XP5OOsXkBTEx9JFPiN0TQx4wSe+Vqeuczewgk2vT4IZhF4gka55uelm052BD5BaHavNqUNZd+A==}
 
@@ -9656,6 +9665,8 @@ snapshots:
 
   colorette@2.0.20: {}
 
+  colorjs.io@0.5.2: {}
+
   comma-separated-tokens@2.0.3: {}
 
   commander@10.0.1: {}
@@ -13532,6 +13543,12 @@ snapshots:
       interpret: 1.4.0
       rechoir: 0.6.2
 
+  shiki-transformer-color-highlight@0.0.0:
+    dependencies:
+      '@shikijs/core': 1.17.7
+      '@shikijs/types': 1.17.7
+      colorjs.io: 0.5.2
+
   shiki@1.17.7:
     dependencies:
       '@shikijs/core': 1.17.7