Sign InSign Up
Breadcrumbs

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:

  1. Beautiful code blocks with syntax highlighting.
  2. Support for VS Code themes.
  3. Works with hundreds of languages.
  4. Line and word highlighting.
  5. Support for line numbers.
  6. 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

next.config.mjs
tsimport { build } from 'velite'
 
/** @type {import('next').NextConfig} */
const nextConfig = {
  pageExtensions: ['js', 'jsx', 'mdx', 'ts', 'tsx'],
  webpack: (config) => {
    config.plugins.push(new VeliteWebpackPlugin())
    return config
  },
}
 
class VeliteWebpackPlugin {
  static started = false
  constructor(/** @type {import('velite').Options} */ options = {}) {
    this.options = options
  }
  apply(/** @type {import('webpack').Compiler} */ compiler) {
    compiler.hooks.beforeCompile.tap('VeliteWebpackPlugin', async () => {
      if (VeliteWebpackPlugin.started) return
      VeliteWebpackPlugin.started = true
      const dev = compiler.options.mode === 'development'
      this.options.watch = this.options.watch ?? dev
      this.options.clean = this.options.clean ?? !dev
      await build(this.options)
    })
  }
}
 
export default nextConfig

Title

mdx```ts title="path/to/file.ts"
// Code here
```

Line Highlight

ts// Highlight line 1 and line 3 to 6
/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  images: {
    domains: ["avatars.githubusercontent.com"],
  },
  experimental: {
    appDir: true,
    serverComponentsExternalPackages: ["@prisma/client"],
  },
}

Word Highlight

ts// Highlight the word NextJS.

Line Numbers

ts// This will show line numbers.
PreviousComponents
NextStyle Guide