Enhanced Code Blocks
The documentation system supports enhanced code blocks with titles,line highlighting,and toggleable line numbers.
Basic Code Block#
Standard code block with language syntax highlighting:
Javascript
functiongreet(name){console.log(`Hello,${name}!`);}Code Block with Title#
Add a title to show the filename or description:
greet.js
functiongreet(name){console.log(`Hello,${name}!`);}greet('World');Syntax:
Markdown
```javascript title="greet.js"function greet(name){ console.log(`Hello,${name}!`);}```Line Highlighting#
Highlight specific lines to draw attention:
Javascript
functioncalculateTotal(items){let total = 0;// highlightedfor (const item of items){ total += item.price;// highlighted total += item.tax || 0;// highlighted total -= item.discount || 0;// highlighted}return total;}Syntax:
Markdown
```javascript{2,4-6}function calculateTotal(items){ let total = 0;// Line 2 - highlighted for (const item of items){ total += item.price;// Line 4 - highlighted total += item.tax || 0;// Line 5 - highlighted total -= item.discount || 0;// Line 6 - highlighted} return total;}```Syntax options:
{1}- Highlight line 1{1,3,5}- Highlight lines 1,3,and 5{1-5}- Highlight lines 1 through 5{1,3-5,7}- Combine single lines and ranges
Title + Line Highlighting#
Combine both features:
config.ts
interfaceConfig{title:string;description:string;// highlightedbaseUrl:string;navbar:{// highlightedtitle:string;// highlightedlinks:Link[];// highlighted};}Syntax:
Markdown
```typescript title="config.ts"{3,5-7}interface Config{ title:string; description:string;// Line 3 - highlighted baseUrl:string; navbar:{// Lines 5-7 highlighted title:string; links:Link[];};}```Line Numbers Toggle#
All code blocks have a line numbers toggle button in the top-right corner. Click it to show/hide line numbers on all code blocks.
The preference is saved in localStorage and persists across page reloads.
Examples by Language#
JavaScript/TypeScript#
auth.js
const express = require('express');const bcrypt = require('bcrypt');asyncfunctionhashPassword(password){const saltRounds = 10;// highlightedreturnawait bcrypt.hash(password,saltRounds);}asyncfunctionverifyPassword(password,hash){// highlightedreturnawait bcrypt.compare(password,hash);// highlighted}// highlightedmodule.exports ={hashPassword,verifyPassword};Python#
calculator.py
defcalculate(a,b,operation):"""Perform arithmetic operations"""# highlightedif operation == 'add':# highlightedreturn a + b # highlightedelif operation == 'subtract':# highlightedreturn a - belif operation == 'multiply':return a * belif operation == 'divide':return a / b if b != 0elseNoneBash#
deploy.sh
#!/bin/bashnpm run build # highlightednpm test# highlightednpm run deploy # highlightedecho"Deployment complete!"JSON#
package.json
{"name":"my-app","version":"1.0.0","description":"My app","main":"index.js","scripts":{"start":"node index.js","test":"jest"}}YAML#
.github/workflows/ci.yml
name:CIon: [push,pull_request]jobs:# highlightedtest:# highlightedruns-on:ubuntu-latest# highlightedsteps:-uses:actions/checkout@v4-name:Runtestsrun:npmtestCSS#
styles.css
.button{padding:0.5rem1rem;/* highlighted */border-radius:4px;background:#2563eb;/* highlighted */color:white;/* highlighted */border:none;/* highlighted */cursor:pointer;}HTML#
index.html
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title>My Page</title><!-- highlighted --><linkrel="stylesheet"href="styles.css"><!-- highlighted --><scriptsrc="app.js"></script><!-- highlighted --></head><body><h1>Hello World</h1></body></html>SQL#
schema.sql
CREATE TABLE users ( -- highlighted id SERIAL PRIMARY KEY,-- highlighted username VARCHAR(50) NOT NULL,-- highlighted email VARCHAR(100) NOT NULL, created_at TIMESTAMPDEFAULT NOW());CREATE INDEX idx_username ON users(username);Diff-style Highlighting#
You can use line highlighting to show additions and removals:
refactor.js
// Old approachfunctionfetchData(){// Remove (highlighted in blue)returnfetch('/api/data').then(r => r.json());}// New approachasyncfunctionfetchData(){// Add (highlighted in blue)const response = awaitfetch('/api/data');return response.json();}Complex Example#
api/users.ts
import{Router}from'express';import{hashPassword,verifyPassword}from'../utils/auth';import{db}from'../database';const router = Router();// Create new userrouter.post('/users',async (req,res) =>{// highlightedconst{username,password}= req.body;// highlightedconst hashedPassword = awaithashPassword(password);// highlightedconst user = await db.users.create({ username,password:hashedPassword});// highlighted res.status(201).json({id:user.id,username:user.username});// highlighted});// highlighted// Loginrouter.post('/login',async (req,res) =>{// highlightedconst{username,password}= req.body;const user = await db.users.findOne({username});if (!user || !(awaitverifyPassword(password,user.password))){return res.status(401).json({error:'Invalid credentials'});} res.json({token:generateToken(user)});});exportdefault router;Tips#
- Use titles for file context - Help readers understand which file the code belongs to
- Highlight important lines - Draw attention to the key parts of the code
- Combine features - Use both title and highlighting for maximum clarity
- Toggle line numbers - Click the line number button to show/hide numbers
- Line number preference persists - Your choice is saved and applies to all pages
Syntax Reference#
| Feature | Syntax | Example |
|---|---|---|
| Basic code block | ```language | ```javascript |
| With title | ```language title="file" | ```js title="app.js" |
| Highlight single line | ```language{line} | ```python{5} |
| Highlight multiple lines | ```language{1,3,5} | ```js{1,3,5} |
| Highlight range | ```language{start-end} | ```ts{2-6} |
| Combined | ```language{1,3-5,7} | ```bash{1,3-5,7} |
| Title + highlighting | ```lang title="file"{lines} | ```js title="a.js"{2,4} |
Browser Support#
All enhanced code block features work in:
- ✅ Chrome/Edge (latest)
- ✅ Firefox (latest)
- ✅ Safari (latest)
- ✅ Mobile browsers
Line numbers and highlighting use modern CSS features (CSS custom properties,::before pseudo-elements) supported by all modern browsers.