--- title: Markdown 展示 icon: fab fa-markdown order: 2 category: - 使用指引 tag: - Markdown --- VuePress 主要從 Markdown 文件生成頁面。因此，你可以使用它輕鬆生成文檔或網誌網站。 你應該創建和編寫 Markdown 文件，以便 VuePress 可以根據文件結構將它們轉換為不同的頁面。 ## Markdown 介紹 如果你是一個新手，還不會編寫 Markdown，請先閱讀 [Markdown 介紹](https://theme-hope.vuejs.press/zh/cookbook/markdown/) 和 [Markdown 範例](https://theme-hope.vuejs.press/zh/cookbook/markdown/demo.html)。 ## Markdown 配置 VuePress 通過 Frontmatter 為每個 Markdown 頁面引入配置。 ::: important Frontmatter Frontmatter 是 VuePress 中很重要的一個概念，請閱讀 [Frontmatter 介紹](https://theme-hope.vuejs.press/zh/cookbook/vuepress/page.html#front-matter) 了解詳情。 ::: ## Markdown 擴展 VuePress 會使用 [markdown-it](https://github.com/markdown-it/markdown-it) 來解析 Markdown 内容，因此可以借助於 markdown-it 外掛程式來實現 [語法擴展](https://github.com/markdown-it/markdown-it#syntax-extensions) 。 ### VuePress 擴展 為了豐富文檔寫作，VuePress 對 Markdown 語法進行了擴展。 關於這些擴展，請閱讀 [VuePress 中的 Markdown 擴展](https://theme-hope.vuejs.press/zh/cookbook/vuepress/markdown.html)。 ### 主題擴展 通過 [`vuepress-plugin-md-enhance`][md-enhance]，主題擴展了更多 Markdown 語法，提供更加豐富的寫作功能。 #### 提示容器 ::: v-pre 安全的在 Markdown 中使用 {{ variable }}。 ::: ::: info 自定義標題 資訊容器，包含 `程式碼` 與 [連結](#提示容器)。 ```js const a = 1; ``` ::: ::: tip 自定義標題 提示容器 ::: ::: warning 自定義標題 警告容器 ::: ::: caution 自定義標題 危险容器 ::: ::: details 自定義標題 詳情容器 ::: - [查看詳情](https://theme-hope.vuejs.press/zh/guide/markdown/hint.html) #### 程式碼區塊 ::: code-tabs @tab pnpm ```bash pnpm add -D vuepress-theme-hope ``` @tab yarn ```bash yarn add -D vuepress-theme-hope ``` @tab:active npm ```bash npm i -D vuepress-theme-hope ``` ::: - [查看詳情](https://theme-hope.vuejs.press/zh/guide/markdown/code-tabs.html) #### 上下標 19^th^ H~2~O - [查看詳情](https://theme-hope.vuejs.press/zh/guide/markdown/sup-sub.html) #### 自定義對齊 ::: center 我是居中的 ::: ::: right 我在右對齊 ::: - [查看詳情](https://theme-hope.vuejs.press/zh/guide/markdown/align.html) #### Attrs 一個擁有 ID 的 **單詞**{#word}。 - [查看詳情](https://theme-hope.vuejs.press/zh/guide/markdown/attrs.html) #### 註解 此文字有註解[^first]. [^first]: 這是註解内容 - [查看詳情](https://theme-hope.vuejs.press/zh/guide/markdown/footnote.html) #### 標記 你可以標記 ==重要的内容== 。 - [查看詳情](https://theme-hope.vuejs.press/zh/guide/markdown/mark.html) #### 任務列表 - [x] 計划 1 - [ ] 計划 2 [查看詳情](https://theme-hope.vuejs.press/zh/guide/markdown/tasklist.html) ### 圖片增强 支持為圖片設置顏色模式和大小 - [查看詳情](https://theme-hope.vuejs.press/zh/guide/markdown/image.html) #### 元件 ```component VPCard title: Mr.Hope desc: Where there is light, there is hope logo: https://mister-hope.com/logo.svg link: https://mister-hope.com background: rgba(253, 230, 138, 0.15) ``` - [查看詳情](https://theme-hope.vuejs.press/zh/guide/markdown/component.html) #### 導入文件 - [查看詳情](https://theme-hope.vuejs.press/zh/guide/markdown/include.html) #### 樣式化 向 Mr.Hope 捐贈一杯咖啡。 _Recommended_ - [查看詳情](https://theme-hope.vuejs.press/zh/guide/markdown/stylize.html) #### Tex 語法 $$ \frac {\partial^r} {\partial \omega^r} \left(\frac {y^{\omega}} {\omega}\right) = \left(\frac {y^{\omega}} {\omega}\right) \left\{(\log y)^r + \sum_{i=1}^r \frac {(-1)^i r \cdots (r-i+1) (\log y)^{r-i}} {\omega^i} \right\} $$ - [查看詳情](https://theme-hope.vuejs.press/zh/guide/markdown/tex.html) #### 圖表