测试页面
部分Badge内部为设置的搜狗快捷短语，本人用的是小鹤双拼，如hvvh(徽章)
常用emoji
🔄 后续hzxu ⏩ 预告kkjb 🔘 简讯jmxy 📰 广告bcvi 💬 评论pkly
🏞️ 照片vcpm 📄 文档wfdh 👍 赞zj 👎 踩cd ❓ 问号wh
常用html
静静提问为加粗橙色 jkjk灰色为不重要的内容grey
html
**<span style='color:orange'>橙色加粗</span>**
<span style='color:grey'>灰色</span>
仿知乎问题日志的文字增删效果 删除文字delete插入文字insert
html
<span class='delete'>删除</span>
<span class='insert'>插入</span>
下标[1] 上标[2] 注音
html
下标<sub>[1]</sub>
上标<sup>[2]</sup>
<ruby>注音<rt>zhùyīn</rt></ruby>
非标题跳转
html
<!-- 锚点（搜狗pin） -->
<a id=“标签”>📌</a>
<!-- 跳转按钮（搜狗link） -->
<a href=“#标签”>显示内容</a>
图片说明居中vuui
常规文字 可以带链接vuuil
html
<p class="imgCaption">图片说明居中</p> <!-- 搜狗vuui(注释) -->
<p class="imgCaption">常规文字
<a href="https://github.com/vuejs/vitepress">
可以带链接 <!-- 搜狗vuuil(注释link) -->
</a>
</p>
Badge 徽章 二级标题样式不同
Badge alpha.27 新增 以及我自定义的组件 MyBadge（需传入hue值，见下方）hvvhhvvhx
infotipwarningdanger插槽0102030405060708090100110120130140150160170180190200210220230240250260270280290300310320330340350360
html
<Badge type="info" text="..." />
<Badge type="tip" text="..." /> <!-- 无type则默认为tip -->
<Badge type="warning" text="..." />
<Badge type="danger" text="..." />
<Badge type="info">插槽</Badge>
<MyBadge hue=300 text="..." /> <!-- 自定义颜色，hue值见上方 -->
自定义块及iframe
往期马督工点评 info
搬运者注 tip
马督工点评 warning mdg(马督工)
编辑吐槽 danger bmji(编辑)
点击展开 details bilibili youtube
通常用于嵌入视频iframe，如下方演示
markdown
::: info | tip | warning | danger | details 标题
内容
:::
嵌入视频iframe示例
html
::: details 标题
<iframe src="播放器链接" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" height=400 width=100%> </iframe>
:::
插件
行内
公式块支持
与Typora用法一致，不给代码块了
但是为mathjax3，没有xy-pic这类绘制曲线图表的库，只有基础包
Twitter Embed（vue-tweet）
原生方法：推特官方提供
好想有人陪着呀……
— 我好惨。我是垃圾。我全面溃败。来生再见。 (@timoskky) October 23, 2022
html
<blockquote class="twitter-tweet" align="center"><p lang="ja" dir="ltr">好想有人陪着呀……</p>— 我好惨。我是垃圾。我全面溃败。来生再见。 (@timoskky) <a href="https://twitter.com/timoskky/status/1584179519874682882?ref_src=twsrc%5Etfw">October 23, 2022</a></blockquote>
vue-tweet插件 （暂时取消）：
html
<Tweet tweet-id="1582133989544165376" width=550 align="center" lang="zh-cn"/>
mermaid（vitepress-plugin-mermaid）
null
图片点击放大（medium-zoom）
以及图片表格样式调整（只保留内部竖边框）
 |  |
|---|
Sitemap（sitemap）
点击加载： sitemap.xml 、 sitemap.txt
自定义组件-仿B站评论（BiliComment）
基础：bcx
html
<BiliComment name="昵称" content="内容<br>换行"/>
完整：bc reply
陈
陈睿
你所热爱的，就是你的生活。
2020-05-04 00:1479586
蒙古上单
你 妈什么时候死啊？html
<!-- time、like、reply皆为可选项 -->
<BiliComment
name="陈睿"
content="你所热爱的，就是你的生活。"
time="2020-05-04 00:14"
like="79586"
reply="<div class='bc-reply'>蒙古上单</div>你 妈什么时候死啊？"
/>
可用插槽：bcs (bc-slot)
匿名甲
插槽内可用md语法，以及自定义组件slot
html
<BiliComment name="匿名甲">一些内容。。。</BiliComment>
贰
贰鼠（可点击）
好不容易写了个评论组件，记录一下，今后督工的观众评论截图就用这个代替了，方便搜索。另外换行请用<br>
2022-10-16 00:32114514
贰鼠二号
头像背景颜色是用散列函数根据用户名随机生成的，所以一个id只对应一个颜色贰鼠三号
1. 添加了回复功能，如此2. 添加了可选参数uid，用于点击昵称跳转链接，见上方
3. 添加了插槽功能，能在里面用md语法了，见下方
匿名贰鼠
若为匿名则头像为noface
html
<!-- （以下参数除name外均为可选项） -->
<BiliComment
name="昵称" content="内容"
time="时间" like="赞数" uid="用于昵称链接">
...
</BiliComment>
评论系统（Valine）
如下↓
贰
过去中国搞建设虽然也有通过无人区的铁路，但是绝大多数铁路至少有一端是人口稠密地区，这条敦格铁路的两端，敦煌19万人口，格尔木也只有20万人口出头，
为什么要为这两个小城市修一条直通的铁路呢？