import{_ as r,c as o,z as s,E as e,B as p,a,R as n,G as c,o as t}from"./chunks/framework.ade46834.js";const Ln=JSON.parse('{"title":"Meta Annotations","description":"Annotations provide a way to provide outside commentary on your code.","frontmatter":{"description":"Annotations provide a way to provide outside commentary on your code.","title":"Meta Annotations"},"headers":[],"relativePath":"application/vitepress-plugin-shiki-twoslash/api/annotations.md","filePath":"application/vitepress-plugin-shiki-twoslash/api/annotations.md","lastUpdated":1694660273000}'),i={name:"application/vitepress-plugin-shiki-twoslash/api/annotations.md"},d=s("h1",{id:"queries",tabindex:"-1"},[a("Queries "),s("a",{class:"header-anchor",href:"#queries","aria-label":'Permalink to "Queries"'},"")],-1),_=s("p",null,"Sometimes the thing you want to say is about the code, annotations provide a way to provide outside commentary on your code.",-1),y=s("h2",{id:"annotate-left-right-overrides-text",tabindex:"-1"},[s("code",null,"@annotate: [left|right] [overrides] - [text]"),a(),s("a",{class:"header-anchor",href:"#annotate-left-right-overrides-text","aria-label":'Permalink to "`@annotate: [left|right] [overrides] - [text]`"'},"")],-1),h=s("p",null,"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:",-1),u={class:"vp-code-group vp-adaptive-theme"},m=n('
',1),g={class:"blocks"},B={class:"language-ts vp-adaptive-theme active line-numbers-mode"},b=s("button",{title:"Copy Code",class:"copy"},null,-1),v=s("span",{class:"lang"},"ts",-1),f={class:"language-ts"},D={class:"tag-container"},T={class:"shiki solarized-dark twoslash lsp",style:{"background-color":"#002B36",color:"#839496"},active:"true"},w=s("div",{class:"language-id"},"ts",-1),A={class:"code-container"},q=s("div",{class:"line"},[s("span",{style:{color:"#93A1A1"}},"function"),s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#268BD2"}},[s("data-lsp",{lsp:"function compact(arr: any): any"},"compact")]),s("span",{style:{color:"#839496"}},[a("("),s("data-lsp",{lsp:"(parameter) arr: any"},"arr"),a(") {")])],-1),C={class:"line"},x=s("span",{style:{color:"#839496"}}," ",-1),S=s("span",{style:{color:"#859900"}},"if",-1),k=s("span",{style:{color:"#839496"}}," (",-1),I={style:{color:"#268BD2"}},V=s("data-lsp",{lsp:"any"},"orr",-1),P=s("span",{style:{color:"#839496"}},[a("."),s("data-lsp",{lsp:"any"},"length"),a()],-1),E=n('> 10) return ',6),N=s("span",{style:{color:"#268BD2"}},[s("data-lsp",{lsp:"(parameter) arr: any"},"arr")],-1),R=s("span",{style:{color:"#839496"}},".",-1),M=s("span",{style:{color:"#268BD2"}},[s("data-lsp",{lsp:"any"},"trim")],-1),z=n('(0, 10)',5),X=s("span",{class:"error"},[s("span",null,"Cannot find name 'orr'."),s("span",{class:"code"},"2304")],-1),F=s("span",{class:"error-behind"},"Cannot find name 'orr'.",-1),L=s("div",{class:"line"},[s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#859900"}},"return"),s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#268BD2"}},[s("data-lsp",{lsp:"(parameter) arr: any"},"arr")])],-1),Y=s("div",{class:"line"},[s("span",{style:{color:"#839496"}},"}")],-1),J={class:"twoslash-annotation left",style:{top:"0rem"}},U={style:{transform:"translateX(8px) translateY(27px) rotate(90deg)"},width:"40",height:"40",viewBox:"0 0 40 40",fill:"none",xmlns:"http://www.w3.org/2000/svg"},Z=s("path",{d:"M1 39C1.5 32.7511 6.1 17.5173 20.5 6.57333M11.5 4.04L27 0.999998C24.8333 4.88444 20.5 13.16 20.5 15.1867",stroke:"black"},null,-1),$=s("p",{class:"twoslash-annotation-text",style:{transform:"rotate(3deg)"}},"Discovered a typo, the param is arr, not orr!",-1),j={class:"tag-container"},G={class:"shiki solarized-light twoslash lsp",style:{"background-color":"#FDF6E3",color:"#657B83"},active:"true"},O=s("div",{class:"language-id"},"ts",-1),H={class:"code-container"},K=s("div",{class:"line"},[s("span",{style:{color:"#586E75"}},"function"),s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#268BD2"}},[s("data-lsp",{lsp:"function compact(arr: any): any"},"compact")]),s("span",{style:{color:"#657B83"}},[a("("),s("data-lsp",{lsp:"(parameter) arr: any"},"arr"),a(") {")])],-1),Q={class:"line"},W=s("span",{style:{color:"#657B83"}}," ",-1),ss=s("span",{style:{color:"#859900"}},"if",-1),as=s("span",{style:{color:"#657B83"}}," (",-1),ns={style:{color:"#268BD2"}},os=s("data-lsp",{lsp:"any"},"orr",-1),ts=s("span",{style:{color:"#657B83"}},[a("."),s("data-lsp",{lsp:"any"},"length"),a()],-1),ls=n('> 10) return ',6),es=s("span",{style:{color:"#268BD2"}},[s("data-lsp",{lsp:"(parameter) arr: any"},"arr")],-1),ps=s("span",{style:{color:"#657B83"}},".",-1),rs=s("span",{style:{color:"#268BD2"}},[s("data-lsp",{lsp:"any"},"trim")],-1),cs=n('(0, 10)',5),is=s("span",{class:"error"},[s("span",null,"Cannot find name 'orr'."),s("span",{class:"code"},"2304")],-1),ds=s("span",{class:"error-behind"},"Cannot find name 'orr'.",-1),_s=s("div",{class:"line"},[s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#859900"}},"return"),s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#268BD2"}},[s("data-lsp",{lsp:"(parameter) arr: any"},"arr")])],-1),ys=s("div",{class:"line"},[s("span",{style:{color:"#657B83"}},"}")],-1),hs={class:"twoslash-annotation left",style:{top:"0rem"}},us={style:{transform:"translateX(8px) translateY(27px) rotate(90deg)"},width:"40",height:"40",viewBox:"0 0 40 40",fill:"none",xmlns:"http://www.w3.org/2000/svg"},ms=s("path",{d:"M1 39C1.5 32.7511 6.1 17.5173 20.5 6.57333M11.5 4.04L27 0.999998C24.8333 4.88444 20.5 13.16 20.5 15.1867",stroke:"black"},null,-1),gs=s("p",{class:"twoslash-annotation-text",style:{transform:"rotate(3deg)"}},"Discovered a typo, the param is arr, not orr!",-1),Bs=s("div",{class:"line-numbers-wrapper","aria-hidden":"true"},[s("span",{class:"line-number"},"1"),s("br")],-1),bs=n(`\`\`\`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!
\`\`\`\`\`\`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:
",4),fs={class:"vp-code-group vp-adaptive-theme"},Ds=n('',1),Ts={class:"blocks"},ws={class:"language-ts vp-adaptive-theme active line-numbers-mode"},As=s("button",{title:"Copy Code",class:"copy"},null,-1),qs=s("span",{class:"lang"},"ts",-1),Cs={class:"language-ts"},xs={class:"tag-container"},Ss={class:"shiki solarized-dark twoslash lsp",style:{"background-color":"#002B36",color:"#839496"},active:"true"},ks=s("div",{class:"language-id"},"ts",-1),Is={class:"code-container"},Vs=s("div",{class:"line"},[s("span",{style:{color:"#93A1A1"}},"function"),s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#268BD2"}},[s("data-lsp",{lsp:"function compact(arr: any): any"},"compact")]),s("span",{style:{color:"#839496"}},[a("("),s("data-lsp",{lsp:"(parameter) arr: any"},"arr"),a(") {")])],-1),Ps={class:"line"},Es=s("span",{style:{color:"#839496"}}," ",-1),Ns=s("span",{style:{color:"#859900"}},"if",-1),Rs=s("span",{style:{color:"#839496"}}," (",-1),Ms={style:{color:"#268BD2"}},zs=s("data-lsp",{lsp:"any"},"orr",-1),Xs=s("span",{style:{color:"#839496"}},[a("."),s("data-lsp",{lsp:"any"},"length"),a()],-1),Fs=n('> 10) return ',6),Ls=s("span",{style:{color:"#268BD2"}},[s("data-lsp",{lsp:"(parameter) arr: any"},"arr")],-1),Ys=s("span",{style:{color:"#839496"}},".",-1),Js=s("span",{style:{color:"#268BD2"}},[s("data-lsp",{lsp:"any"},"trim")],-1),Us=n('(0, 10)',5),Zs=s("span",{class:"error"},[s("span",null,"Cannot find name 'orr'."),s("span",{class:"code"},"2304")],-1),$s=s("span",{class:"error-behind"},"Cannot find name 'orr'.",-1),js=s("div",{class:"line"},[s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#859900"}},"return"),s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#268BD2"}},[s("data-lsp",{lsp:"(parameter) arr: any"},"arr")])],-1),Gs=s("div",{class:"line"},[s("span",{style:{color:"#839496"}},"}")],-1),Os={class:"twoslash-annotation right",style:{top:"3rem"}},Hs={style:{transform:"translateX(-10px) translateY(-10px) rotate(-50deg)"},width:"40",height:"40",viewBox:"0 0 40 40",fill:"none",xmlns:"http://www.w3.org/2000/svg"},Ks=s("path",{d:"M27 39C26.5 32.7511 21.9 17.5173 7.5 6.57333M16.5 4.04L0.999999 0.999998C3.16667 4.88444 7.5 13.16 7.5 15.1867",stroke:"black"},null,-1),Qs=s("p",{class:"twoslash-annotation-text",style:{transform:"rotate(0deg)"}},"Discovered a typo, the param is arr, not orr!",-1),Ws={class:"tag-container"},sa={class:"shiki solarized-light twoslash lsp",style:{"background-color":"#FDF6E3",color:"#657B83"},active:"true"},aa=s("div",{class:"language-id"},"ts",-1),na={class:"code-container"},oa=s("div",{class:"line"},[s("span",{style:{color:"#586E75"}},"function"),s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#268BD2"}},[s("data-lsp",{lsp:"function compact(arr: any): any"},"compact")]),s("span",{style:{color:"#657B83"}},[a("("),s("data-lsp",{lsp:"(parameter) arr: any"},"arr"),a(") {")])],-1),ta={class:"line"},la=s("span",{style:{color:"#657B83"}}," ",-1),ea=s("span",{style:{color:"#859900"}},"if",-1),pa=s("span",{style:{color:"#657B83"}}," (",-1),ra={style:{color:"#268BD2"}},ca=s("data-lsp",{lsp:"any"},"orr",-1),ia=s("span",{style:{color:"#657B83"}},[a("."),s("data-lsp",{lsp:"any"},"length"),a()],-1),da=n('> 10) return ',6),_a=s("span",{style:{color:"#268BD2"}},[s("data-lsp",{lsp:"(parameter) arr: any"},"arr")],-1),ya=s("span",{style:{color:"#657B83"}},".",-1),ha=s("span",{style:{color:"#268BD2"}},[s("data-lsp",{lsp:"any"},"trim")],-1),ua=n('(0, 10)',5),ma=s("span",{class:"error"},[s("span",null,"Cannot find name 'orr'."),s("span",{class:"code"},"2304")],-1),ga=s("span",{class:"error-behind"},"Cannot find name 'orr'.",-1),Ba=s("div",{class:"line"},[s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#859900"}},"return"),s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#268BD2"}},[s("data-lsp",{lsp:"(parameter) arr: any"},"arr")])],-1),ba=s("div",{class:"line"},[s("span",{style:{color:"#657B83"}},"}")],-1),va={class:"twoslash-annotation right",style:{top:"3rem"}},fa={style:{transform:"translateX(-10px) translateY(-10px) rotate(-50deg)"},width:"40",height:"40",viewBox:"0 0 40 40",fill:"none",xmlns:"http://www.w3.org/2000/svg"},Da=s("path",{d:"M27 39C26.5 32.7511 21.9 17.5173 7.5 6.57333M16.5 4.04L0.999999 0.999998C3.16667 4.88444 7.5 13.16 7.5 15.1867",stroke:"black"},null,-1),Ta=s("p",{class:"twoslash-annotation-text",style:{transform:"rotate(0deg)"}},"Discovered a typo, the param is arr, not orr!",-1),wa=s("div",{class:"line-numbers-wrapper","aria-hidden":"true"},[s("span",{class:"line-number"},"1"),s("br")],-1),Aa=n(`\`\`\`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!
\`\`\`\`\`\`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!
\`\`\`\`\`\`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!
\`\`\`\`\`\`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!
\`\`\`