This documentation is also published as Markdown for efficient machine reading: the whole site is indexed at /llms.txt, and every page has a clean Markdown copy at the same URL with .md appended. These are generated from the same source and cost far fewer tokens to read than this rendered HTML.

Skip to main content Skip to navigation
Guides

Annotate specific lines in a code block

Apply highlight, diff, focus, and error/warning line classes to fenced code with trailing `[!code ...]` comment directives.

To call out specific lines in a fenced code block — emphasizing a change, diffing before/after, focusing attention, or surfacing a diagnostic — append a trailing [!code ...] comment directive to the line. Pennington promotes the directive onto the enclosing line and strips the comment, so the rendered code stays clean and the called-out line picks up a CSS class you can style.

Before you begin

  • An existing Pennington site renders markdown with highlighted code fences (see Create your first Pennington site if not).
  • The fenced language supports one of the recognized comment markers — //, #, --, <!-- -->, *, %, ', REM, ;, or /* */.

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.

markdown 
```csharp
public int Add(int a, int b)
{
    return a + b; // [!code highlight]
}
```
csharp 
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.

markdown 
```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 --]
}
```
csharp 
public int Multiply(int a, int b) 
{
    return a * b; 
}
public int OldWay(int a, int b) 
{
    return a + b; 
}

Focus one line and blur the rest

Add [!code focus] to the line (or lines) worth zeroing in on. Every other line in the fence blurs back so the focused line stands out.

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

Flag errors and warnings

Use [!code error] and [!code warning] to show diagnostics inline. The rendered lines read like compiler output.

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

Style the annotation classes

Each directive promotes a CSS class onto the enclosing .line span — highlight, diff-add, diff-remove, focused, blurred, error, or warning — and a fence with any focused line also carries has-focused on its <pre>. On a site that uses Pennington.MonorailCss, these classes are styled out of the box: the highlight tint, diff gutter signs, blur effect, and diagnostic backgrounds all render with no extra work. A host that ships its own CSS instead must define each class itself — without those rules the directives still resolve and strip the comments, but the lines render unstyled.

Verify

  • Run dotnet run and load the page with the annotated fence. The highlighted line renders with a tinted background, diff lines show +/- gutters, the focused line stays sharp while the rest blur, and the [!code …] comments are gone.
  • View source: each annotated .line span carries the matching class, and a fence with any focused line carries has-focused on its <pre>.