mirror of
https://github.com/andatoshiki/toshiki-notebook.git
synced 2026-06-06 04:34:16 +00:00
8 lines
21 KiB
JavaScript
8 lines
21 KiB
JavaScript
import{_ as l,c as o,o as n,z as s,a,R as e}from"./chunks/framework.ade46834.js";const f=JSON.parse('{"title":"Emit","description":"You can replace the contents of your code examples with the results of running TypeScript over the project.","frontmatter":{"description":"You can replace the contents of your code examples with the results of running TypeScript over the project.","title":"Emit"},"headers":[],"relativePath":"application/vitepress-plugin-shiki-twoslash/api/emit.md","filePath":"application/vitepress-plugin-shiki-twoslash/api/emit.md","lastUpdated":1694921920000}'),t={name:"application/vitepress-plugin-shiki-twoslash/api/emit.md"},p=s("h1",{id:"emit",tabindex:"-1"},[a("Emit "),s("a",{class:"header-anchor",href:"#emit","aria-label":'Permalink to "Emit"'},"")],-1),c=s("p",null,"Running a Twoslash code example is a full TypeScript compiler run that will create files inside the virtual file system. You can replace the contents of your code examples with the results of running TypeScript over the project.",-1),r=s("h2",{id:"showemit",tabindex:"-1"},[s("code",null,"@showEmit"),a(),s("a",{class:"header-anchor",href:"#showemit","aria-label":'Permalink to "`@showEmit`"'},"")],-1),i=s("p",null,[s("code",null,"// @showEmit"),a(" is the main command to tell Shiki Twoslash that you want to replace the output of your code example with the equivalent "),s("code",null,".js"),a(" file.")],-1),d=s("div",{class:"vp-code-group vp-adaptive-theme"},[s("div",{class:"tabs"},[s("input",{type:"radio",name:"group-_ev95",id:"tab-Od2ApSW",checked:"checked"}),s("label",{for:"tab-Od2ApSW"},"output"),s("input",{type:"radio",name:"group-_ev95",id:"tab-atP_UYT"}),s("label",{for:"tab-atP_UYT"},"markdown")]),s("div",{class:"blocks"},[s("div",{class:"language-ts vp-adaptive-theme active line-numbers-mode"},[s("button",{title:"Copy Code",class:"copy"}),s("span",{class:"lang"},"ts"),s("pre",{class:"shiki solarized-dark twoslash lsp",style:{"background-color":"#002B36",color:"#839496"},active:"true"},[s("div",{class:"language-id"},"ts"),s("div",{class:"code-container"},[s("code",null,[s("div",{class:"line"},[s("span",{style:{color:"#2AA198"}},'"use strict"'),s("span",{style:{color:"#839496"}},";")]),s("div",{class:"line"},[s("span",{style:{color:"#93A1A1"}},"const"),s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#268BD2"}},"level"),s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#859900"}},"="),s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#2AA198"}},"'Danger'"),s("span",{style:{color:"#839496"}},";")]),s("div",{class:"line"}," ")])])]),s("pre",{class:"shiki solarized-light twoslash lsp",style:{"background-color":"#FDF6E3",color:"#657B83"},active:"true"},[s("div",{class:"language-id"},"ts"),s("div",{class:"code-container"},[s("code",null,[s("div",{class:"line"},[s("span",{style:{color:"#2AA198"}},'"use strict"'),s("span",{style:{color:"#657B83"}},";")]),s("div",{class:"line"},[s("span",{style:{color:"#586E75"}},"const"),s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#268BD2"}},"level"),s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#859900"}},"="),s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#2AA198"}},"'Danger'"),s("span",{style:{color:"#657B83"}},";")]),s("div",{class:"line"}," ")])])]),s("div",{class:"line-numbers-wrapper","aria-hidden":"true"},[s("span",{class:"line-number"},"1"),s("br")])]),s("div",{class:"language-md vp-adaptive-theme line-numbers-mode"},[s("button",{title:"Copy Code",class:"copy"}),s("span",{class:"lang"},"md"),s("pre",{class:"shiki solarized-dark vp-code-dark"},[s("code",null,[s("span",{class:"line"},[s("span",{style:{color:"#839496"}},"```ts twoslash")]),a(`
|
||
`),s("span",{class:"line"},[s("span",{style:{color:"#586E75","font-style":"italic"}},"// @showEmit")]),a(`
|
||
`),s("span",{class:"line"},[s("span",{style:{color:"#93A1A1","font-weight":"bold"}},"const"),s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#268BD2"}},"level"),s("span",{style:{color:"#859900"}},":"),s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#859900"}},"string"),s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#859900"}},"="),s("span",{style:{color:"#839496"}}," "),s("span",{style:{color:"#2AA198"}},"'Danger'")]),a(`
|
||
`),s("span",{class:"line"},[s("span",{style:{color:"#839496"}},"```")])])]),s("pre",{class:"shiki solarized-light vp-code-light"},[s("code",null,[s("span",{class:"line"},[s("span",{style:{color:"#657B83"}},"```ts twoslash")]),a(`
|
||
`),s("span",{class:"line"},[s("span",{style:{color:"#93A1A1","font-style":"italic"}},"// @showEmit")]),a(`
|
||
`),s("span",{class:"line"},[s("span",{style:{color:"#586E75","font-weight":"bold"}},"const"),s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#268BD2"}},"level"),s("span",{style:{color:"#859900"}},":"),s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#859900"}},"string"),s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#859900"}},"="),s("span",{style:{color:"#657B83"}}," "),s("span",{style:{color:"#2AA198"}},"'Danger'")]),a(`
|
||
`),s("span",{class:"line"},[s("span",{style:{color:"#657B83"}},"```")])])]),s("div",{class:"line-numbers-wrapper","aria-hidden":"true"},[s("span",{class:"line-number"},"1"),s("br"),s("span",{class:"line-number"},"2"),s("br"),s("span",{class:"line-number"},"3"),s("br"),s("span",{class:"line-number"},"4"),s("br")])])])],-1),y=e('<h2 id="showemittedfile-file" tabindex="-1"><code>@showEmittedFile: [file]</code> <a class="header-anchor" href="#showemittedfile-file" aria-label="Permalink to "`@showEmittedFile: [file]`""></a></h2><p>While the <code>.js</code> file is probably the most useful file out of the box, TypeScript does emit other files if you have the right flags enabled (<code>.d.ts</code> and <code>.map</code>) but also when you have a multi-file code sample — you might need to tell Twoslash which file to show. For all these cases you can also add <code>@showEmittedFile: [file]</code> to tell Twoslash which file you want to show.</p><p>Shows emitted <code>.d.ts</code> for a TypeScript code example:</p><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-PIZn6" id="tab-11K8dZq" checked="checked"><label for="tab-11K8dZq">markdown</label><input type="radio" name="group-PIZn6" id="tab-JdjTOik"><label for="tab-JdjTOik">output</label></div><div class="blocks"><div class="language-md vp-adaptive-theme active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">md</span><pre class="shiki solarized-dark vp-code-dark"><code><span class="line"><span style="color:#839496;">```ts twoslash</span></span>\n<span class="line"><span style="color:#586E75;font-style:italic;">// @declaration</span></span>\n<span class="line"><span style="color:#586E75;font-style:italic;">// @showEmit</span></span>\n<span class="line"><span style="color:#586E75;font-style:italic;">// @showEmittedFile: index.d.ts</span></span>\n<span class="line"><span style="color:#859900;">export</span><span style="color:#839496;"> </span><span style="color:#93A1A1;font-weight:bold;">const</span><span style="color:#839496;"> </span><span style="color:#268BD2;">hello</span><span style="color:#839496;"> </span><span style="color:#859900;">=</span><span style="color:#839496;"> </span><span style="color:#2AA198;">'world'</span></span>\n<span class="line"><span style="color:#839496;">```</span></span></code></pre><pre class="shiki solarized-light vp-code-light"><code><span class="line"><span style="color:#657B83;">```ts twoslash</span></span>\n<span class="line"><span style="color:#93A1A1;font-style:italic;">// @declaration</span></span>\n<span class="line"><span style="color:#93A1A1;font-style:italic;">// @showEmit</span></span>\n<span class="line"><span style="color:#93A1A1;font-style:italic;">// @showEmittedFile: index.d.ts</span></span>\n<span class="line"><span style="color:#859900;">export</span><span style="color:#657B83;"> </span><span style="color:#586E75;font-weight:bold;">const</span><span style="color:#657B83;"> </span><span style="color:#268BD2;">hello</span><span style="color:#657B83;"> </span><span style="color:#859900;">=</span><span style="color:#657B83;"> </span><span style="color:#2AA198;">'world'</span></span>\n<span class="line"><span style="color:#657B83;">```</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><div class="language-ts vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki solarized-dark twoslash lsp" style="background-color:#002B36;color:#839496;"><div class="language-id">ts</div><div class="code-container"><code><div class="line"><span style="color:#859900;">export</span><span style="color:#839496;"> </span><span style="color:#93A1A1;">declare</span><span style="color:#839496;"> </span><span style="color:#93A1A1;">const</span><span style="color:#839496;"> </span><span style="color:#268BD2;">hello</span><span style="color:#839496;"> </span><span style="color:#859900;">=</span><span style="color:#839496;"> </span><span style="color:#2AA198;">"world"</span><span style="color:#839496;">;</span></div><div class="line"> </div></code></div></pre><pre class="shiki solarized-light twoslash lsp" style="background-color:#FDF6E3;color:#657B83;"><div class="language-id">ts</div><div class="code-container"><code><div class="line"><span style="color:#859900;">export</span><span style="color:#657B83;"> </span><span style="color:#586E75;">declare</span><span style="color:#657B83;"> </span><span style="color:#586E75;">const</span><span style="color:#657B83;"> </span><span style="color:#268BD2;">hello</span><span style="color:#657B83;"> </span><span style="color:#859900;">=</span><span style="color:#657B83;"> </span><span style="color:#2AA198;">"world"</span><span style="color:#657B83;">;</span></div><div class="line"> </div></code></div></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div></div></div><p>Shows emitted <code>.map</code> files:</p><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-smpz1" id="tab-o1jPfzI" checked="checked"><label for="tab-o1jPfzI">markdown</label><input type="radio" name="group-smpz1" id="tab-nT__bbr"><label for="tab-nT__bbr">output</label></div><div class="blocks"><div class="language-md vp-adaptive-theme active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">md</span><pre class="shiki solarized-dark vp-code-dark"><code><span class="line"><span style="color:#839496;">```ts twoslash</span></span>\n<span class="line"><span style="color:#586E75;font-style:italic;">// @sourceMap</span></span>\n<span class="line"><span style="color:#586E75;font-style:italic;">// @showEmit</span></span>\n<span class="line"><span style="color:#586E75;font-style:italic;">// @showEmittedFile: index.js.map</span></span>\n<span class="line"><span style="color:#859900;">export</span><span style="color:#839496;"> </span><span style="color:#93A1A1;font-weight:bold;">const</span><span style="color:#839496;"> </span><span style="color:#268BD2;">hello</span><span style="color:#839496;"> </span><span style="color:#859900;">=</span><span style="color:#839496;"> </span><span style="color:#2AA198;">'world'</span></span>\n<span class="line"><span style="color:#839496;">```</span></span></code></pre><pre class="shiki solarized-light vp-code-light"><code><span class="line"><span style="color:#657B83;">```ts twoslash</span></span>\n<span class="line"><span style="color:#93A1A1;font-style:italic;">// @sourceMap</span></span>\n<span class="line"><span style="color:#93A1A1;font-style:italic;">// @showEmit</span></span>\n<span class="line"><span style="color:#93A1A1;font-style:italic;">// @showEmittedFile: index.js.map</span></span>\n<span class="line"><span style="color:#859900;">export</span><span style="color:#657B83;"> </span><span style="color:#586E75;font-weight:bold;">const</span><span style="color:#657B83;"> </span><span style="color:#268BD2;">hello</span><span style="color:#657B83;"> </span><span style="color:#859900;">=</span><span style="color:#657B83;"> </span><span style="color:#2AA198;">'world'</span></span>\n<span class="line"><span style="color:#657B83;">```</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><div class="language-ts vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki solarized-dark twoslash lsp" style="background-color:#002B36;color:#839496;"><div class="language-id">ts</div><div class="code-container"><code><div class="line"><span style="color:#839496;">{</span><span style="color:#2AA198;">"version"</span><span style="color:#839496;">:</span><span style="color:#D33682;">3</span><span style="color:#839496;">,</span><span style="color:#2AA198;">"file"</span><span style="color:#839496;">:</span><span style="color:#2AA198;">"index.js"</span><span style="color:#839496;">,</span><span style="color:#2AA198;">"sourceRoot"</span><span style="color:#839496;">:</span><span style="color:#2AA198;">""</span><span style="color:#839496;">,</span><span style="color:#2AA198;">"sources"</span><span style="color:#839496;">:[</span><span style="color:#2AA198;">"index.ts"</span><span style="color:#839496;">],</span><span style="color:#2AA198;">"names"</span><span style="color:#839496;">:[],</span><span style="color:#2AA198;">"mappings"</span><span style="color:#839496;">:</span><span style="color:#2AA198;">"AAAA,MAAM,CAAC,MAAM,KAAK,GAAG,OAAO,CAAA"</span><span style="color:#839496;">}</span></div></code></div></pre><pre class="shiki solarized-light twoslash lsp" style="background-color:#FDF6E3;color:#657B83;"><div class="language-id">ts</div><div class="code-container"><code><div class="line"><span style="color:#657B83;">{</span><span style="color:#2AA198;">"version"</span><span style="color:#657B83;">:</span><span style="color:#D33682;">3</span><span style="color:#657B83;">,</span><span style="color:#2AA198;">"file"</span><span style="color:#657B83;">:</span><span style="color:#2AA198;">"index.js"</span><span style="color:#657B83;">,</span><span style="color:#2AA198;">"sourceRoot"</span><span style="color:#657B83;">:</span><span style="color:#2AA198;">""</span><span style="color:#657B83;">,</span><span style="color:#2AA198;">"sources"</span><span style="color:#657B83;">:[</span><span style="color:#2AA198;">"index.ts"</span><span style="color:#657B83;">],</span><span style="color:#2AA198;">"names"</span><span style="color:#657B83;">:[],</span><span style="color:#2AA198;">"mappings"</span><span style="color:#657B83;">:</span><span style="color:#2AA198;">"AAAA,MAAM,CAAC,MAAM,KAAK,GAAG,OAAO,CAAA"</span><span style="color:#657B83;">}</span></div></code></div></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div></div></div><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-eodSb" id="tab-Cud0jBv" checked="checked"><label for="tab-Cud0jBv">markdown</label><input type="radio" name="group-eodSb" id="tab-r4zWwOH"><label for="tab-r4zWwOH">output</label></div><div class="blocks"><div class="language-md vp-adaptive-theme active line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">md</span><pre class="shiki solarized-dark vp-code-dark"><code><span class="line"><span style="color:#839496;">```ts twoslash</span></span>\n<span class="line"><span style="color:#586E75;font-style:italic;">// @declaration</span></span>\n<span class="line"><span style="color:#586E75;font-style:italic;">// @declarationMap</span></span>\n<span class="line"><span style="color:#586E75;font-style:italic;">// @showEmit</span></span>\n<span class="line"><span style="color:#586E75;font-style:italic;">// @showEmittedFile: index.d.ts.map</span></span>\n<span class="line"><span style="color:#859900;">export</span><span style="color:#839496;"> </span><span style="color:#93A1A1;font-weight:bold;">const</span><span style="color:#839496;"> </span><span style="color:#268BD2;">hello</span><span style="color:#839496;"> </span><span style="color:#859900;">=</span><span style="color:#839496;"> </span><span style="color:#2AA198;">'world'</span></span>\n<span class="line"><span style="color:#839496;">```</span></span></code></pre><pre class="shiki solarized-light vp-code-light"><code><span class="line"><span style="color:#657B83;">```ts twoslash</span></span>\n<span class="line"><span style="color:#93A1A1;font-style:italic;">// @declaration</span></span>\n<span class="line"><span style="color:#93A1A1;font-style:italic;">// @declarationMap</span></span>\n<span class="line"><span style="color:#93A1A1;font-style:italic;">// @showEmit</span></span>\n<span class="line"><span style="color:#93A1A1;font-style:italic;">// @showEmittedFile: index.d.ts.map</span></span>\n<span class="line"><span style="color:#859900;">export</span><span style="color:#657B83;"> </span><span style="color:#586E75;font-weight:bold;">const</span><span style="color:#657B83;"> </span><span style="color:#268BD2;">hello</span><span style="color:#657B83;"> </span><span style="color:#859900;">=</span><span style="color:#657B83;"> </span><span style="color:#2AA198;">'world'</span></span>\n<span class="line"><span style="color:#657B83;">```</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><div class="language-ts vp-adaptive-theme line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki solarized-dark twoslash lsp" style="background-color:#002B36;color:#839496;"><div class="language-id">ts</div><div class="code-container"><code><div class="line"><span style="color:#839496;">{</span><span style="color:#2AA198;">"version"</span><span style="color:#839496;">:</span><span style="color:#D33682;">3</span><span style="color:#839496;">,</span><span style="color:#2AA198;">"file"</span><span style="color:#839496;">:</span><span style="color:#2AA198;">"index.d.ts"</span><span style="color:#839496;">,</span><span style="color:#2AA198;">"sourceRoot"</span><span style="color:#839496;">:</span><span style="color:#2AA198;">""</span><span style="color:#839496;">,</span><span style="color:#2AA198;">"sources"</span><span style="color:#839496;">:[</span><span style="color:#2AA198;">"index.ts"</span><span style="color:#839496;">],</span><span style="color:#2AA198;">"names"</span><span style="color:#839496;">:[],</span><span style="color:#2AA198;">"mappings"</span><span style="color:#839496;">:</span><span style="color:#2AA198;">"AAAA,eAAO,MAAM,KAAK,UAAU,CAAA"</span><span style="color:#839496;">}</span></div></code></div></pre><pre class="shiki solarized-light twoslash lsp" style="background-color:#FDF6E3;color:#657B83;"><div class="language-id">ts</div><div class="code-container"><code><div class="line"><span style="color:#657B83;">{</span><span style="color:#2AA198;">"version"</span><span style="color:#657B83;">:</span><span style="color:#D33682;">3</span><span style="color:#657B83;">,</span><span style="color:#2AA198;">"file"</span><span style="color:#657B83;">:</span><span style="color:#2AA198;">"index.d.ts"</span><span style="color:#657B83;">,</span><span style="color:#2AA198;">"sourceRoot"</span><span style="color:#657B83;">:</span><span style="color:#2AA198;">""</span><span style="color:#657B83;">,</span><span style="color:#2AA198;">"sources"</span><span style="color:#657B83;">:[</span><span style="color:#2AA198;">"index.ts"</span><span style="color:#657B83;">],</span><span style="color:#2AA198;">"names"</span><span style="color:#657B83;">:[],</span><span style="color:#2AA198;">"mappings"</span><span style="color:#657B83;">:</span><span style="color:#2AA198;">"AAAA,eAAO,MAAM,KAAK,UAAU,CAAA"</span><span style="color:#657B83;">}</span></div></code></div></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div></div></div>',7),u=[p,c,r,i,d,y];function A(h,v,m,b,g,w){return n(),o("div",null,u)}const B=l(t,[["render",A]]);export{f as __pageData,B as default};
|