import{_ as c}from"./chunks/PageInfo.vue_vue_type_script_setup_true_lang.250b3e56.js";import{_ as i,C as d,o as n,c as t,H as l,k as s,w as p,a,Q as o}from"./chunks/framework.b7580407.js";import"./chunks/commonjsHelpers.725317a4.js";const Oo=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":1694943391000}'),_={name:"application/vitepress-plugin-shiki-twoslash/api/annotations.md"},y=s("h1",{id:"queries",tabindex:"-1"},[a("Queries "),s("a",{class:"header-anchor",href:"#queries","aria-label":'Permalink to "Queries"'},"")],-1),h=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),u=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),m=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),g={class:"vp-code-group vp-adaptive-theme"},B=o('
',1),b={class:"blocks"},v={class:"language-ts vp-adaptive-theme active line-numbers-mode"},f=s("button",{title:"Copy Code",class:"copy"},null,-1),D=s("span",{class:"lang"},"ts",-1),T={class:"language-ts"},w={class:"tag-container"},A={class:"shiki solarized-dark twoslash lsp",style:{"background-color":"#002B36",color:"#839496"}},q=s("div",{class:"language-id"},"ts",-1),C={class:"code-container"},x=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),S={class:"line"},k=s("span",{style:{color:"#839496"}}," ",-1),P=s("span",{style:{color:"#859900"}},"if",-1),I=s("span",{style:{color:"#839496"}}," (",-1),V={style:{color:"#268BD2"}},E=s("data-lsp",{lsp:"any"},"orr",-1),R=s("span",{style:{color:"#839496"}},[a("."),s("data-lsp",{lsp:"any"},"length"),a()],-1),N=o('> 10) return ',6),M=s("span",{style:{color:"#268BD2"}},[s("data-lsp",{lsp:"(parameter) arr: any"},"arr")],-1),z=s("span",{style:{color:"#839496"}},".",-1),F=s("span",{style:{color:"#268BD2"}},[s("data-lsp",{lsp:"any"},"trim")],-1),L=o('(0, 10)',5),J=s("span",{class:"error"},[s("span",null,"Cannot find name 'orr'."),s("span",{class:"code"},"2304")],-1),X=s("span",{class:"error-behind"},"Cannot find name 'orr'.",-1),Y=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),j=s("div",{class:"line"},[s("span",{style:{color:"#839496"}},"}")],-1),O={class:"twoslash-annotation left",style:{top:"0rem"}},W={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"},$=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),H=s("p",{class:"twoslash-annotation-text",style:{transform:"rotate(3deg)"}},"Discovered a typo, the param is arr, not orr!",-1),Q={class:"tag-container"},U={class:"shiki solarized-light twoslash lsp",style:{"background-color":"#FDF6E3",color:"#657B83"}},G=s("div",{class:"language-id"},"ts",-1),K={class:"code-container"},Z=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),ss={class:"line"},as=s("span",{style:{color:"#657B83"}}," ",-1),os=s("span",{style:{color:"#859900"}},"if",-1),ns=s("span",{style:{color:"#657B83"}}," (",-1),ts={style:{color:"#268BD2"}},ls=s("data-lsp",{lsp:"any"},"orr",-1),es=s("span",{style:{color:"#657B83"}},[a("."),s("data-lsp",{lsp:"any"},"length"),a()],-1),ps=o('> 10) return ',6),rs=s("span",{style:{color:"#268BD2"}},[s("data-lsp",{lsp:"(parameter) arr: any"},"arr")],-1),cs=s("span",{style:{color:"#657B83"}},".",-1),is=s("span",{style:{color:"#268BD2"}},[s("data-lsp",{lsp:"any"},"trim")],-1),ds=o('(0, 10)',5),_s=s("span",{class:"error"},[s("span",null,"Cannot find name 'orr'."),s("span",{class:"code"},"2304")],-1),ys=s("span",{class:"error-behind"},"Cannot find name 'orr'.",-1),hs=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),us=s("div",{class:"line"},[s("span",{style:{color:"#657B83"}},"}")],-1),ms={class:"twoslash-annotation left",style:{top:"0rem"}},gs={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"},Bs=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),bs=s("p",{class:"twoslash-annotation-text",style:{transform:"rotate(3deg)"}},"Discovered a typo, the param is arr, not orr!",-1),vs=s("div",{class:"line-numbers-wrapper","aria-hidden":"true"},[s("span",{class:"line-number"},"1"),s("br")],-1),fs=o(`\`\`\`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),Ts={class:"vp-code-group vp-adaptive-theme"},ws=o('',1),As={class:"blocks"},qs={class:"language-ts vp-adaptive-theme active line-numbers-mode"},Cs=s("button",{title:"Copy Code",class:"copy"},null,-1),xs=s("span",{class:"lang"},"ts",-1),Ss={class:"language-ts"},ks={class:"tag-container"},Ps={class:"shiki solarized-dark twoslash lsp",style:{"background-color":"#002B36",color:"#839496"}},Is=s("div",{class:"language-id"},"ts",-1),Vs={class:"code-container"},Es=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),Rs={class:"line"},Ns=s("span",{style:{color:"#839496"}}," ",-1),Ms=s("span",{style:{color:"#859900"}},"if",-1),zs=s("span",{style:{color:"#839496"}}," (",-1),Fs={style:{color:"#268BD2"}},Ls=s("data-lsp",{lsp:"any"},"orr",-1),Js=s("span",{style:{color:"#839496"}},[a("."),s("data-lsp",{lsp:"any"},"length"),a()],-1),Xs=o('> 10) return ',6),Ys=s("span",{style:{color:"#268BD2"}},[s("data-lsp",{lsp:"(parameter) arr: any"},"arr")],-1),js=s("span",{style:{color:"#839496"}},".",-1),Os=s("span",{style:{color:"#268BD2"}},[s("data-lsp",{lsp:"any"},"trim")],-1),Ws=o('(0, 10)',5),$s=s("span",{class:"error"},[s("span",null,"Cannot find name 'orr'."),s("span",{class:"code"},"2304")],-1),Hs=s("span",{class:"error-behind"},"Cannot find name 'orr'.",-1),Qs=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),Us=s("div",{class:"line"},[s("span",{style:{color:"#839496"}},"}")],-1),Gs={class:"twoslash-annotation right",style:{top:"3rem"}},Ks={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"},Zs=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),sa=s("p",{class:"twoslash-annotation-text",style:{transform:"rotate(0deg)"}},"Discovered a typo, the param is arr, not orr!",-1),aa={class:"tag-container"},oa={class:"shiki solarized-light twoslash lsp",style:{"background-color":"#FDF6E3",color:"#657B83"}},na=s("div",{class:"language-id"},"ts",-1),ta={class:"code-container"},la=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),ea={class:"line"},pa=s("span",{style:{color:"#657B83"}}," ",-1),ra=s("span",{style:{color:"#859900"}},"if",-1),ca=s("span",{style:{color:"#657B83"}}," (",-1),ia={style:{color:"#268BD2"}},da=s("data-lsp",{lsp:"any"},"orr",-1),_a=s("span",{style:{color:"#657B83"}},[a("."),s("data-lsp",{lsp:"any"},"length"),a()],-1),ya=o('> 10) return ',6),ha=s("span",{style:{color:"#268BD2"}},[s("data-lsp",{lsp:"(parameter) arr: any"},"arr")],-1),ua=s("span",{style:{color:"#657B83"}},".",-1),ma=s("span",{style:{color:"#268BD2"}},[s("data-lsp",{lsp:"any"},"trim")],-1),ga=o('(0, 10)',5),Ba=s("span",{class:"error"},[s("span",null,"Cannot find name 'orr'."),s("span",{class:"code"},"2304")],-1),ba=s("span",{class:"error-behind"},"Cannot find name 'orr'.",-1),va=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),fa=s("div",{class:"line"},[s("span",{style:{color:"#657B83"}},"}")],-1),Da={class:"twoslash-annotation right",style:{top:"3rem"}},Ta={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"},wa=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),Aa=s("p",{class:"twoslash-annotation-text",style:{transform:"rotate(0deg)"}},"Discovered a typo, the param is arr, not orr!",-1),qa=s("div",{class:"line-numbers-wrapper","aria-hidden":"true"},[s("span",{class:"line-number"},"1"),s("br")],-1),Ca=o(`\`\`\`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!
\`\`\`