feat: syntax highlighting

catppuccin · Sep 7, 2024 · 7a0bd65 · 7a0bd65
1 parent 786d6ac
commit 7a0bd65
Show file tree

Hide file tree

Showing 3 changed files with 79 additions and 48 deletions.
diff --git a/README.md b/README.md
@@ -37,21 +37,37 @@
 ## Usage
 
 1. Install the theme using `npm install 42willow/vitepress`
-2. Import the theme
-
-`.vitepress/theme/index.ts`
-
-```ts
-import DefaultTheme from "vitepress/theme";
-import "@catppuccin/vitepress/theme/<flavor>/<accent>.css"
-
-export default DefaultTheme;
-```
 
-See [extending the default theme](https://vitepress.dev/guide/extending-default-theme#extending-the-default-theme) for more information.
-
-> [!NOTE]
-> Latte is included in all flavors as the light mode variant.
+2. Import the theme
+    `.vitepress/theme/index.ts`
+
+    ```ts
+    import DefaultTheme from "vitepress/theme";
+    import "@catppuccin/vitepress/theme/<flavor>/<accent>.css"
+
+    export default DefaultTheme;
+    ```
+
+    See [extending the default theme](https://vitepress.dev/guide/extending-default-theme#extending-the-default-theme) for more information.
+
+    > [!NOTE]
+    > Latte is included in all flavors as the light mode variant.
+
+3. Set syntax highlighting to Catppuccin
+    `.vitepress/config.mts`
+
+    ```ts
+    export default defineConfig({
+      // ...
+      markdown: {
+        theme: {
+          light: 'catppuccin-latte',
+          dark: 'catppuccin-<flavor>',
+        },
+      },
+      // ...
+    });
+    ```
 
 ## 💝 Thanks to
 

diff --git a/site/.vitepress/config.mts b/site/.vitepress/config.mts
@@ -6,6 +6,12 @@ export default defineConfig({
   description: "A VitePress theme",
   srcDir: "./src",
   base: "/vitepress/",
+  markdown: {
+    theme: {
+      light: 'catppuccin-latte',
+      dark: 'catppuccin-mocha',
+    },
+  },
   themeConfig: {
     logo: {
       src: "https://github.com/catppuccin/catppuccin/blob/main/assets/logos/exports/1544x1544_circle.png?raw=true",
@@ -16,9 +22,6 @@ export default defineConfig({
       { text: "Home", link: "/" },
       { text: "Install", link: "/install" },
     ],
-
-
-
     sidebar: [
       {
         items: [
@@ -27,7 +30,6 @@ export default defineConfig({
         ]
       }
     ],
-
     socialLinks: [{ icon: "github", link: "https://github.com/42willow/vitepress" }],
   },
 });
diff --git a/site/src/install.md b/site/src/install.md
@@ -1,37 +1,50 @@
 # Usage
 
-1. Install the theme using your preferred package manager:
-  ::: code-group
-
-  ```bash [npm]
-  npm install 42willow/vitepress
-  ```
-  ```bash [Yarn]
-  yarn add git+https://github.com/42willow/vitepress.git
-  ```
-  ```bash [pnpm]
-  pnpm add github:42willow/vitepress
-  ```
-  ```bash [Bun]
-  bun add github:42willow/vitepress
-  ```
-  :::
+1. Install the theme using your preferred package manager
+    ::: code-group
+    ```bash [npm]
+    npm install 42willow/vitepress
+    ```
+    ```bash [Yarn]
+    yarn add git+https://github.com/42willow/vitepress.git
+    ```
+    ```bash [pnpm]
+    pnpm add github:42willow/vitepress
+    ```
+    ```bash [Bun]
+    bun add github:42willow/vitepress
+    ```
+    :::
 
 2. Import the theme
-
-`.vitepress/theme/index.ts`
-
-```ts
-import DefaultTheme from "vitepress/theme";
-import "@catppuccin/vitepress/theme/<flavor>/<accent>.css"
-
-export default DefaultTheme;
-```
-
-See [extending the default theme](https://vitepress.dev/guide/extending-default-theme#extending-the-default-theme) for more information.
-
-> [!NOTE]
-> Latte is included in all flavors as the light mode variant.
+    `.vitepress/theme/index.ts`
+
+    ```ts{2}
+    import DefaultTheme from "vitepress/theme";
+    import "@catppuccin/vitepress/theme/<flavor>/<accent>.css"
+
+    export default DefaultTheme;
+    ```
+
+    See [extending the default theme](https://vitepress.dev/guide/extending-default-theme#extending-the-default-theme) for more information.
+    > [!NOTE]
+    > Latte is included in all flavors as the light mode variant.
+
+3. Set syntax highlighting to Catppuccin
+    `.vitepress/config.mts`
+
+    ```ts{6}
+    export default defineConfig({
+      // ...
+      markdown: {
+        theme: {
+          light: 'catppuccin-latte',
+          dark: 'catppuccin-<flavor>',
+        },
+      },
+      // ...
+    });
+    ```
 
 &nbsp;