Customize Default Syntax Highlighting

The default Syntax highlighting was too close to vomit on the docs. 🤮

• You can change the default syntax highlighting theme
• You can Change for both light and dark mode.

Quick Recap

/.vitepress/config.mjs

import { defineConfig } from "vitepress";

export default defineConfig({
    // ==> Inside Here <==
});

We will be making changes here.

Change Theme

Set a single theme:

/.vitepress/config.mjs

import { defineConfig } from "vitepress";

export default defineConfig({
  markdown: {
    theme: "catppuccin-latte",
  },
});

Set Theme for light and dark mode:

/.vitepress/config.mjs

import { defineConfig } from "vitepress";

export default defineConfig({
  markdown: {
    theme: {
      light: "catppuccin-latte",
      dark: "andromeeda",
    },
  },
});

Reference

• Official Docs (Vitepress) 🚀
• Official Docs (Shiki) 🚀