在 VitePress 中，每個 Markdown 文件都被編譯成 HTML，而且將其作為?Vue 單文件組件處理。這意味著可以在 Markdown 中使用任何 Vue 功能，包括動態模板、使用 Vue 組件或通過添加?<script>?標簽為頁面的 Vue 組件添加邏輯。
值得注意的是，VitePress 利用 Vue 的編譯器自動檢測和優化 Markdown 內容的純靜態部分。靜態內容被優化為單個占位符節點，并從頁面的 JavaScript 負載中刪除以供初始訪問。在客戶端激活期間也會跳過它們。簡而言之，只需注意任何給定頁面上的動態部分。
使用組件?
可以直接在 Markdown 文件中導入和使用 Vue 組件。
在 Markdown 中導入組件?
如果一個組件只被幾個頁面使用，建議在使用它們的地方顯式導入它們。這使它們可以正確地進行代碼拆分，并且僅在顯示相關頁面時才加載：
<script setup>
import CustomComponent from '../../components/CustomComponent.vue'
</script># DocsThis is a .md using a custom component<CustomComponent />## More docs...注冊全局組件?
如果一個組件要在大多數頁面上使用，可以通過自定義 Vue 實例來全局注冊它們。有關示例，請參見擴展默認主題中的相關部分。
重要
確保自定義組件的名稱包含連字符或采用 PascalCase。否則，它將被視為內聯元素并包裹在?<p>?標簽內，這將導致激活不匹配，因為?<p>?不允許將塊元素放置在其中。
在標題中使用組件???
可以在標題中使用 Vue 組件，但請注意以下語法之間的區別：
| Markdown | 輸出的 HTML | 被解析的標題 |
|---|---|---|
| <h1>text <Tag/></h1> | text |
| <h1>text <code><Tag/></code></h1> | text <Tag/> |
被?<code>?包裹的 HTML 將按原樣顯示，只有未包裹的 HTML 才會被 Vue 解析。
輸出 HTML 由?Markdown-it?完成，而解析的標題由 VitePress 處理 (并用于側邊欄和文檔標題)。
轉義?
可以通過使用?v-pre?指令將它們包裹在?<span>?或其他元素中來轉義 Vue 插值：
輸入
This <span v-pre>{{ will be displayed as-is }}</span>輸出
This?{{ will be displayed as-is }}
也可以將整個段落包裝在?v-pre?自定義容器中：
::: v-pre
{{ This will be displayed as-is }}`
:::輸出
{{ This will be displayed as-is }}
代碼塊中不轉義?
默認情況下，代碼塊是受到保護的，都會自動使用?v-pre?包裝，因此內部不會處理任何 Vue 語法。要在代碼塊內啟用 Vue 插值語法，可以在代碼語言后附加?-vue?后綴，例如?js-vue：
輸入
```js-vue
Hello {{ 1 + 1 }}
```輸出
Hello 2請注意，這可能會讓某些字符不能正確地進行語法高亮顯示。
使用 CSS 預處理器?
VitePress?內置支持?CSS 預處理器：.scss、.sass、.less、.styl?和?.stylus?文件。無需為它們安裝 Vite 專用插件，但必須安裝相應的預處理器：
# .scss and .sass
npm install -D sass# .less
npm install -D less# .styl and .stylus
npm install -D stylus然后可以在 Markdown 和主題組件中使用以下內容：
<style lang="sass">
.titlefont-size: 20px
</style>使用 teleport 傳遞組件內容?
VitePress 目前只有使用 teleport 傳送到 body 的 SSG 支持。對于其他地方，可以將它們包裹在內置的?<ClientOnly>?組件中，或者通過?postRender 鉤子將 teleport 標簽注入到最終頁面 HTML 中的正確位置。
<ClientOnly><Teleport to="#modal"><div>// ...</div></Teleport>
</ClientOnly>
)
