Code Blocks
Advanced code blocks with highlighting, file names and more.
The code blocks on the documentation site and the blog are powered by rehype-pretty-code. The syntax highlighting is done using shiki.
It has the following features:
- Beautiful code blocks with syntax highlighting.
- Support for VS Code themes.
- Works with hundreds of languages.
- Line and word highlighting.
- Support for line numbers.
- Show code block titles using meta strings.
Thanks to Shiki, highlighting is done at build time. No JavaScript is sent to the client for runtime highlighting.
Example
import { withContentlayer } from "next-contentlayer"
/** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
images: {
domains: ["avatars.githubusercontent.com"],
},
experimental: {
appDir: true,
serverComponentsExternalPackages: ["@prisma/client"],
},
}
export default withContentlayer(nextConfig)Title
```ts title="path/to/file.ts"
// Code here
```Line Highlight
```ts {1,3-6}
// Highlight line 1 and line 3 to 6
```Word Highlight
```ts /shadcn/
// Highlight the word shadcn.
```Line Numbers
```ts showLineNumbers
// This will show line numbers.
```