toshiki-notebook/docs/application/vitepress-plugin-shiki-twoslash/api/annotations.md

description	title
Annotations provide a way to provide outside commentary on your code.	Meta Annotations

Queries

Sometimes the thing you want to say is about the code, annotations provide a way to provide outside commentary on your code.

@annotate: [left|right] [overrides] - [text]

Annotate has a lot more controls than most of the other Twoslash commands, because each use of it probably needs to feel a bit different. Here's an example based on the TypeScript home page, click it to get it running so we can talk about what it does:

::: code-group

// @errors: 2304
// @strict: false

function compact(arr) {
    if (orr.length > 10) return arr.trim(0, 10)
    return arr
}
// @annotate: left { "arrowRot": "90deg 8px 27px", "textDegree": "3deg", "top": "0rem" } - Discovered a typo, the param is arr, not orr!

```ts twoslash
// @errors: 2304
// @strict: false

function compact(arr) {
    if (orr.length > 10) return arr.trim(0, 10)
    return arr
}
// @annotate: left { "arrowRot": "90deg 8px 27px", "textDegree": "3deg", "top": "0rem" } - Discovered a typo, the param is arr, not orr!
```

:::

First up, cool — it adds some text to the left hand side of the code. It features quite a few different options, so lets go through them one by one:

• left or right: It's currently left. It's worth noting the arrow flips also, and 90deg isn't a great option. Let's look at that next.

• { "arrrowRot": "90deg 8px 27px" } - This JSON object is used to manipulate the annotation, you have 3 controls for arrow positioning and rotation: degrees x y. I recommend keeping those in degrees and px, but it's your life. These are overrides from defaults which are okay, but not really something you ever want to ship.

• { "textDegree": "3deg" } - Rotates the text, you probably want something between -3deg and 3deg. Optional, defaults to 0.

• { "top": "0rem" } - Sets the y coordinates for the annotation relative to the code sample, if it's not included then it becomes [lineNum]rem.

What's not included in this sample is flipped, which can be used to flip the arrow's orientation. Here's some examples:

A horizontal right example:

::: code-group

// @errors: 2304
// @strict: false

function compact(arr) {
    if (orr.length > 10) return arr.trim(0, 10)
    return arr
}
// @annotate: right { "arrowRot": "-50deg -10px -10px", "top": "3rem" } - Discovered a typo, the param is arr, not orr!

```ts twoslash
// @errors: 2304
// @strict: false

function compact(arr) {
    if (orr.length > 10) return arr.trim(0, 10)
    return arr
}
// @annotate: left { "arrowRot": "90deg 8px 27px", "textDegree": "3deg", "top": "0rem" } - Discovered a typo, the param is arr, not orr!
```

:::

Upside down arrow pointing at the error, using flipped to re-flip the arrow:

::: code-group

// @errors: 2304
// @strict: false

function compact(arr) {
    if (orr.length > 10) return arr.trim(0, 10)
    return arr
}
// @annotate: right { "arrowRot": "190deg 8px 46px", "flipped": false, "textDegree": "-3deg", "top": "-0.7rem" } - Discovered a typo, the param is arr, not orr!

```ts twoslash
// @errors: 2304
// @strict: false

function compact(arr) {
    if (orr.length > 10) return arr.trim(0, 10)
    return arr
}
// @annotate: left { "arrowRot": "90deg 8px 27px", "textDegree": "3deg", "top": "0rem" } - Discovered a typo, the param is arr, not orr!
```

:::