Colorful Code – DocsPress

Use docspress/colorful-code for one copyable source listing. It supports line highlighting, line numbers, unified diffs, final-state copying, and up to 20 line-specific annotations.

When to use it

Choose Colorful Code when one example is the lesson. Use Code Tabs for equivalent alternatives and Terminal Session for a command with output. Use a normal fenced Markdown code block when highlighting and copy behavior are unnecessary.

Edit the block

Enter code in the editor and choose its language and display filename. Add one-based highlights such as 2,4-6. For a change explanation, select unified diff mode and write normal @@, -, and + lines. Add annotations to the exact lines that need explanation.

When copyMode is final, Copy omits diff metadata and removed lines and strips the leading + from added lines. This lets readers copy the resulting file instead of the diff.

Attributes

language enum: Syntax language.

Defaultjavascript Valuesbash, css, html, javascript, json, jsx, markdown, php, plaintext, python, shell, sql, tsx, typescript, yaml
filename string: Display label; falls back to the language.
code string required: Plain source text.

DefaultJavaScript starter
highlightedLines string: One-based lines and ranges, such as 2,4-6.
showLineNumbers boolean: Shows one-based line numbers.

Defaulttrue Valuestrue, false
caption string: Optional formatted caption.
diffMode enum: Classifies added, removed, and metadata lines.

Defaultnone Valuesnone, unified
copyMode enum: Copies the entire listing or only the final diff state.

Defaultall Valuesall, final
annotations array: Up to 20 objects with a one-based line and formatted content.

Values0–20 items

Each annotation uses a line number from 1–9999 and formatted content. Blank annotations are discarded. Extremely large highlight ranges are bounded during rendering.

Standard example

javascript publish.js

const result = await publish();console.log(result);

A single highlighted example.

Diff with an annotation

json response.diff

@@ page @@-  "status": "draft"+  "status": "publish"

Line 3
This is the final status copied by the reader.

An annotated response change.

Accessible focus style

css focus.css

.docs-link {  color: #3858e9;}.docs-link:focus-visible {  outline: 3px solid currentColor;  outline-offset: 4px;}

Line 5
:focus-visible avoids drawing the custom ring for ordinary pointer clicks.
Line 7
The offset keeps the ring separate from the link shape.

The keyboard-only focus treatment is highlighted and explained.

Published behavior and accessibility

The source area can receive keyboard focus for horizontal scrolling. Copy has an accessible status announcement. Annotation controls are buttons connected to their explanation panels, and the source remains readable when JavaScript is unavailable.

Use annotations only for details that are hard to explain before or after the example. Verify that line numbers still match after every edit, and never put secrets or production credentials in source examples.