185 lines
34 KiB
HTML
185 lines
34 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en-US">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<title>Markdown Extensions | VitePress</title>
|
||
<meta name="description" content="Vite & Vue powered static site generator.">
|
||
<link rel="stylesheet" href="/assets/style.82fdbeb8.css">
|
||
<link rel="modulepreload" href="/assets/chunks/ui-custom.1a068566.js">
|
||
<link rel="modulepreload" href="/assets/chunks/ui-custom.30ce3a39.js">
|
||
<link rel="modulepreload" href="/assets/chunks/AlgoliaSearchBox.e5144af4.js">
|
||
<link rel="modulepreload" href="/assets/app.54944ef9.js">
|
||
<link rel="modulepreload" href="/assets/guide_markdown.md.6ff83e9e.lean.js">
|
||
|
||
<meta name="twitter:title" content="Markdown Extensions | VitePress">
|
||
<meta property="og:title" content="Markdown Extensions | VitePress">
|
||
</head>
|
||
<body>
|
||
<div id="app"><!--[--><div class="theme"><header class="nav-bar" data-v-675d8756><div class="sidebar-button" data-v-675d8756><svg class="icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z" class></path></svg></div><a class="nav-bar-title" href="/" aria-label="VitePress, back to home" data-v-675d8756 data-v-cc01ef16><!----> VitePress</a><div class="flex-grow" data-v-675d8756></div><div class="nav" data-v-675d8756><nav class="nav-links" data-v-675d8756 data-v-eab3edfe><!--[--><div class="item" data-v-eab3edfe><div class="nav-link" data-v-eab3edfe data-v-b8818f8c><a class="item active" href="/" data-v-b8818f8c>Guide <!----></a></div></div><div class="item" data-v-eab3edfe><div class="nav-link" data-v-eab3edfe data-v-b8818f8c><a class="item" href="/config/basics" data-v-b8818f8c>Config Reference <!----></a></div></div><div class="item" data-v-eab3edfe><div class="nav-link" data-v-eab3edfe data-v-b8818f8c><a class="item isExternal" href="https://github.com/vuejs/vitepress/releases" target="_blank" rel="noopener noreferrer" data-v-b8818f8c>Release Notes <svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-b8818f8c><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div><!--]--><!----><div class="item" data-v-eab3edfe><div class="nav-link" data-v-eab3edfe data-v-b8818f8c><a class="item isExternal" href="https://github.com/vuejs/vitepress" target="_blank" rel="noopener noreferrer" data-v-b8818f8c>GitHub <svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-b8818f8c><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div></nav></div><!--[--><!--[--><div class="algolia-search-box" id="docsearch"></div><!--]--><!--]--></header><aside class="sidebar" data-v-83e92a68><nav class="nav-links nav" data-v-83e92a68 data-v-eab3edfe><!--[--><div class="item" data-v-eab3edfe><div class="nav-link" data-v-eab3edfe data-v-b8818f8c><a class="item active" href="/" data-v-b8818f8c>Guide <!----></a></div></div><div class="item" data-v-eab3edfe><div class="nav-link" data-v-eab3edfe data-v-b8818f8c><a class="item" href="/config/basics" data-v-b8818f8c>Config Reference <!----></a></div></div><div class="item" data-v-eab3edfe><div class="nav-link" data-v-eab3edfe data-v-b8818f8c><a class="item isExternal" href="https://github.com/vuejs/vitepress/releases" target="_blank" rel="noopener noreferrer" data-v-b8818f8c>Release Notes <svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-b8818f8c><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div><!--]--><!----><div class="item" data-v-eab3edfe><div class="nav-link" data-v-eab3edfe data-v-b8818f8c><a class="item isExternal" href="https://github.com/vuejs/vitepress" target="_blank" rel="noopener noreferrer" data-v-b8818f8c>GitHub <svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-b8818f8c><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div></nav><!--[--><!--]--><ul class="sidebar-links" data-v-83e92a68><!--[--><li class="sidebar-link"><p class="sidebar-link-item">Introduction</p><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="/">What is VitePress?</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/guide/getting-started">Getting Started</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/guide/configuration">Configuration</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/guide/assets">Asset Handling</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item active" href="/guide/markdown">Markdown Extensions</a><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="#header-anchors">Header Anchors</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#links">Links</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#frontmatter">Frontmatter</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#github-style-tables">GitHub-Style Tables</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#emoji">Emoji 🎉</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#table-of-contents">Table of Contents</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#custom-containers">Custom Containers</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#syntax-highlighting-in-code-blocks">Syntax Highlighting in Code Blocks</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#line-highlighting-in-code-blocks">Line Highlighting in Code Blocks</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#line-numbers">Line Numbers</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#import-code-snippets">Import Code Snippets</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#advanced-configuration">Advanced Configuration</a><!----></li></ul></li><li class="sidebar-link"><a class="sidebar-link-item" href="/guide/using-vue">Using Vue in Markdown</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/guide/deploy">Deploying</a><!----></li></ul></li><li class="sidebar-link"><p class="sidebar-link-item">Advanced</p><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="/guide/frontmatter">Frontmatter</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/guide/theming">Theming</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/guide/api">API Reference</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/guide/differences-from-vuepress">Differences from Vuepress</a><!----></li></ul></li><!--]--></ul><!--[--><!--]--></aside><div class="sidebar-mask"></div><main class="page" data-v-7eddb2c4><div class="container" data-v-7eddb2c4><!--[--><!--[--><div id="ads-container"><div class="carbon-ads" data-v-5941b830></div></div><!--]--><!--[--><!--]--><!--]--><div style="position:relative;" class="content" data-v-7eddb2c4><div><h1 id="markdown-extensions" tabindex="-1">Markdown Extensions <a class="header-anchor" href="#markdown-extensions" aria-hidden="true">#</a></h1><h2 id="header-anchors" tabindex="-1">Header Anchors <a class="header-anchor" href="#header-anchors" aria-hidden="true">#</a></h2><p>Headers automatically get anchor links applied. Rendering of anchors can be configured using the <code>markdown.anchor</code> option.</p><h2 id="links" tabindex="-1">Links <a class="header-anchor" href="#links" aria-hidden="true">#</a></h2><h3 id="internal-links" tabindex="-1">Internal Links <a class="header-anchor" href="#internal-links" aria-hidden="true">#</a></h3><p>Internal links are converted to router link for SPA navigation. Also, every <code>index.md</code> contained in each sub-directory will automatically be converted to <code>index.html</code>, with corresponding URL <code>/</code>.</p><p>For example, given the following directory structure:</p><div class="language-"><pre><code>.
|
||
├─ index.md
|
||
├─ foo
|
||
│ ├─ index.md
|
||
│ ├─ one.md
|
||
│ └─ two.md
|
||
└─ bar
|
||
├─ index.md
|
||
├─ three.md
|
||
└─ four.md
|
||
</code></pre></div><p>And providing you are in <code>foo/one.md</code>:</p><div class="language-md"><pre><code><span class="token url">[<span class="token content">Home</span>](<span class="token url">/</span>)</span> <span class="token comment"><!-- sends the user to the root index.md --></span>
|
||
<span class="token url">[<span class="token content">foo</span>](<span class="token url">/foo/</span>)</span> <span class="token comment"><!-- sends the user to index.html of directory foo --></span>
|
||
<span class="token url">[<span class="token content">foo heading</span>](<span class="token url">./#heading</span>)</span> <span class="token comment"><!-- anchors user to a heading in the foo index file --></span>
|
||
<span class="token url">[<span class="token content">bar - three</span>](<span class="token url">../bar/three</span>)</span> <span class="token comment"><!-- you can omit extention --></span>
|
||
<span class="token url">[<span class="token content">bar - three</span>](<span class="token url">../bar/three.md</span>)</span> <span class="token comment"><!-- you can append .md --></span>
|
||
<span class="token url">[<span class="token content">bar - four</span>](<span class="token url">../bar/four.html</span>)</span> <span class="token comment"><!-- or you can append .html --></span>
|
||
</code></pre></div><h3 id="page-suffix" tabindex="-1">Page Suffix <a class="header-anchor" href="#page-suffix" aria-hidden="true">#</a></h3><p>Pages and internal links get generated with the <code>.html</code> suffix by default.</p><h3 id="external-links" tabindex="-1">External Links <a class="header-anchor" href="#external-links" aria-hidden="true">#</a></h3><p>Outbound links automatically get <code>target="_blank" rel="noopener noreferrer"</code>:</p><ul><li><a href="https://vuejs.org" target="_blank" rel="noopener noreferrer">vuejs.org</a></li><li><a href="https://github.com/vuejs/vitepress" target="_blank" rel="noopener noreferrer">VitePress on GitHub</a></li></ul><h2 id="frontmatter" tabindex="-1">Frontmatter <a class="header-anchor" href="#frontmatter" aria-hidden="true">#</a></h2><p><a href="https://jekyllrb.com/docs/front-matter/" target="_blank" rel="noopener noreferrer">YAML frontmatter</a> is supported out of the box:</p><div class="language-yaml"><pre><code><span class="token punctuation">---</span>
|
||
<span class="token key atrule">title</span><span class="token punctuation">:</span> Blogging Like a Hacker
|
||
<span class="token key atrule">lang</span><span class="token punctuation">:</span> en<span class="token punctuation">-</span>US
|
||
<span class="token punctuation">---</span>
|
||
</code></pre></div><p>This data will be available to the rest of the page, along with all custom and theming components.</p><p>For more details, see <a href="./frontmatter.html">Frontmatter</a>.</p><h2 id="github-style-tables" tabindex="-1">GitHub-Style Tables <a class="header-anchor" href="#github-style-tables" aria-hidden="true">#</a></h2><p><strong>Input</strong></p><div class="language-"><pre><code>| Tables | Are | Cool |
|
||
| ------------- |:-------------:| -----:|
|
||
| col 3 is | right-aligned | $1600 |
|
||
| col 2 is | centered | $12 |
|
||
| zebra stripes | are neat | $1 |
|
||
</code></pre></div><p><strong>Output</strong></p><table><thead><tr><th>Tables</th><th style="text-align:center;">Are</th><th style="text-align:right;">Cool</th></tr></thead><tbody><tr><td>col 3 is</td><td style="text-align:center;">right-aligned</td><td style="text-align:right;">$1600</td></tr><tr><td>col 2 is</td><td style="text-align:center;">centered</td><td style="text-align:right;">$12</td></tr><tr><td>zebra stripes</td><td style="text-align:center;">are neat</td><td style="text-align:right;">$1</td></tr></tbody></table><h2 id="emoji" tabindex="-1">Emoji 🎉 <a class="header-anchor" href="#emoji" aria-hidden="true">#</a></h2><p><strong>Input</strong></p><div class="language-"><pre><code>:tada: :100:
|
||
</code></pre></div><p><strong>Output</strong></p><p>🎉 💯</p><p>A <a href="https://github.com/markdown-it/markdown-it-emoji/blob/master/lib/data/full.json" target="_blank" rel="noopener noreferrer">list of all emojis</a> is available.</p><h2 id="table-of-contents" tabindex="-1">Table of Contents <a class="header-anchor" href="#table-of-contents" aria-hidden="true">#</a></h2><p><strong>Input</strong></p><div class="language-"><pre><code>[[toc]]
|
||
</code></pre></div><p><strong>Output</strong></p><p><div class="table-of-contents"><ul><li><a href="#header-anchors">Header Anchors</a></li><li><a href="#links">Links</a><ul><li><a href="#internal-links">Internal Links</a></li><li><a href="#page-suffix">Page Suffix</a></li><li><a href="#external-links">External Links</a></li></ul></li><li><a href="#frontmatter">Frontmatter</a></li><li><a href="#github-style-tables">GitHub-Style Tables</a></li><li><a href="#emoji">Emoji</a></li><li><a href="#table-of-contents">Table of Contents</a></li><li><a href="#custom-containers">Custom Containers</a><ul><li><a href="#default-title">Default Title</a></li><li><a href="#custom-title">Custom Title</a></li></ul></li><li><a href="#syntax-highlighting-in-code-blocks">Syntax Highlighting in Code Blocks</a></li><li><a href="#line-highlighting-in-code-blocks">Line Highlighting in Code Blocks</a></li><li><a href="#line-numbers">Line Numbers</a></li><li><a href="#import-code-snippets">Import Code Snippets</a></li><li><a href="#advanced-configuration">Advanced Configuration</a></li></ul></div></p><p>Rendering of the TOC can be configured using the <code>markdown.toc</code> option.</p><h2 id="custom-containers" tabindex="-1">Custom Containers <a class="header-anchor" href="#custom-containers" aria-hidden="true">#</a></h2><p>Custom containers can be defined by their types, titles, and contents.</p><h3 id="default-title" tabindex="-1">Default Title <a class="header-anchor" href="#default-title" aria-hidden="true">#</a></h3><p><strong>Input</strong></p><div class="language-md"><pre><code>::: tip
|
||
This is a tip
|
||
:::
|
||
|
||
::: info
|
||
This is an info box
|
||
:::
|
||
|
||
::: warning
|
||
This is a warning
|
||
:::
|
||
|
||
::: danger
|
||
This is a dangerous warning
|
||
:::
|
||
|
||
::: details
|
||
This is a details block, which does not work in Internet Explorer or old versions of Edge.
|
||
:::
|
||
</code></pre></div><p><strong>Output</strong></p><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>This is a tip</p></div><div class="info custom-block"><p class="custom-block-title">INFO</p><p>This is an info box</p></div><div class="warning custom-block"><p class="custom-block-title">WARNING</p><p>This is a warning</p></div><div class="danger custom-block"><p class="custom-block-title">WARNING</p><p>This is a dangerous warning</p></div><details class="details custom-block"><p>This is a details block, which does not work in Internet Explorer or Edge.</p></details><h3 id="custom-title" tabindex="-1">Custom Title <a class="header-anchor" href="#custom-title" aria-hidden="true">#</a></h3><p><strong>Input</strong></p><div class="language-md"><pre><code>::: danger STOP
|
||
Danger zone, do not proceed
|
||
:::
|
||
|
||
::: details Click me to view the code
|
||
|
||
<span class="token code"><span class="token punctuation">```</span><span class="token code-language">js</span>
|
||
<span class="token code-block language-js">console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Hello, VitePress!'</span><span class="token punctuation">)</span></span>
|
||
<span class="token punctuation">```</span></span>
|
||
|
||
:::
|
||
</code></pre></div><p><strong>Output</strong></p><div class="danger custom-block"><p class="custom-block-title">STOP</p><p>Danger zone, do not proceed</p></div><details class="details custom-block"><summary>Click me to view the code</summary><div class="language-js"><pre><code>console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Hello, VitePress!'</span><span class="token punctuation">)</span>
|
||
</code></pre></div></details><h2 id="syntax-highlighting-in-code-blocks" tabindex="-1">Syntax Highlighting in Code Blocks <a class="header-anchor" href="#syntax-highlighting-in-code-blocks" aria-hidden="true">#</a></h2><p>VitePress uses <a href="https://prismjs.com" target="_blank" rel="noopener noreferrer">Prism</a> to highlight language syntax in Markdown code blocks, using coloured text. Prism supports a wide variety of programming languages. All you need to do is append a valid language alias to the beginning backticks for the code block:</p><p><strong>Input</strong></p><div class="language-"><pre><code>```js
|
||
export default {
|
||
name: 'MyComponent',
|
||
// ...
|
||
}
|
||
```
|
||
</code></pre></div><p><strong>Output</strong></p><div class="language-js"><pre><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
|
||
<span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'MyComponent'</span>
|
||
<span class="token comment">// ...</span>
|
||
<span class="token punctuation">}</span>
|
||
</code></pre></div><p><strong>Input</strong></p><div class="language-"><pre><code>```html
|
||
<ul>
|
||
<li v-for="todo in todos" :key="todo.id">
|
||
{{ todo.text }}
|
||
</li>
|
||
</ul>
|
||
```
|
||
</code></pre></div><p><strong>Output</strong></p><div class="language-html"><pre><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>todo in todos<span class="token punctuation">"</span></span> <span class="token attr-name">:key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>todo.id<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>{{ todo.text }}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span>
|
||
</code></pre></div><p>A <a href="https://prismjs.com/#languages-list" target="_blank" rel="noopener noreferrer">list of valid languages</a> is available on Prism’s site.</p><h2 id="line-highlighting-in-code-blocks" tabindex="-1">Line Highlighting in Code Blocks <a class="header-anchor" href="#line-highlighting-in-code-blocks" aria-hidden="true">#</a></h2><p><strong>Input</strong></p><div class="language-"><pre><code>```js{4}
|
||
export default {
|
||
data () {
|
||
return {
|
||
msg: 'Highlighted!'
|
||
}
|
||
}
|
||
}
|
||
```
|
||
</code></pre></div><p><strong>Output</strong></p><div class="language-js"><div class="highlight-lines"><br><br><br><div class="highlighted"> </div><br><br><br><br></div><pre><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
|
||
<span class="token function">data</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">return</span> <span class="token punctuation">{</span>
|
||
<span class="token literal-property property">msg</span><span class="token operator">:</span> <span class="token string">'Highlighted!'</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">}</span>
|
||
</code></pre></div><p>In addition to a single line, you can also specify multiple single lines, ranges, or both:</p><ul><li>Line ranges: for example <code>{5-8}</code>, <code>{3-10}</code>, <code>{10-17}</code></li><li>Multiple single lines: for example <code>{4,7,9}</code></li><li>Line ranges and single lines: for example <code>{4,7-13,16,23-27,40}</code></li></ul><p><strong>Input</strong></p><div class="language-"><pre><code>```js{1,4,6-7}
|
||
export default { // Highlighted
|
||
data () {
|
||
return {
|
||
msg: `Highlighted!
|
||
This line isn't highlighted,
|
||
but this and the next 2 are.`,
|
||
motd: 'VitePress is awesome',
|
||
lorem: 'ipsum',
|
||
}
|
||
}
|
||
}
|
||
```
|
||
</code></pre></div><p><strong>Output</strong></p><div class="language-js"><div class="highlight-lines"><div class="highlighted"> </div><br><br><div class="highlighted"> </div><br><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><br><br><br><br></div><pre><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> <span class="token comment">// Highlighted</span>
|
||
<span class="token function">data</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">return</span> <span class="token punctuation">{</span>
|
||
<span class="token literal-property property">msg</span><span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">Highlighted!
|
||
This line isn't highlighted,
|
||
but this and the next 2 are.</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span>
|
||
<span class="token literal-property property">motd</span><span class="token operator">:</span> <span class="token string">'VitePress is awesome'</span><span class="token punctuation">,</span>
|
||
<span class="token literal-property property">lorem</span><span class="token operator">:</span> <span class="token string">'ipsum'</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">}</span>
|
||
</code></pre></div><h2 id="line-numbers" tabindex="-1">Line Numbers <a class="header-anchor" href="#line-numbers" aria-hidden="true">#</a></h2><p>You can enable line numbers for each code blocks via config:</p><div class="language-js"><pre><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
<span class="token literal-property property">markdown</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
<span class="token literal-property property">lineNumbers</span><span class="token operator">:</span> <span class="token boolean">true</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">}</span>
|
||
</code></pre></div><ul><li>Demo:</li></ul><picture><source srcset="/assets/line-numbers-mobile.f5ca96ee.gif" media="(max-width: 719px)"><img class="line-numbers-mobile-snap" src="/assets/line-numbers-mobile.f5ca96ee.gif" alt="Image"></picture><picture><source srcset="/assets/line-numbers-desktop.cc304762.png" media="(min-width: 720px)"><img class="line-numbers-desktop-snap" src="/assets/line-numbers-desktop.cc304762.png" alt="Image"></picture><h2 id="import-code-snippets" tabindex="-1">Import Code Snippets <a class="header-anchor" href="#import-code-snippets" aria-hidden="true">#</a></h2><p>You can import code snippets from existing files via following syntax:</p><div class="language-md"><pre><code><<< @/filepath
|
||
</code></pre></div><p>It also supports <a href="#line-highlighting-in-code-blocks">line highlighting</a>:</p><div class="language-md"><pre><code><<< @/filepath{highlightLines}
|
||
</code></pre></div><p><strong>Input</strong></p><div class="language-md"><pre><code><<< @/snippets/snippet.js{2}
|
||
</code></pre></div><p><strong>Code file</strong></p><div class="language-js"><pre><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token comment">// ..</span>
|
||
<span class="token punctuation">}</span>
|
||
</code></pre></div><p><strong>Output</strong></p><div class="language-js"><div class="highlight-lines"><br><div class="highlighted"> </div><br><br></div><pre><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token comment">// ..</span>
|
||
<span class="token punctuation">}</span>
|
||
</code></pre></div><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>The value of <code>@</code> corresponds to the source root. By default it's the VitePress project root, unless <code>srcDir</code> is configured.</p></div><p>You can also use a <a href="https://code.visualstudio.com/docs/editor/codebasics#_folding" target="_blank" rel="noopener noreferrer">VS Code region</a> to only include the corresponding part of the code file. You can provide a custom region name after a <code>#</code> following the filepath (<code>snippet</code> by default):</p><p><strong>Input</strong></p><div class="language-md"><pre><code><<< @/snippets/snippet-with-region.js{1}
|
||
</code></pre></div><p><strong>Code file</strong></p><div class="language-js"><pre><code><span class="token comment">// #region snippet</span>
|
||
<span class="token keyword">function</span> <span class="token function">foo</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token comment">// ..</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token comment">// #endregion snippet</span>
|
||
|
||
<span class="token keyword">export</span> <span class="token keyword">default</span> foo
|
||
</code></pre></div><p><strong>Output</strong></p><div class="language-js"><div class="highlight-lines"><div class="highlighted"> </div><br><br></div><pre><code><span class="token keyword">function</span> <span class="token function">foo</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token comment">// ..</span>
|
||
<span class="token punctuation">}</span></code></pre></div><h2 id="advanced-configuration" tabindex="-1">Advanced Configuration <a class="header-anchor" href="#advanced-configuration" aria-hidden="true">#</a></h2><p>VitePress uses <a href="https://github.com/markdown-it/markdown-it" target="_blank" rel="noopener noreferrer">markdown-it</a> as the Markdown renderer. A lot of the extensions above are implemented via custom plugins. You can further customize the <code>markdown-it</code> instance using the <code>markdown</code> option in <code>.vitepress/config.js</code>:</p><div class="language-js"><pre><code><span class="token keyword">const</span> anchor <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'markdown-it-anchor'</span><span class="token punctuation">)</span>
|
||
|
||
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
<span class="token literal-property property">markdown</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
<span class="token comment">// options for markdown-it-anchor</span>
|
||
<span class="token comment">// https://github.com/valeriangalliat/markdown-it-anchor#permalinks</span>
|
||
<span class="token literal-property property">anchor</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
<span class="token literal-property property">permalink</span><span class="token operator">:</span> anchor<span class="token punctuation">.</span>permalink<span class="token punctuation">.</span><span class="token function">headerLink</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
|
||
<span class="token comment">// options for markdown-it-table-of-contents</span>
|
||
<span class="token literal-property property">toc</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">includeLevel</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">]</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
|
||
<span class="token function-variable function">config</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">md</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||
<span class="token comment">// use more markdown-it plugins!</span>
|
||
md<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span><span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'markdown-it-xxx'</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">}</span>
|
||
</code></pre></div></div></div><footer class="page-footer" data-v-7eddb2c4 data-v-07c132fc><div class="edit" data-v-07c132fc><div class="edit-link" data-v-07c132fc data-v-1ed99556><a class="link" href="https://github.com/vuejs/vitepress/edit/main/docs/guide/markdown.md" target="_blank" rel="noopener noreferrer" data-v-1ed99556>Edit this page on GitHub <svg class="icon outbound icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-1ed99556><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div><div class="updated" data-v-07c132fc><p class="last-updated" data-v-07c132fc data-v-abce3432><span class="prefix" data-v-abce3432>Last Updated:</span><span class="datetime" data-v-abce3432></span></p></div></footer><div class="next-and-prev-link" data-v-7eddb2c4 data-v-38ede35f><div class="container" data-v-38ede35f><div class="prev" data-v-38ede35f><a class="link" href="/guide/assets" data-v-38ede35f><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon icon-prev" data-v-38ede35f><path d="M19,11H7.4l5.3-5.3c0.4-0.4,0.4-1,0-1.4s-1-0.4-1.4,0l-7,7c-0.1,0.1-0.2,0.2-0.2,0.3c-0.1,0.2-0.1,0.5,0,0.8c0.1,0.1,0.1,0.2,0.2,0.3l7,7c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3c0.4-0.4,0.4-1,0-1.4L7.4,13H19c0.6,0,1-0.4,1-1S19.6,11,19,11z"></path></svg><span class="text" data-v-38ede35f>Asset Handling</span></a></div><div class="next" data-v-38ede35f><a class="link" href="/guide/using-vue" data-v-38ede35f><span class="text" data-v-38ede35f>Using Vue in Markdown</span><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon icon-next" data-v-38ede35f><path d="M19.9,12.4c0.1-0.2,0.1-0.5,0-0.8c-0.1-0.1-0.1-0.2-0.2-0.3l-7-7c-0.4-0.4-1-0.4-1.4,0s-0.4,1,0,1.4l5.3,5.3H5c-0.6,0-1,0.4-1,1s0.4,1,1,1h11.6l-5.3,5.3c-0.4,0.4-0.4,1,0,1.4c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3l7-7C19.8,12.6,19.9,12.5,19.9,12.4z"></path></svg></a></div></div></div><!--[--><!--[--><!--]--><!--[--><div class="buy-sell-ads" data-v-4ce5ad17><div class="bsa-cpc" data-v-4ce5ad17></div></div><!--]--><!--]--></div></main></div><!----><!--]--></div>
|
||
<script>__VP_HASH_MAP__ = JSON.parse("{\"config_algolia-search.md\":\"da33e9e2\",\"config_basics.md\":\"8b6d1758\",\"config_carbon-ads.md\":\"2699d04a\",\"config_homepage.md\":\"2f01ca2d\",\"guide_api.md\":\"03e88529\",\"guide_assets.md\":\"aae76804\",\"guide_configuration.md\":\"bb340dd8\",\"guide_deploy.md\":\"661eacb4\",\"guide_differences-from-vuepress.md\":\"459a9c4a\",\"guide_frontmatter.md\":\"07dc76f0\",\"guide_getting-started.md\":\"f9753073\",\"guide_global-component.md\":\"01405ea5\",\"guide_markdown.md\":\"6ff83e9e\",\"guide_theming.md\":\"b28ff51e\",\"guide_using-vue.md\":\"74e82a4f\",\"index.md\":\"9a001cbe\"}")</script>
|
||
<script type="module" async src="/assets/app.54944ef9.js"></script>
|
||
|
||
</body>
|
||
</html> |