Learn Shiki Rehype Pretty Code - Integration with Content Frameworks

#Introduction

After understanding the rehype-pretty-code pipeline, only one question remains: how do you install it in the framework you use? The good news is that because almost all Markdown-based content frameworks support rehype plugins, the integration pattern is nearly identical.

Episode 11 covers integration in four popular frameworks: Next.js with @next/mdx and Velite, Astro, SvelteKit, and VitePress. The focus is on the config file that differs in each framework, while the core of the pipeline stays the same. After this episode, you can switch frameworks without relearning.

#Integration in Next.js

#Using @next/mdx

Install the required packages, then register the rehype plugin in next.config.mjs:

npm i @next/mdx @mdx-js/loader @mdx-js/react rehype-pretty-code

Then configure Next.js so .mdx files are processed through MDX:

next.config.mjs

import withMDX from "@next/mdx";
import rehypePrettyCode from "rehype-pretty-code";
 
const nextConfig = withMDX({
  extension: /\.mdx?$/,
  options: {
    rehypePlugins: [[rehypePrettyCode, { theme: "github-dark-default" }]],
  },
});
 
export default nextConfig;

Because Next.js builds pages statically at build time, all tokens are highlighted at build time. You can use the App Router or the Pages Router; the result is still static HTML without extra JavaScript.

#Using Velite

If your project uses Velite to manage content, add rehypePrettyCode to the plugin list in velite.config.ts. Velite forwards rehype plugin options through its content pipeline so all posts and series use the same configuration. This is the pattern your blog currently uses.

#Integration in Astro

#markdown.rehypePlugins

Astro provides a markdown option in astro.config.mjs:

astro.config.mjs

import { defineConfig } from "astro/config";
import rehypePrettyCode from "rehype-pretty-code";
 
export default defineConfig({
  markdown: {
    rehypePlugins: [
      [rehypePrettyCode, { theme: "github-dark-default" }],
    ],
  },
});

Astro applies this plugin to Markdown and MDX files alike. Because Astro is static-first, highlighting works entirely at build time and the result can be served from a CDN without JavaScript.

#Integration in SvelteKit and VitePress

#SvelteKit with mdsvex

SvelteKit doesn't process Markdown natively, so you need mdsvex as a preprocessor:

npm i mdsvex rehype-pretty-code

svelte.config.js

import { mdsvex } from "mdsvex";
import rehypePrettyCode from "rehype-pretty-code";
 
export default {
  extensions: [".svelte", ".md"],
  preprocess: mdsvex({
    rehypePlugins: [
      [rehypePrettyCode, { theme: "github-dark-default" }],
    ],
  }),
};

With mdsvex, .md files are treated as Svelte components and the rehype pipeline runs before rendering. Note that mdsvex runs plugins at build time, so the content stays static.

#VitePress

VitePress also uses rehype plugins via the markdown option:

.vitepress/config.ts

import { defineConfig } from "vitepress";
import rehypePrettyCode from "rehype-pretty-code";
 
export default defineConfig({
  markdown: {
    rehypePlugins: [
      [rehypePrettyCode, { theme: "github-dark-default" }],
    ],
  },
});

VitePress suits documentation because meta strings like title and diff directly produce neat figures. All frameworks in this episode use the [rehypePrettyCode, options] pattern, so you just read each one's documentation to find the rehypePlugins option location.

#Integration Summary

#The Same Pattern in All Frameworks

From the four examples, the core is identical: register rehypePrettyCode as a rehype plugin in the form [rehypePrettyCode, options]. The difference is only in the config file and how the framework accepts the plugin:

• Next.js: the rehypePlugins option in @next/mdx or the Velite pipeline.
• Astro: the markdown.rehypePlugins option.
• SvelteKit: the rehypePlugins option on mdsvex.
• VitePress: the markdown.rehypePlugins option.

Understanding this pattern lets you read the documentation of any framework and immediately find the plugin installation point.

#Conclusion

Key takeaways:

• All content frameworks support rehype plugins with the same pattern.
• Next.js uses @next/mdx or the Velite pipeline in the build config.
• Astro uses the markdown.rehypePlugins option in astro.config.mjs.
• SvelteKit uses mdsvex as a preprocessor.
• VitePress uses the markdown.rehypePlugins option in its config.
• Highlighting runs at build time so the output stays static HTML.

In episode 12 you'll learn managing custom langs and themes: importing local grammars and themes, loading only the languages needed, and keeping the bundle size down with selective langs and themes selection.