Code Block Features

December 28, 2025·3 min read

MetaDocumentation

This post demonstrates all the code block features available for writing technical content.

Basic Syntax Highlighting

Standard code blocks with language-specific syntax highlighting:

interface User {
  id: string;
  name: string;
  email: string;
}
 
function greetUser(user: User): string {
  return `Hello, ${user.name}!`;
}

Line Numbers

Add showLineNumbers to display line numbers with a clean separator:

import { Button } from '@/components/ui/button';
 
export function Demo() {
  return (
    <Button variant="primary" size="lg">
      Click me
    </Button>
  );
}

Line Highlighting

Highlight specific lines using {lineNumbers} syntax. You can specify individual lines or ranges:

import { Button } from '@/components/ui/button';
 
export function Demo() {
  return (
    <Button variant="primary" size="lg">
      Click me
    </Button>
  );
}

Multiple ranges work too: {1,4-7,9} highlights line 1, lines 4-7, and line 9.

Diff Highlighting

Show added and removed lines using special comments. These comments are hidden in the output:

function calculateTotal(items: Item[]) {
  return items.reduce((sum, item) => {
    return sum + item.price; 
    return sum + item.price * item.quantity; 
  }, 0);
}

With line numbers:

import { useState } from 'react'; 
import { useState, useEffect } from 'react'; 
 
export function useDocumentTitle(title: string) {
  useEffect(() => { 
    document.title = title; 
  }, [title]); 
}

Code Block Titles

Add a filename or title to your code block:

lib/utils.ts

export function cn(...classes: string[]) {
  return classes.filter(Boolean).join(' ');
}

Terminal

npm install @shikijs/transformers

Inline Highlighting

Highlight specific lines using the highlight annotation:

function App() {
  // This line will be highlighted
  const value = computeExpensiveValue();
 
  return <div>{value}</div>;
}

Combining Features

You can combine multiple features together:

lib/api.ts

import { cache } from 'react';
 
export const getUser = cache(async (id: string) => {
  const res = await fetch(`/api/users/${id}`);
  if (!res.ok) {
    throw new Error('Failed to fetch user');
  }
  return res.json();
});

Title with diff:

config.ts

export const config = {
  apiUrl: 'http://localhost:3000', 
  apiUrl: process.env.API_URL, 
  timeout: 5000,
};

Various Languages

JSON

package.json

{
  "name": "my-app",
  "version": "1.0.0",
  "dependencies": {
    "react": "^19.0.0",
    "next": "^15.0.0"
  }
}

CSS

.button {
  display: inline-flex;
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  background-color: var(--color-blue-500);
  color: white;
  font-weight: 500;
}

SQL

queries/get-users.sql

SELECT
  u.id,
  u.name,
  u.email,
  COUNT(o.id) as order_count
FROM users u
LEFT JOIN orders o ON o.user_id = u.id
WHERE u.created_at > '2024-01-01'
GROUP BY u.id, u.name, u.email
ORDER BY order_count DESC
LIMIT 10;

Shell

# Clone the repository
git clone https://github.com/user/repo.git
cd repo
 
# Install dependencies
bun install
 
# Start development server
bun dev