import{_ as c}from"./chunks/PageInfo.vue_vue_type_script_setup_true_lang.250b3e56.js";import{_ as i,C as d,o,c as t,H as e,k as s,a,w as p,Q as n}from"./chunks/framework.b7580407.js";import"./chunks/commonjsHelpers.725317a4.js";const In=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":1711523264000}'),_={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),A=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),C={class:"vp-code-group vp-adaptive-theme"},m=n('
',1),D={class:"blocks"},g={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),B={class:"language-ts"},f={class:"tag-container"},E={class:"shiki github-dark-dimmed twoslash lsp",style:{"background-color":"#22272e",color:"#adbac7"}},T=s("div",{class:"language-id"},"ts",-1),F={class:"code-container"},w=s("div",{class:"line"},[s("span",{style:{color:"#F47067"}},"function"),s("span",{style:{color:"#ADBAC7"}}," "),s("span",{style:{color:"#DCBDFB"}},[s("data-lsp",{lsp:"function compact(arr: any): any"},"compact")]),s("span",{style:{color:"#ADBAC7"}},"("),s("span",{style:{color:"#F69D50"}},[s("data-lsp",{lsp:"(parameter) arr: any"},"arr")]),s("span",{style:{color:"#ADBAC7"}},") {")],-1),q={class:"line"},x=s("span",{style:{color:"#ADBAC7"}}," ",-1),S=s("span",{style:{color:"#F47067"}},"if",-1),k={style:{color:"#ADBAC7"}},I=s("data-lsp",{lsp:"any"},"orr",-1),P=s("span",{style:{color:"#6CB6FF"}},[s("data-lsp",{lsp:"any"},"length")],-1),V=n(' > 10) return',6),N=s("span",{style:{color:"#ADBAC7"}},[a(),s("data-lsp",{lsp:"(parameter) arr: any"},"arr"),a(".")],-1),R=s("span",{style:{color:"#DCBDFB"}},[s("data-lsp",{lsp:"any"},"trim")],-1),M=n('(0, 10)',5),Y=s("span",{class:"error"},[s("span",null,"Cannot find name 'orr'."),s("span",{class:"code"},"2304")],-1),J=s("span",{class:"error-behind"},"Cannot find name 'orr'.",-1),L=s("div",{class:"line"},[s("span",{style:{color:"#ADBAC7"}}," "),s("span",{style:{color:"#F47067"}},"return"),s("span",{style:{color:"#ADBAC7"}},[a(),s("data-lsp",{lsp:"(parameter) arr: any"},"arr")])],-1),O=s("div",{class:"line"},[s("span",{style:{color:"#ADBAC7"}},"}")],-1),U={class:"twoslash-annotation left",style:{top:"0rem"}},X={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"},H={class:"shiki github-light twoslash lsp",style:{"background-color":"#fff",color:"#24292e"}},Q=s("div",{class:"language-id"},"ts",-1),K={class:"code-container"},Z=s("div",{class:"line"},[s("span",{style:{color:"#D73A49"}},"function"),s("span",{style:{color:"#24292E"}}," "),s("span",{style:{color:"#6F42C1"}},[s("data-lsp",{lsp:"function compact(arr: any): any"},"compact")]),s("span",{style:{color:"#24292E"}},"("),s("span",{style:{color:"#E36209"}},[s("data-lsp",{lsp:"(parameter) arr: any"},"arr")]),s("span",{style:{color:"#24292E"}},") {")],-1),W={class:"line"},G=s("span",{style:{color:"#24292E"}}," ",-1),ss=s("span",{style:{color:"#D73A49"}},"if",-1),as={style:{color:"#24292E"}},ns=s("data-lsp",{lsp:"any"},"orr",-1),os=s("span",{style:{color:"#005CC5"}},[s("data-lsp",{lsp:"any"},"length")],-1),ts=n(' > 10) return',6),es=s("span",{style:{color:"#24292E"}},[a(),s("data-lsp",{lsp:"(parameter) arr: any"},"arr"),a(".")],-1),ls=s("span",{style:{color:"#6F42C1"}},[s("data-lsp",{lsp:"any"},"trim")],-1),ps=n('(0, 10)',5),rs=s("span",{class:"error"},[s("span",null,"Cannot find name 'orr'."),s("span",{class:"code"},"2304")],-1),cs=s("span",{class:"error-behind"},"Cannot find name 'orr'.",-1),is=s("div",{class:"line"},[s("span",{style:{color:"#24292E"}}," "),s("span",{style:{color:"#D73A49"}},"return"),s("span",{style:{color:"#24292E"}},[a(),s("data-lsp",{lsp:"(parameter) arr: any"},"arr")])],-1),ds=s("div",{class:"line"},[s("span",{style:{color:"#24292E"}},"}")],-1),_s={class:"twoslash-annotation left",style:{top:"0rem"}},ys={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"},hs=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),us=s("p",{class:"twoslash-annotation-text",style:{transform:"rotate(3deg)"}},"Discovered a typo, the param is arr, not orr!",-1),As=s("div",{class:"line-numbers-wrapper","aria-hidden":"true"},[s("span",{class:"line-number"},"1"),s("br")],-1),Cs=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),Ds={class:"vp-code-group vp-adaptive-theme"},gs=n('',1),bs={class:"blocks"},vs={class:"language-ts vp-adaptive-theme active line-numbers-mode"},Bs=s("button",{title:"Copy Code",class:"copy"},null,-1),fs=s("span",{class:"lang"},"ts",-1),Es={class:"language-ts"},Ts={class:"tag-container"},Fs={class:"shiki github-dark-dimmed twoslash lsp",style:{"background-color":"#22272e",color:"#adbac7"}},ws=s("div",{class:"language-id"},"ts",-1),qs={class:"code-container"},xs=s("div",{class:"line"},[s("span",{style:{color:"#F47067"}},"function"),s("span",{style:{color:"#ADBAC7"}}," "),s("span",{style:{color:"#DCBDFB"}},[s("data-lsp",{lsp:"function compact(arr: any): any"},"compact")]),s("span",{style:{color:"#ADBAC7"}},"("),s("span",{style:{color:"#F69D50"}},[s("data-lsp",{lsp:"(parameter) arr: any"},"arr")]),s("span",{style:{color:"#ADBAC7"}},") {")],-1),Ss={class:"line"},ks=s("span",{style:{color:"#ADBAC7"}}," ",-1),Is=s("span",{style:{color:"#F47067"}},"if",-1),Ps={style:{color:"#ADBAC7"}},Vs=s("data-lsp",{lsp:"any"},"orr",-1),Ns=s("span",{style:{color:"#6CB6FF"}},[s("data-lsp",{lsp:"any"},"length")],-1),Rs=n(' > 10) return',6),Ms=s("span",{style:{color:"#ADBAC7"}},[a(),s("data-lsp",{lsp:"(parameter) arr: any"},"arr"),a(".")],-1),Ys=s("span",{style:{color:"#DCBDFB"}},[s("data-lsp",{lsp:"any"},"trim")],-1),Js=n('(0, 10)',5),Ls=s("span",{class:"error"},[s("span",null,"Cannot find name 'orr'."),s("span",{class:"code"},"2304")],-1),Os=s("span",{class:"error-behind"},"Cannot find name 'orr'.",-1),Us=s("div",{class:"line"},[s("span",{style:{color:"#ADBAC7"}}," "),s("span",{style:{color:"#F47067"}},"return"),s("span",{style:{color:"#ADBAC7"}},[a(),s("data-lsp",{lsp:"(parameter) arr: any"},"arr")])],-1),Xs=s("div",{class:"line"},[s("span",{style:{color:"#ADBAC7"}},"}")],-1),zs={class:"twoslash-annotation right",style:{top:"3rem"}},$s={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"},js=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),Hs=s("p",{class:"twoslash-annotation-text",style:{transform:"rotate(0deg)"}},"Discovered a typo, the param is arr, not orr!",-1),Qs={class:"tag-container"},Ks={class:"shiki github-light twoslash lsp",style:{"background-color":"#fff",color:"#24292e"}},Zs=s("div",{class:"language-id"},"ts",-1),Ws={class:"code-container"},Gs=s("div",{class:"line"},[s("span",{style:{color:"#D73A49"}},"function"),s("span",{style:{color:"#24292E"}}," "),s("span",{style:{color:"#6F42C1"}},[s("data-lsp",{lsp:"function compact(arr: any): any"},"compact")]),s("span",{style:{color:"#24292E"}},"("),s("span",{style:{color:"#E36209"}},[s("data-lsp",{lsp:"(parameter) arr: any"},"arr")]),s("span",{style:{color:"#24292E"}},") {")],-1),sa={class:"line"},aa=s("span",{style:{color:"#24292E"}}," ",-1),na=s("span",{style:{color:"#D73A49"}},"if",-1),oa={style:{color:"#24292E"}},ta=s("data-lsp",{lsp:"any"},"orr",-1),ea=s("span",{style:{color:"#005CC5"}},[s("data-lsp",{lsp:"any"},"length")],-1),la=n(' > 10) return',6),pa=s("span",{style:{color:"#24292E"}},[a(),s("data-lsp",{lsp:"(parameter) arr: any"},"arr"),a(".")],-1),ra=s("span",{style:{color:"#6F42C1"}},[s("data-lsp",{lsp:"any"},"trim")],-1),ca=n('(0, 10)',5),ia=s("span",{class:"error"},[s("span",null,"Cannot find name 'orr'."),s("span",{class:"code"},"2304")],-1),da=s("span",{class:"error-behind"},"Cannot find name 'orr'.",-1),_a=s("div",{class:"line"},[s("span",{style:{color:"#24292E"}}," "),s("span",{style:{color:"#D73A49"}},"return"),s("span",{style:{color:"#24292E"}},[a(),s("data-lsp",{lsp:"(parameter) arr: any"},"arr")])],-1),ya=s("div",{class:"line"},[s("span",{style:{color:"#24292E"}},"}")],-1),ha={class:"twoslash-annotation right",style:{top:"3rem"}},ua={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"},Aa=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),Ca=s("p",{class:"twoslash-annotation-text",style:{transform:"rotate(0deg)"}},"Discovered a typo, the param is arr, not orr!",-1),ma=s("div",{class:"line-numbers-wrapper","aria-hidden":"true"},[s("span",{class:"line-number"},"1"),s("br")],-1),Da=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!
\`\`\`