Code Block Features Showcase

The default Shiki pipeline applies build-time syntax highlighting with a dual github-light / github-dark theme. The features below are opt-in via fence metadata.

Title bar

export const greet = (name: string) => `Hello, ${name}!`;

Line numbers

def fib(n):
    if n < 2:
        return n
    return fib(n - 1) + fib(n - 2)

Highlighted lines

fn main() {
    let x = compute();
    println!("{x}");
    if x > 10 {
        warn();
        recover();
    }
}

Title + line numbers + highlights combined

import { highlightToHast } from '@/lib/shiki';
import { toHtml } from 'hast-util-to-html';
import CodeBlockToolbar from './CodeBlockToolbar';

export default async function CodeBlock({ language, children, title }) {
  const hast = await highlightToHast(children, language, { title });
  const html = toHtml(hast);
  return (
    <div className="cb-root">
      {title && <span className="cb-title">{title}</span>}
      <CodeBlockToolbar code={children} />
      <div dangerouslySetInnerHTML={{ __html: html }} />
    </div>
  );
}

Diff with red/green backgrounds

-export const VERSION = "1.0";
+export const VERSION = "2.0";
 export const NAME = "amytis";
-export const STAGE = "alpha";
+export const STAGE = "beta";

Word-wrap toggle

Long lines in code blocks overflow horizontally by default — the block grows a scrollbar at the bottom. Click the Wrap button in any block's header to soft-wrap long lines onto multiple visual lines instead; click again to restore horizontal scrolling.

curl -X POST "https://api.example.com/v1/items?fields=id,name,description,createdAt,updatedAt&sort=createdAt:desc&limit=100&offset=0&filter[status]=active&filter[category]=blog&include=author,tags" -H "Authorization: Bearer YOUR_API_TOKEN_HERE" -H "Content-Type: application/json" -d '{"name":"example","description":"a sufficiently long single line to demonstrate the wrap toggle"}'

Try the Wrap button in the header above ↑ to see the long line collapse into multiple soft-wrapped lines.

Mermaid still works (regression check)

Tabbed code groups

Group adjacent fences into a single tabbed widget by wrapping them in a :::code-group container directive. Tab names come from the [label] token after the language. The mechanism is pure CSS (radio inputs + sibling selectors) — zero JavaScript, zero hydration cost.

When a tab label matches a known package manager, language, or common config filename, an icon appears automatically before the label. Resolution is handled by resolveCodeGroupIcon in src/lib/code-group-icons.ts.

npm install amytis

yarn add amytis

pnpm add amytis

bun add amytis

Filename labels also resolve — e.g. tsconfig.json, vite.config.ts, or Dockerfile:

{ "compilerOptions": { "target": "es2022", "module": "esnext" } }

import { defineConfig } from 'vite';
export default defineConfig({ server: { port: 5173 } });

FROM node:20-alpine
WORKDIR /app
COPY . .
RUN npm ci && npm run build

Tabs work across languages too — handy for showing the same algorithm in multiple implementations:

export function greet(name: string): string {
  return `Hello, ${name}!`;
}

def greet(name: str) -> str:
    return f"Hello, {name}!"

fn greet(name: &str) -> String {
    format!("Hello, {name}!")
}

Notation comments

Annotate individual lines with // [!code …] comments. Six markers are supported — focus, diff, highlight, error, warning — using the language's native comment style (// in C-family, # in Python, -- in SQL, etc.):

function login(user: string) {            
  const token = oldApi.auth(user)         
  const token = newApi.auth({ user })     
  validate(token)                         
  throwIfExpired(token)                   
  if (!token.refreshable) warn()          
  return token
}

// [!code focus] dims the rest of the block so the focused subset stands out; hover the block to reveal the dimmed lines. // [!code error] / [!code warning] tint the line with a colored left-border (red / amber). [!code ++] / [!code --] color individual lines without needing a diff-language fence.

Notation comments work in any language — Python:

def fib(n):
    if n < 2: return n          
    return fib(n-1) + fib(n-2)

GitHub-flavored alerts

Add a [!TYPE] marker on the first line of a blockquote to render it as a GitHub-style callout. Five types are supported, each with its own color, icon, and label:

rST equivalents (.. note:: / .. tip:: / .. important:: / .. warning:: / .. caution::) render with matching colors via docutils' admonition directives — same visual treatment across both pipelines.

Explicit plaintext

This block opts out of syntax highlighting entirely. Use `plaintext` (or its
aliases `text`, `txt`, `plain`) for prose-like blocks where token coloring
would be noisy or misleading. Unknown language names will fail the build.