vitepress预设配置

Appearance

2025-09-15
696
2.8m

代码行号显示故障 ​

这个代码行号显示故障，我认为是 vitepress 本身的故障，对代码行数的拆分方案太浅显了。

但是实际去写小案例实验了一下，发现不是那么一回事。事情很复杂。

代码片段激活 twoslash 的写法 ​

  • {ts twoslash} 官方的 pr 支持了。点此阅读对应的 issue 。
  • #snipaste{ts twoslash} 某个 issue 内支持这个写法。

复现故障 ​

观察一下代码行数：

001 复杂度较低的 typescript 代码 ​

直接导入代码段
ts
export type TestType = {
	name: string;
	age: number;
};

export const testType: TestType = {
	name: "test",
	age: 18,
};
包含 twoslash 类型增强

这里的代码行数只有 4 行。

ts
export type 
TestType
 = {
	
name
: string;
	
age
: number;
};

export const 
testType
: 
TestType
 = {
	
name
: "test",
	
age
: 18,
};

002 复杂度较高的 typescript 代码 ​

直接导入代码段
ts
import { defineConfig } from "vitepress";

// https://vitepress.dev/reference/site-config

import { transformerTwoslash } from "@shikijs/vitepress-twoslash";

// @ts-ignore
import { lineNumberPlugin } from "./temp-plugins/temp-lineNumberPlugin";

export default defineConfig({
	title: "My Awesome Project",
	description: "A VitePress Site",
	themeConfig: {
		// https://vitepress.dev/reference/default-theme-config
		nav: [
			{ text: "Home", link: "/" },
			{ text: "Examples", link: "/markdown-examples" },
		],

		sidebar: [
			{
				text: "Examples",
				items: [
					{ text: "Markdown Examples", link: "/markdown-examples" },
					{ text: "Runtime API Examples", link: "/api-examples" },
				],
			},
		],

		socialLinks: [{ icon: "github", link: "https://github.com/vuejs/vitepress" }],
	},

	vite: {
		server: {
			open: true,
			port: 8080,
		},
	},

	markdown: {
		codeTransformers: [
			// @ts-ignore
			transformerTwoslash(),
		],

		config(md) {
			// @ts-ignore
			md.use(lineNumberPlugin, true);
		},

		// Explicitly load these languages for types hightlighting
		// languages: ["js", "jsx", "ts", "tsx"] as LanguageInput[],
	},
});
包含 twoslash 类型增强

这里的代码行数只有 1 行。

ts
import { 
defineConfig
 } from "vitepress";

// https://vitepress.dev/reference/site-config

import { 
transformerTwoslash
 } from "@shikijs/vitepress-twoslash";

// @ts-ignore
import { 
lineNumberPlugin
 } from "./temp-plugins/temp-lineNumberPlugin";

export default 
defineConfig
({
	
title
: "My Awesome Project",
	
description
: "A VitePress Site",
	
themeConfig
: {
		// https://vitepress.dev/reference/default-theme-config
		
nav
: [
			{ 
text
: "Home", 
link
: "/" },
			{ 
text
: "Examples", 
link
: "/markdown-examples" },
		],

		
sidebar
: [
			{
				
text
: "Examples",
				
items
: [
					{ 
text
: "Markdown Examples", 
link
: "/markdown-examples" },
					{ 
text
: "Runtime API Examples", 
link
: "/api-examples" },
				],
			},
		],

		
socialLinks
: [{ 
icon
: "github", 
link
: "https://github.com/vuejs/vitepress" }],
	},

	
vite
: {
		
server
: {
			
open
: true,
			
port
: 8080,
		},
	},

	
markdown
: {
		
codeTransformers
: [
			// @ts-ignore
			
transformerTwoslash
(),
		],

		
config
(
md
) {
			// @ts-ignore
			
md
.
use
(
lineNumberPlugin
, true);
		},

		// Explicitly load these languages for types hightlighting
		// languages: ["js", "jsx", "ts", "tsx"] as LanguageInput[],
	},
});

思考 ​

通过阅读 vitepress 源码得知，vitepress 实现代码行号计算的逻辑是写了一个内置的 markdown-it 插件。

注意到这一段代码：

ts
const code = rawCode.slice(rawCode.indexOf("<code>"), rawCode.indexOf("</code>"));

其中，rawCode 是 html 代码字符串，是典型的富文本。

个人认为是这一段代码写的太简单了，导致无法拆分正确的代码行数。但是实际阅读对比 rawCode 的输出和 twoslash 增强化的输出后，发现很难找到一个通用的替代写法。

001 例子的 rawCode 输出 ​

不使用 twoslash 的输出结果
txt
<div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark vp-code" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e" tabindex="0" v-pre=""><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> type</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> TestType</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> {</span></span>
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">  name</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> string</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">;</span></span>
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">  age</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> number</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">};</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> testType</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> TestType</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">  name: 
</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"test"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">  age: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">18</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">};</span></span></code></pre>
</div>
使用 twoslash 的输出结果
txt
<div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark vp-code twoslash lsp" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> type</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"><v-menu class="twoslash-hover" popper-class="shiki twoslash-floating vp-copy-ignore" theme="twoslash"><span>TestType</span><template v-slot:popper="&#123;}"><span class="twoslash-popup-container vp-copy-ignore" v-pre=""><code class="twoslash-popup-code"><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">type</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> TestType</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> &#123;</span></span>
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">    name</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> string</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">;</span></span>
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">    age</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> number</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">}</span></span></code></pre></code></span></template></v-menu></span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> &#123;</span></span>
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">  </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70"><v-menu class="twoslash-hover" popper-class="shiki twoslash-floating vp-copy-ignore" theme="twoslash"><span>name</span><template v-slot:popper="&#123;}"><span class="twoslash-popup-container vp-copy-ignore" v-pre=""><code class="twoslash-popup-code"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">name</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: string</span></code></span></template></v-menu></span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> string</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">;</span></span>
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">  </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70"><v-menu class="twoslash-hover" popper-class="shiki twoslash-floating vp-copy-ignore" theme="twoslash"><span>age</span><template v-slot:popper="&#123;}"><span class="twoslash-popup-container vp-copy-ignore" v-pre=""><code class="twoslash-popup-code"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">age</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: number</span></code></span></template></v-menu></span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> number</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">};</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"><v-menu class="twoslash-hover" popper-class="shiki twoslash-floating vp-copy-ignore" theme="twoslash"><span>testType</span><template v-slot:popper="&#123;}"><span class="twoslash-popup-container vp-copy-ignore" v-pre=""><code class="twoslash-popup-code"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> testType</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> TestType</span></code></span></template></v-menu></span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"><v-menu class="twoslash-hover" popper-class="shiki twoslash-floating vp-copy-ignore" theme="twoslash"><span>TestType</span><template 
v-slot:popper="&#123;}"><span class="twoslash-popup-container vp-copy-ignore" v-pre=""><code class="twoslash-popup-code"><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">type</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> TestType</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> &#123;</span></span>
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">    name</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> string</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">;</span></span>
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">    age</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> number</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">}</span></span></code></pre></code></span></template></v-menu></span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> &#123;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">  </span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"><v-menu class="twoslash-hover" popper-class="shiki twoslash-floating vp-copy-ignore" theme="twoslash"><span>name</span><template v-slot:popper="&#123;}"><span class="twoslash-popup-container vp-copy-ignore" v-pre=""><code class="twoslash-popup-code"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">name</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: string</span></code></span></template></v-menu></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"test"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">  </span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"><v-menu class="twoslash-hover" popper-class="shiki twoslash-floating vp-copy-ignore" theme="twoslash"><span>age</span><template v-slot:popper="&#123;}"><span class="twoslash-popup-container vp-copy-ignore" v-pre=""><code class="twoslash-popup-code"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">age</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: number</span></code></span></template></v-menu></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">18</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">};</span></span></code></pre>
</div>

002 例子的 rawCode 输出 ​

不使用 twoslash 的输出结果
txt
<div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark vp-code" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e" tabindex="0" v-pre=""><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> { defineConfig } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> "vitepress"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D">// https://vitepress.dev/reference/site-config</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> { transformerTwoslash } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">from</span><span 
style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> "@shikijs/vitepress-twoslash"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">;</span></span>        
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D">// @ts-ignore</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> { lineNumberPlugin } 
</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> "./temp-plugins/temp-lineNumberPlugin"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">;</span></span>  
<span class="line"></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> default</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> defineConfig</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">({</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">  title: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"My Awesome Project"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span>    
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">  description: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"A VitePress 
Site"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">  themeConfig: {</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D">    // https://vitepress.dev/reference/default-theme-config</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">    nav: [</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">      { 
text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"Home"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">, link: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"/"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">      { 
text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"Examples"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">, link: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"/markdown-examples"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">    ],</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">    sidebar: [</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">      {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">        
text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"Examples"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">        
items: [</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">        
  { text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"Markdown 
Examples"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">, link: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"/markdown-examples"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span>      
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">        
  { text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"Runtime API Examples"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">, link: 
</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"/api-examples"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span>        
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">        
],</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">      },</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">    ],</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">    socialLinks: [</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">      { 
icon: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"github"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">, link: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"https://github.com/vuejs/vitepress"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span>     
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">    ],</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">  },</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">  vite: 
{</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">    server: {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">      open: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">      port: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">8080</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">    },</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">  },</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">  markdown: {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">    codeTransformers: [</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D">      // @ts-ignore</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">      transformerTwoslash</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">(),</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">    ],</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">    config</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">md</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">) {</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D">      // @ts-ignore</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">      md.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">use</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">(lineNumberPlugin, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">);</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">    },</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D">    // Explicitly load these languages for types hightlighting</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D">    // languages: ["js", "jsx", "ts", "tsx"] as LanguageInput[],</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">  },</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">});</span></span></code></pre>
</div>
使用 twoslash 的输出结果
txt
 <div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark vp-code twoslash lsp" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> &#123; </span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"><v-menu class="twoslash-hover" popper-class="shiki twoslash-floating vp-copy-ignore" theme="twoslash"><span>defineConfig</span><template v-slot:popper="&#123;}"><span class="twoslash-popup-container vp-copy-ignore" v-pre=""><code class="twoslash-popup-code"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">function</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> defineConfig</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">config</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> UserConfig</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">&#x3C;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">DefaultTheme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">Config</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">>)</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> UserConfig</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">&#x3C;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">DefaultTheme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">Config</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">></span></code><div class="twoslash-popup-docs vp-doc"><p>Type config helper</p></div></span></template></v-menu></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> 
"vitepress"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D">// https://vitepress.dev/reference/site-config</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> &#123; </span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"><v-menu class="twoslash-hover" popper-class="shiki twoslash-floating vp-copy-ignore" theme="twoslash"><span>transformerTwoslash</span><template v-slot:popper="&#123;}"><span class="twoslash-popup-container vp-copy-ignore" v-pre=""><code class="twoslash-popup-code"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">function</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> transformerTwoslash</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">options</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">?:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> VitePressPluginTwoslashOptions</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">)</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> ShikiTransformer</span></code><div class="twoslash-popup-docs vp-doc"><p>Create a Shiki transformer for VitePress to enable twoslash integration</p>
<p>Add this to <code>markdown.codeTransformers</code> in <code>.vitepress/config.ts</code></p></div></span></template></v-menu></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> "@shikijs/vitepress-twoslash"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D">// @ts-ignore</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> &#123; </span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"><v-menu class="twoslash-hover" popper-class="shiki twoslash-floating vp-copy-ignore" theme="twoslash"><span>lineNumberPlugin</span><template v-slot:popper="&#123;}"><span class="twoslash-popup-container vp-copy-ignore" v-pre=""><code class="twoslash-popup-code"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> lineNumberPlugin</span></code></span></template></v-menu></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF"> "./temp-plugins/temp-lineNumberPlugin"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> default</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"><v-menu class="twoslash-hover" popper-class="shiki twoslash-floating vp-copy-ignore" theme="twoslash"><span>defineConfig</span><template 
v-slot:popper="&#123;}"><span class="twoslash-popup-container vp-copy-ignore" v-pre=""><code class="twoslash-popup-code"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">function</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> defineConfig</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">config</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> UserConfig</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">&#x3C;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">DefaultTheme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">Config</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">>)</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> UserConfig</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">&#x3C;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">DefaultTheme</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">Config</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">></span></code><div class="twoslash-popup-docs vp-doc"><p>Type config helper</p></div></span></template></v-menu></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">(&#123;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">  </span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"><v-menu class="twoslash-hover" popper-class="shiki twoslash-floating vp-copy-ignore" theme="twoslash"><span>title</span><template v-slot:popper="&#123;}"><span class="twoslash-popup-container vp-copy-ignore" v-pre=""><code class="twoslash-popup-code"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">LocaleSpecificConfig</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">&#x3C;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">DefaultTheme.Config</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">.title</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">?:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> string </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">|</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> undefined</span></code></span></template></v-menu></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"My Awesome Project"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">  </span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"><v-menu class="twoslash-hover" popper-class="shiki twoslash-floating vp-copy-ignore" theme="twoslash"><span>description</span><template v-slot:popper="&#123;}"><span class="twoslash-popup-container vp-copy-ignore" v-pre=""><code class="twoslash-popup-code"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">LocaleSpecificConfig</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">&#x3C;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">DefaultTheme.Config</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">.description</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">?:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> string </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">|</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> undefined</span></code></span></template></v-menu></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"A VitePress Site"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">  </span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"><v-menu class="twoslash-hover" popper-class="shiki twoslash-floating vp-copy-ignore" theme="twoslash"><span>themeConfig</span><template v-slot:popper="&#123;}"><span class="twoslash-popup-container vp-copy-ignore" v-pre=""><code class="twoslash-popup-code"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">LocaleSpecificConfig</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">&#x3C;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">DefaultTheme.Config</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">.themeConfig</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">?:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> DefaultTheme.Config </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">|</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> undefined</span></code></span></template></v-menu></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: &#123;</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D">    // https://vitepress.dev/reference/default-theme-config</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">    </span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"><v-menu class="twoslash-hover" popper-class="shiki twoslash-floating vp-copy-ignore" theme="twoslash"><span>nav</span><template v-slot:popper="&#123;}"><span class="twoslash-popup-container vp-copy-ignore" v-pre=""><code class="twoslash-popup-code"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">DefaultTheme.Config.nav</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">?:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> DefaultTheme.NavItem[] </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">|</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> undefined</span></code><div class="twoslash-popup-docs vp-doc"><p>The nav items.</p></div></span></template></v-menu></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: [</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">      &#123; </span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"><v-menu class="twoslash-hover" popper-class="shiki twoslash-floating vp-copy-ignore" theme="twoslash"><span>text</span><template v-slot:popper="&#123;}"><span class="twoslash-popup-container vp-copy-ignore" v-pre=""><code class="twoslash-popup-code"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">text</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: string</span></code></span></template></v-menu></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"Home"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">, </span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"><v-menu class="twoslash-hover" popper-class="shiki twoslash-floating vp-copy-ignore" theme="twoslash"><span>link</span><template v-slot:popper="&#123;}"><span class="twoslash-popup-container vp-copy-ignore" v-pre=""><code class="twoslash-popup-code"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">DefaultTheme.NavItemWithLink.link: string</span></code></span></template></v-menu></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"/"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">      &#123; </span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"><v-menu class="twoslash-hover" popper-class="shiki twoslash-floating vp-copy-ignore" theme="twoslash"><span>text</span><template v-slot:popper="&#123;}"><span class="twoslash-popup-container vp-copy-ignore" v-pre=""><code class="twoslash-popup-code"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">text</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: string</span></code></span></template></v-menu></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"Examples"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">, </span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"><v-menu class="twoslash-hover" popper-class="shiki twoslash-floating vp-copy-ignore" theme="twoslash"><span>link</span><template v-slot:popper="&#123;}"><span class="twoslash-popup-container vp-copy-ignore" v-pre=""><code class="twoslash-popup-code"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">DefaultTheme.NavItemWithLink.link: string</span></code></span></template></v-menu></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"/markdown-examples"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">    ],</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">    </span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"><v-menu class="twoslash-hover" popper-class="shiki twoslash-floating vp-copy-ignore" theme="twoslash"><span>sidebar</span><template v-slot:popper="&#123;}"><span class="twoslash-popup-container vp-copy-ignore" v-pre=""><code class="twoslash-popup-code"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">DefaultTheme.Config.sidebar</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">?:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> DefaultTheme.Sidebar </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">|</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> undefined</span></code><div class="twoslash-popup-docs vp-doc"><p>The sidebar items.</p></div></span></template></v-menu></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: [</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">      &#123;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">        
</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"><v-menu class="twoslash-hover" popper-class="shiki twoslash-floating vp-copy-ignore" theme="twoslash"><span>text</span><template v-slot:popper="&#123;}"><span class="twoslash-popup-container vp-copy-ignore" v-pre=""><code class="twoslash-popup-code"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">text</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">?:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> string </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">|</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> undefined</span></code><div class="twoslash-popup-docs vp-doc"><p>The text label of the item.</p></div></span></template></v-menu></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"Examples"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">        
</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"><v-menu class="twoslash-hover" popper-class="shiki twoslash-floating vp-copy-ignore" theme="twoslash"><span>items</span><template v-slot:popper="&#123;}"><span class="twoslash-popup-container vp-copy-ignore" v-pre=""><code class="twoslash-popup-code"><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">items</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: &#123;</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">    text</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: string;</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">    link</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: string;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">}[]</span></span></code></pre></code></span></template></v-menu></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: [</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">        
  &#123; </span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"><v-menu class="twoslash-hover" popper-class="shiki twoslash-floating vp-copy-ignore" theme="twoslash"><span>text</span><template v-slot:popper="&#123;}"><span class="twoslash-popup-container vp-copy-ignore" v-pre=""><code class="twoslash-popup-code"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">text</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">?:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> string </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">|</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> undefined</span></code><div class="twoslash-popup-docs vp-doc"><p>The text label of the item.</p></div></span></template></v-menu></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"Markdown Examples"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">, </span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"><v-menu class="twoslash-hover" 
popper-class="shiki twoslash-floating vp-copy-ignore" theme="twoslash"><span>link</span><template v-slot:popper="&#123;}"><span class="twoslash-popup-container vp-copy-ignore" v-pre=""><code class="twoslash-popup-code"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">link</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">?:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> string </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">|</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> undefined</span></code><div class="twoslash-popup-docs vp-doc"><p>The link of the item.</p></div></span></template></v-menu></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"/markdown-examples"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">        
  &#123; </span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"><v-menu class="twoslash-hover" popper-class="shiki twoslash-floating vp-copy-ignore" theme="twoslash"><span>text</span><template v-slot:popper="&#123;}"><span class="twoslash-popup-container vp-copy-ignore" v-pre=""><code class="twoslash-popup-code"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">text</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">?:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> string </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">|</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> undefined</span></code><div class="twoslash-popup-docs vp-doc"><p>The text label of the item.</p></div></span></template></v-menu></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"Runtime API Examples"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">, </span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"><v-menu class="twoslash-hover" popper-class="shiki twoslash-floating vp-copy-ignore" theme="twoslash"><span>link</span><template v-slot:popper="&#123;}"><span class="twoslash-popup-container vp-copy-ignore" v-pre=""><code class="twoslash-popup-code"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">link</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">?:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> string </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">|</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> undefined</span></code><div class="twoslash-popup-docs vp-doc"><p>The link of the item.</p></div></span></template></v-menu></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"/api-examples"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">        
],</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">      },</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">    ],</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">    </span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"><v-menu class="twoslash-hover" popper-class="shiki twoslash-floating vp-copy-ignore" theme="twoslash"><span>socialLinks</span><template v-slot:popper="&#123;}"><span class="twoslash-popup-container vp-copy-ignore" v-pre=""><code class="twoslash-popup-code"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">DefaultTheme.Config.socialLinks</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">?:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> DefaultTheme.SocialLink[] </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">|</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> undefined</span></code><div class="twoslash-popup-docs vp-doc"><p>The social links to be displayed at the end of the nav bar. Perfect for
placing links to social services such as GitHub, Twitter, Facebook, etc.</p></div></span></template></v-menu></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: [</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">      &#123; </span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"><v-menu class="twoslash-hover" popper-class="shiki twoslash-floating vp-copy-ignore" theme="twoslash"><span>icon</span><template v-slot:popper="&#123;}"><span class="twoslash-popup-container vp-copy-ignore" v-pre=""><code class="twoslash-popup-code"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">DefaultTheme.SocialLink.icon: DefaultTheme.SocialLinkIcon</span></code></span></template></v-menu></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"github"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">, </span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"><v-menu class="twoslash-hover" popper-class="shiki twoslash-floating vp-copy-ignore" theme="twoslash"><span>link</span><template v-slot:popper="&#123;}"><span class="twoslash-popup-container vp-copy-ignore" v-pre=""><code class="twoslash-popup-code"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">DefaultTheme.SocialLink.link: string</span></code></span></template></v-menu></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"https://github.com/vuejs/vitepress"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> },</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">    ],</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">  },</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">  </span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"><v-menu class="twoslash-hover" popper-class="shiki twoslash-floating vp-copy-ignore" theme="twoslash"><span>vite</span><template v-slot:popper="&#123;}"><span class="twoslash-popup-container vp-copy-ignore" v-pre=""><code class="twoslash-popup-code"><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">UserConfig</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">&#x3C;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">DefaultTheme.Config</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">.vite</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">?:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> (UserConfig </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">&#x26;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> &#123;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">    configFile?: string </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">|</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> false</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">}) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">|</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> undefined</span></span></code></pre></code><div class="twoslash-popup-docs vp-doc"><p>Vite config</p></div></span></template></v-menu></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: &#123;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">    </span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"><v-menu class="twoslash-hover" popper-class="shiki twoslash-floating vp-copy-ignore" theme="twoslash"><span>server</span><template v-slot:popper="&#123;}"><span class="twoslash-popup-container vp-copy-ignore" v-pre=""><code class="twoslash-popup-code"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">UserConfig.server</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">?:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> ServerOptions </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">|</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> undefined</span></code><div class="twoslash-popup-docs vp-doc"><p>Server specific options, e.g. host, port, https...</p></div></span></template></v-menu></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: &#123;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">      </span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"><v-menu class="twoslash-hover" popper-class="shiki twoslash-floating vp-copy-ignore" theme="twoslash"><span>open</span><template v-slot:popper="&#123;}"><span class="twoslash-popup-container vp-copy-ignore" v-pre=""><code class="twoslash-popup-code"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">CommonServerOptions.open</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">?:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> string </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">|</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> boolean </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">|</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> undefined</span></code><div class="twoslash-popup-docs vp-doc"><p>Open browser window on startup</p></div></span></template></v-menu></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">      </span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"><v-menu class="twoslash-hover" popper-class="shiki twoslash-floating vp-copy-ignore" theme="twoslash"><span>port</span><template v-slot:popper="&#123;}"><span class="twoslash-popup-container vp-copy-ignore" v-pre=""><code class="twoslash-popup-code"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">CommonServerOptions.port</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">?:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> number </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">|</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> undefined</span></code><div class="twoslash-popup-docs vp-doc"><p>Specify server port. Note if 
the port is already being used, Vite will
automatically try the next available port so this may not be the actual
port the server ends up listening on.</p></div></span></template></v-menu></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">8080</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">    },</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">  },</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">  </span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"><v-menu class="twoslash-hover" popper-class="shiki twoslash-floating vp-copy-ignore" theme="twoslash"><span>markdown</span><template v-slot:popper="&#123;}"><span class="twoslash-popup-container vp-copy-ignore" v-pre=""><code class="twoslash-popup-code"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">UserConfig</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">&#x3C;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">DefaultTheme.Config</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">.markdown</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">?:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> MarkdownOptions </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">|</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> undefined</span></code><div class="twoslash-popup-docs vp-doc"><p>MarkdownIt options</p></div></span></template></v-menu></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: &#123;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">    </span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"><v-menu class="twoslash-hover" popper-class="shiki twoslash-floating vp-copy-ignore" theme="twoslash"><span>codeTransformers</span><template v-slot:popper="&#123;}"><span class="twoslash-popup-container vp-copy-ignore" v-pre=""><code class="twoslash-popup-code"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">MarkdownOptions.codeTransformers</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">?:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> ShikiTransformer[] </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">|</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> undefined</span></code><div class="twoslash-popup-docs vp-doc"><p>Transformers applied to code blocks</p></div><div class="twoslash-popup-docs twoslash-popup-docs-tags vp-doc"><span class="twoslash-popup-docs-tag"><span class="twoslash-popup-docs-tag-name">@see</span><span class="twoslash-popup-docs-tag-value"><a href="https://shiki.style/guide/transformers">https://shiki.style/guide/transformers</a></span></span></div></span></template></v-menu></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: [</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D">      // @ts-ignore</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">      </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"><v-menu class="twoslash-hover" popper-class="shiki twoslash-floating vp-copy-ignore" theme="twoslash"><span>transformerTwoslash</span><template v-slot:popper="&#123;}"><span class="twoslash-popup-container vp-copy-ignore" v-pre=""><code class="twoslash-popup-code"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">function</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> transformerTwoslash</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">options</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">?:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> VitePressPluginTwoslashOptions</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">)</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> ShikiTransformer</span></code><div class="twoslash-popup-docs vp-doc"><p>Create a Shiki transformer for VitePress to enable 
twoslash integration</p>
<p>Add this to <code>markdown.codeTransformers</code> in <code>.vitepress/config.ts</code></p></div></span></template></v-menu></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">(),</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">    ],</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">    </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"><v-menu class="twoslash-hover" popper-class="shiki twoslash-floating vp-copy-ignore" theme="twoslash"><span>config</span><template v-slot:popper="&#123;}"><span class="twoslash-popup-container vp-copy-ignore" v-pre=""><code class="twoslash-popup-code"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">MarkdownOptions.config</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">?:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> ((</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">md</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> MarkdownIt</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=></span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> void</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">|</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> undefined</span></code><div class="twoslash-popup-docs vp-doc"><p>Setup markdown-it instance</p></div></span></template></v-menu></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70"><v-menu class="twoslash-hover" popper-class="shiki twoslash-floating vp-copy-ignore" theme="twoslash"><span>md</span><template 
v-slot:popper="&#123;}"><span class="twoslash-popup-container vp-copy-ignore" v-pre=""><code class="twoslash-popup-code"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">md</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: MarkdownIt</span></code></span></template></v-menu></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">) &#123;</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D">      // @ts-ignore</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">      </span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"><v-menu class="twoslash-hover" popper-class="shiki twoslash-floating vp-copy-ignore" theme="twoslash"><span>md</span><template v-slot:popper="&#123;}"><span class="twoslash-popup-container vp-copy-ignore" v-pre=""><code class="twoslash-popup-code"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">md</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: MarkdownIt</span></code></span></template></v-menu></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"><v-menu class="twoslash-hover" popper-class="shiki twoslash-floating vp-copy-ignore" theme="twoslash"><span>use</span><template v-slot:popper="&#123;}"><span class="twoslash-popup-container vp-copy-ignore" v-pre=""><code class="twoslash-popup-code"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">MarkdownIt.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">use</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">&#x3C;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">boolean</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">>(plugin: PluginWithOptions</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">&#x3C;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">boolean</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">, options</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">?:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> boolean </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">|</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> undefined</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">): </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">MarkdownIt</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> (</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">+</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">2</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> overloads)</span></code><div class="twoslash-popup-docs vp-doc"><p><em>chainable</em></p>
<p>Load specified plugin with given params into current parser instance.
It's just a sugar to call <code>plugin(md, params)</code> with curring.</p>
<h5>Example</h5>
<code><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">var</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> iterator </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> require</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'markdown-it-for-inline'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">);</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">var</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> md </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> require</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'markdown-it'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">)()</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">        
    .</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">use</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">(iterator, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'foo_replace'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'text'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">, </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">function</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">tokens</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">, </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70">idx</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">) &#123;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">        
      tokens[idx].content </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> tokens[idx].content.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">replace</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">/</span><span style="--shiki-light:#032F62;--shiki-dark:#DBEDFF">foo</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">/</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">g</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'bar'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">);</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">        
    });</span></span></code></pre></code></div></span></template></v-menu></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">(</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"><v-menu class="twoslash-hover" popper-class="shiki twoslash-floating vp-copy-ignore" theme="twoslash"><span>lineNumberPlugin</span><template v-slot:popper="&#123;}"><span class="twoslash-popup-container vp-copy-ignore" v-pre=""><code class="twoslash-popup-code"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> lineNumberPlugin</span></code></span></template></v-menu></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">);</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">    },</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D">    // Explicitly load these languages for types hightlighting</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D">    // languages: ["js", "jsx", "ts", "tsx"] as LanguageInput[],</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">  },</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">});</span></span></code></pre>
</div>

基于 <code> 标签的代码拆分方案难以满足 twoslash 化的 rawCode 场景 ​

因为 twoslash 化的 rawCode 场景会增加很多 </code> 标签，单纯的用这个标签去截断拆分字符串，是拆不准的。所以例子 1 的代码长度拆分长度只为 4，例子 2 的代码长度更加离谱，只能到 1 行。

暂且放弃 ​

尽管知道问题的成因，但是暂时没有好的方案来解决这个问题。

尚未提交官方 issue 反馈问题 ​

TODO: 去官方 issue 组织语言比较复杂，先放一放。

shiki 对行号的解决方案 ​

增加 css，而不是去重新计算行号。

其他杂项 ​

本项目为此额外增加的依赖 ​

bash
pnpm -F=@ruan-cat/vitepress-preset-config i -P markdown-it-async

最小化的测试复现仓库 ​

贡献者

The avatar of contributor named as ruan-cat ruan-cat

页面历史

最近更新