Syntax Highlighting

This project is configured based on Nextra syntax highlighting features:

Global Copy button enabled (defaultShowCopyCode: true)
Line numbers
Filenames / titles
ANSI highlighting
Line and substring highlighting

Copy Button

Copy button is enabled globally. You can still disable it for a specific block using copy=false.


console.log('copy button is shown by default')


console.log('copy button disabled for this block')

Line Numbers


import { useState } from 'react'
 
export function Counter() {
  const [count, setCount] = useState(0)
  return <button onClick={() => setCount(count + 1)}>{count}</button>
}

Filenames And Titles

scripts/deploy.sh


pnpm install
pnpm build
pnpm start

openapi.json


{
  "openapi": "3.1.0",
  "info": {
    "title": "Example API",
    "version": "1.0.0"
  }
}

Highlighting Lines


import { useState } from 'react'
 
export function Counter() {
  const [count, setCount] = useState(0)
  return <button onClick={() => setCount(count + 1)}>{count}</button>
}

Highlighting Substrings


import { useState } from 'react'
 
export function Counter() {
  const [count, setCount] = useState(0)
  return <button onClick={() => setCount(count + 1)}>{count}</button>
}

ANSI Highlighting


\u001b[0m \u001b[0;32m✓\u001b[0m \u001b[0;2msrc/\u001b[0mindex\u001b[0;2m.test.ts (1)\u001b[0m
  \u001b[0;2m Test Files \u001b[0m \u001b[0;1;32m1 passed\u001b[0m
  \u001b[0;2m      Tests \u001b[0m \u001b[0;1;32m1 passed\u001b[0m
  \u001b[0;2m   Duration \u001b[0m 11ms
\u001b[42;1;39;0m PASS \u001b[0;32m Waiting for file changes...\u001b[0m