除了在 Markdown 内部使用新语法来增强内容外,你也可以使用 <iframe>
或 <img>
从外部引入链接来增强你的 Markdown 内容。
shields.io
你可以使用 shields.io 生成大量的动态勋章,比如项目的 Stars,NPM 版本号,下载量等。
输入:




输出:
当然你可以单纯利用它生成静态的徽章。你可以通过修改参数来定制文字、样式、颜色与大小。
输入:


输出:
INFO
详细的参数与使用请见 首页。
Markmap
Markmap 是一个将 Markdown 转换为思维导图的工具。它相对于主题内置的 flowchart 支持更多的格式与内容。
- 使用 Markmap 生成思维导图 HTML 文件
- 将 HTML 文件放在
.vuepress/public/
下 - 通过
<iframe>
插入到 Markdown
输入:
<iframe
:src="$withBase('/markmap/demo-zh.html')"
width="100%"
height="400"
frameborder="0"
scrolling="No"
leftmargin="0"
topmargin="0"
/>
输出:
CodePen
CodePen 可以很方便的创建代码演示并嵌入。
<iframe
height="265"
style="width: 100%;"
scrolling="no"
title="Solar System animation - Pure CSS"
src="https://codepen.io/kowlor/embed/ZYYQoy?height=265&theme-id=light&default-tab=css,result"
frameborder="no"
loading="lazy"
allowtransparency="true"
allowfullscreen="true"
>
See the Pen
<a href="https://codepen.io/kowlor/pen/ZYYQoy"
>Solar System animation - Pure CSS</a
>
by Malik Dellidj (<a href="https://codepen.io/kowlor">@kowlor</a>) on
<a href="https://codepen.io">CodePen</a>.
</iframe>