mirror of
https://github.com/andatoshiki/toshiki-notebook.git
synced 2026-06-06 09:16:45 +00:00
113 lines
3.5 KiB
Markdown
113 lines
3.5 KiB
Markdown
---
|
|
description: 'Annotations provide a way to provide outside commentary on your code.'
|
|
title: '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
|
|
|
|
```ts twoslash [output]
|
|
// @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!
|
|
```
|
|
|
|
````md [markdown]
|
|
```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
|
|
|
|
```ts twoslash [output]
|
|
// @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!
|
|
```
|
|
|
|
````md [markdown]
|
|
```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
|
|
|
|
```ts twoslash [output]
|
|
// @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!
|
|
```
|
|
|
|
````md [markdown]
|
|
```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!
|
|
```
|
|
````
|
|
|
|
:::
|