This site provides a machine-readable index at /llms.txt.

Skip to main content Skip to navigation

Highlight, diff, focus, or flag lines inside a code block

To call out specific lines in a fenced code block — emphasising a change, diffing before/after, focusing attention, or surfacing a diagnostic — append a trailing [!code ...] comment directive to the line. The CodeTransformer runs after the highlighter, promotes the directive's class onto the enclosing .line span, and deletes the comment so the rendered code stays clean. For why the transformer sits where it does in the pipeline, see The syntax-highlighting cascade.

Assumptions

  • An existing Pennington site renders markdown with highlighted code fences (see Create your first Pennington site if not).
  • The fenced language supports a comment syntax the transformer recognises — //, #, --, <!-- -->, *, %, ', REM, ;, or /* */.
  • Authoring happens in plain markdown; directives travel through the fence as comments and are stripped at render time.

Annotation directives

Each H3 below shows the source markdown above the rendered fence. Swap the comment marker to match the fenced language (// for C#/JS, # for YAML/Python, -- for SQL, <!-- --> for HTML).

Highlight a single line

Append // [!code highlight] to the line. The transformer adds the highlight class to the matching .line span.

```csharp
public int Add(int a, int b)
{
    return a + b; // [!code highlight]
}
```
public int Add(int a, int b)
{
    return a + b 
}

Mark added or removed lines

Use [!code ++] for added lines and [!code --] for removed lines. The transformer swaps each directive for diff-add or diff-remove on the .line span so the stylesheet can paint the gutter.

```csharp
public int Multiply(int a, int b) // [!code ++]
{
    return a * b; // [!code ++]
}
public int OldWay(int a, int b) // [!code --]
{
    return a + b; // [!code --]
}
```
publicint  Multiply(int a, int b) 
{
    return a * b 
}
publicint  OldWay(int a, int b) 
{
    return a + b 
}

Focus one line and dim the rest

Add [!code focus] to the line (or lines) worth zeroing in on. Every other line receives a dimmed class so the focused line stands out.

```csharp
var config = new Config(); // [!code focus]
config.Apply();
config.Save();
```
var config = new Config(); 
config.Apply();
config.Save();

Flag errors and warnings

Use [!code error] and [!code warning] to surface diagnostics inline. The transformer applies error and warning classes so the rendered lines read like compiler output.

```csharp
var path = null; // [!code error]
var length = path.Length; // [!code warning]
```
var path = null 
var length = path.Length

What the renderer emits

The CodeTransformer post-processes the highlighter output: it promotes each directive's class onto the enclosing .line span (highlight, diff-add, diff-remove, focused, dimmed, error, warning) and deletes the trailing comment. The directive text never appears in rendered HTML. Comment-marker variants (#, --, <!-- -->, etc.) are recognised the same way, so the same directive set works across languages without per-language wiring.

Previous
Next