ContextQMD
Back to Taxonomy

Code Blocks

content/docs/documentation/code-blocks.mdx

latest1.3 KB
Original Source

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

Thanks to Shiki, highlighting is done at build time. No JavaScript is sent to the client for runtime highlighting.

</Callout>

Example

ts
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

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

Line Highlight

mdx
```ts {1,3-6}
// Highlight line 1 and line 3 to 6
```

Word Highlight

mdx
```ts /shadcn/
// Highlight the word shadcn.
```

Line Numbers

mdx
```ts showLineNumbers
// This will show line numbers.
```