feat: replace Prism with Shiki and add support for light/dark themes

[suvaranjan]

✨ New Code Block Themes with Shiki

This PR replaces the existing PrismJS setup with Shiki, enabling faster, more accurate, and theme-aware syntax highlighting with support for both light and dark modes.

---

🔍 Why Shiki?

• ⚡ Faster & Accurate: Shiki uses the same syntax engine as VS Code, ensuring high-quality highlighting for most mainstream languages.
• 🧠 No Manual Tweaks Needed: Say goodbye to custom RegEx, HTML hacks, or extra CSS.
• 🌓 Automatic Light/Dark Support: Code blocks now respond automatically to the app’s theme.
• 🎨 Wide Theme Variety: Choose from a broad set of built-in themes (see list below).
• 🛠️ Supports Custom Themes: You can pass a Theme object to load your own theme.

---

⚙️ How to Configure

In contentlayer.config.ts, you can configure the default themes like this:

themes: {
  light: 'github-light',
  dark: 'aurora-x',
}

You can directly use shiki built-in themes. you just need to replace light and dark values with fallowing.

andromeeda
aurora-x
ayu-dark
catppuccin-frappe
catppuccin-latte
catppuccin-macchiato
catppuccin-mocha
dark-plus
dracula
dracula-soft
everforest-dark
everforest-light
github-dark
github-dark-default
github-dark-dimmed
github-dark-high-contrast
github-light
github-light-default
github-light-high-contrast
gruvbox-dark-hard
gruvbox-dark-medium
gruvbox-dark-soft
gruvbox-light-hard
gruvbox-light-medium
gruvbox-light-soft
houston
kanagawa-dragon
kanagawa-lotus
kanagawa-wave
laserwave
light-plus
material-theme
material-theme-darker
material-theme-lighter
material-theme-ocean
material-theme-palenight
min-dark
min-light
monokai
night-owl
nord
one-dark-pro
one-light
plastic
poimandres
red
rose-pine
rose-pine-dawn
rose-pine-moon
slack-dark
slack-ochin
snazzy-light
solarized-dark
solarized-light
synthwave-84
tokyo-night
vesper
vitesse-black
vitesse-dark
vitesse-light

🌗 Example: Light & Dark Themes

🔄 Update Summary

1. Removed prism.css import from app/blog/[...slug]/page.tsx
2. Added a new Pre.tsx component in the components/ folder
3. Updated MDXComponents.tsx to use the custom Pre component instead of the one from Pliny
4. Enhanced the release-of-tailwind-nextjs-starter-blog-v2.0.mdx post with a guide for Shiki theme usage
5. Deleted the old prism.css file
6. Modified contentlayer.config.ts to remove PrismJS and integrate the @shikijs/rehype plugin
7. Updated package.json to remove PrismJS packages and add the Shiki rehype package
8. Updated tailwind.css with:
   • ✨ Class-based dark theme styles for Shiki
   • 🎯 Code block title styles using remark-code-title (Mac-style title bar)

I hope you like it.

[vercel]

@suvaranjan is attempting to deploy a commit to the timlrx's projects Team on Vercel.

A member of the Team first needs to authorize it.