@wilboerht/blog-template
Version:
A modern bilingual blog template built with VitePress
10 lines (9 loc) • 8.54 kB
JavaScript
import{_ as i}from"./chunks/vue-logo.Bj3P4SZR.js";import{_ as s,c as t,a as e,o as l}from"./chunks/framework.D3nGTGqI.js";const u=JSON.parse('{"title":"Markdown 示例","description":"展示 VitePress 中 Markdown 的各种用法","frontmatter":{"title":"Markdown 示例","date":"2024-01-20T00:00:00.000Z","tags":["Markdown","教程"],"description":"展示 VitePress 中 Markdown 的各种用法"},"headers":[],"relativePath":"zh/posts/markdown-examples.md","filePath":"zh/posts/markdown-examples.md"}'),n={name:"zh/posts/markdown-examples.md"};function h(o,a,d,r,p,k){return l(),t("div",null,a[0]||(a[0]=[e(`<h1 id="markdown-示例" tabindex="-1">Markdown 示例 <a class="header-anchor" href="#markdown-示例" aria-label="Permalink to "Markdown 示例""></a></h1><p>本文将展示在 VitePress 中使用 Markdown 的各种方式。</p><h2 id="基础语法" tabindex="-1">基础语法 <a class="header-anchor" href="#基础语法" aria-label="Permalink to "基础语法""></a></h2><h3 id="标题" tabindex="-1">标题 <a class="header-anchor" href="#标题" aria-label="Permalink to "标题""></a></h3><div class="language-markdown vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">markdown</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#005CC5;--shiki-light-font-weight:bold;--shiki-dark:#79B8FF;--shiki-dark-font-weight:bold;"># h1 标题</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-light-font-weight:bold;--shiki-dark:#79B8FF;--shiki-dark-font-weight:bold;">## h2 标题</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-light-font-weight:bold;--shiki-dark:#79B8FF;--shiki-dark-font-weight:bold;">### h3 标题</span></span></code></pre></div><h3 id="强调" tabindex="-1">强调 <a class="header-anchor" href="#强调" aria-label="Permalink to "强调""></a></h3><ul><li><strong>粗体</strong></li><li><em>斜体</em></li><li><em><strong>粗斜体</strong></em></li><li><s>删除线</s></li></ul><h3 id="列表" tabindex="-1">列表 <a class="header-anchor" href="#列表" aria-label="Permalink to "列表""></a></h3><p>有序列表：</p><ol><li>第一项</li><li>第二项</li><li>第三项</li></ol><p>无序列表：</p><ul><li>项目一</li><li>项目二</li><li>项目三</li></ul><h3 id="引用" tabindex="-1">引用 <a class="header-anchor" href="#引用" aria-label="Permalink to "引用""></a></h3><blockquote><p>这是一段引用文本。</p><p>这是引用的第二段。</p></blockquote><h2 id="扩展语法" tabindex="-1">扩展语法 <a class="header-anchor" href="#扩展语法" aria-label="Permalink to "扩展语法""></a></h2><h3 id="表格" tabindex="-1">表格 <a class="header-anchor" href="#表格" aria-label="Permalink to "表格""></a></h3><table tabindex="0"><thead><tr><th>表头1</th><th>表头2</th><th>表头3</th></tr></thead><tbody><tr><td>单元格1</td><td>单元格2</td><td>单元格3</td></tr><tr><td>单元格4</td><td>单元格5</td><td>单元格6</td></tr></tbody></table><h3 id="代码块" tabindex="-1">代码块 <a class="header-anchor" href="#代码块" aria-label="Permalink to "代码块""></a></h3><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">function</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> hello</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">() {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'Hello, 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></code></pre></div><h3 id="任务列表" tabindex="-1">任务列表 <a class="header-anchor" href="#任务列表" aria-label="Permalink to "任务列表""></a></h3><ul><li>[x] 已完成任务</li><li>[ ] 未完成任务</li><li>[ ] 待办事项</li></ul><h2 id="特殊功能" tabindex="-1">特殊功能 <a class="header-anchor" href="#特殊功能" aria-label="Permalink to "特殊功能""></a></h2><h3 id="提示框" tabindex="-1">提示框 <a class="header-anchor" href="#提示框" aria-label="Permalink to "提示框""></a></h3><div class="tip custom-block"><p class="custom-block-title">提示</p><p>这是一个提示框</p></div><div class="warning custom-block"><p class="custom-block-title">警告</p><p>这是一个警告框</p></div><div class="danger custom-block"><p class="custom-block-title">危险</p><p>这是一个危险提示框</p></div><div class="info custom-block"><p class="custom-block-title">信息</p><p>这是一个信息框</p></div><h3 id="代码组" tabindex="-1">代码组 <a class="header-anchor" href="#代码组" aria-label="Permalink to "代码组""></a></h3><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-z0ZLg" id="tab-KxFglTi" checked><label data-title="config.js" for="tab-KxFglTi">config.js</label><input type="radio" name="group-z0ZLg" id="tab-oGh5-9c"><label data-title="config.ts" for="tab-oGh5-9c">config.ts</label></div><div class="blocks"><div class="language-js vp-adaptive-theme active"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><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:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> data: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'Hello'</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><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" tabindex="0"><code><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:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> data: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'Hello'</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">} </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">as</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> const</span></span></code></pre></div></div></div><h3 id="图片展示" tabindex="-1">图片展示 <a class="header-anchor" href="#图片展示" aria-label="Permalink to "图片展示""></a></h3><p><img src="`+i+'" alt="Vue Logo"></p><h3 id="自定义容器" tabindex="-1">自定义容器 <a class="header-anchor" href="#自定义容器" aria-label="Permalink to "自定义容器""></a></h3><details class="details custom-block"><summary>点击查看更多</summary><p>这是一些隐藏的内容，点击后才会显示。</p></details><h2 id="数学公式" tabindex="-1">数学公式 <a class="header-anchor" href="#数学公式" aria-label="Permalink to "数学公式""></a></h2><p>使用 KaTeX 渲染数学公式：</p><p>$E = mc^2$</p><p>$$ \\frac{n!}{k!(n-k)!} = \\binom{n}{k} $$</p><h2 id="总结" tabindex="-1">总结 <a class="header-anchor" href="#总结" aria-label="Permalink to "总结""></a></h2><p>这些示例展示了 VitePress 中 Markdown 的主要用法。你可以根据需要组合使用这些功能来创建丰富的文档内容。</p>',39)]))}const g=s(n,[["render",h]]);export{u as __pageData,g as default};