twinkleplop
docs / directives

directives

Twinkleplop supports a variety of source directives in comments that can be used to annotate certain parts of the source.

# intro § 01

Source directives are an expansion of Shiki notation transformers, allowing you to mark certain parts of a snippet for significance without needing to write a complex grammar. Directives live in the source you are highlighting and are generally local to a line or lines.

They are a way to 'mark' certain lines or spans of characters with a 'tag' that is rendered as a wrapping class or classes.

Directives have a specific syntax, an accompanying 'verb' (or any word), and are always contained with a language specific comment.

input.ts copy
import { add } from "math"

const NUM = 100 // [!del]
const NUM = 50 // [!add]

const v = add(NUM, "hi") // [!err add...*]
output.ts copy
import { add } from "math"

const NUM = 100
const NUM = 50

const v = add(NUM, "hi")

# using directives § 01

Directives only take affect if you configure them. By default, comments are just comments. When you configure directives, only the specific directives you configure will take effect.

There are several pre-made directives available, each with their own verbs:

pluginverbclassificationtypical use
emememphasisdraw attention
hlhlhighlightpersistent highlight
dimdimsubduedfade siblings
addadddiff-adddiff: added
deldeldiff-deldiff: removed
modmoddiff-moddiff: modified
errerrerrordiagnostic squiggle: error
warnwarnwarningdiagnostic squiggle: warning
infoinfoinfodiagnostic squiggle: info

tweaks

mode
density
nav style
crt scanlines