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[bot]]

@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.

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
tailwind-nextjs-starter-blog	❌ Failed (Inspect)			Jun 29, 2025 6:25am

[timlrx]

Sorry for the late reply but thanks for your efforts. I am not totally convinced on changing to shinki as a default but showing how this set up might work is a useful resource - so I am happy to link this as a variation instead.

Also, there's a small issue with the build:

Failed to compile.
./components/Pre.tsx:6:61
Type error: An index signature must have a type annotation.
  4 | import { useState, useRef, ReactNode } from 'react'
  5 |
> 6 | const Pre = ({ children, ...props }: { children: ReactNode; [key: string] }) => {
    |                                                             ^
  7 |   const preRef = useRef<HTMLPreElement>(null)
  8 |   const [copied, setCopied] = useState(false)
  9 |
Next.js build worker exited with code: 1 and signal: null

[ttys3]

Shiki +1