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.
import { add } from "math"
const NUM = 100 // [!del]
const NUM = 50 // [!add]
const v = add(NUM, "hi") // [!err add...*]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:
| plugin | verb | classification | typical use |
|---|---|---|---|
em | em | emphasis | draw attention |
hl | hl | highlight | persistent highlight |
dim | dim | subdued | fade siblings |
add | add | diff-add | diff: added |
del | del | diff-del | diff: removed |
mod | mod | diff-mod | diff: modified |
err | err | error | diagnostic squiggle: error |
warn | warn | warning | diagnostic squiggle: warning |
info | info | info | diagnostic squiggle: info |