如何让你的笔记更有表现力
你的知识笔记枯燥无味没有重点?基于本主题,配合各种骚操作,让你的知识笔记表现力爆棚~~
笔记
Markdown的基本语法就不再重复啦 (对Markdown不了解的可以看 这里 (opens new window)), 下面将介绍一些可以在本主题Markdown中使用的骚操作~
# 1. 文本高亮
使用<mark>
标签让文本高亮
Vdoing是一款简洁高效的 <mark>知识管理&博客</mark> 主题
Vdoing是一款简洁高效的 知识管理&博客 主题
# 2. 标记
# 内置标记
主题内置的Badge组件 (opens new window),直接在 Markdown 文件中使用
<Badge text="beta" type="warning"/>
<Badge text="Vdoing主题"/>
# 外部标记
使用 shields (opens new window) 生成标记,在Markdown中使用
![npm](https://img.shields.io/npm/v/vuepress-theme-vdoing)
![star](https://img.shields.io/github/stars/xugaoyi/vuepress-theme-vdoing)
这类标记图标可以生成动态统计数据。
# 3. 折叠列表
主题内置的容器,直接在 Markdown 文件中使用
::: details
这是一个详情块
```js
console.log('这是一个详情块')
```
:::
点击查看
这是一个详情块
console.log('这是一个详情块')
更多:Markdown 容器
# 4. 思维导图 & 流程图
# 方法一:
- 使用Markmap (opens new window)生成思维导图html文件
- 将html文件放在
docs/.vuepress/public/markmap/
- 通过
<iframe>
插入到Markdown
<iframe :src="$withBase('/markmap/01.html')" width="100%" height="400" frameborder="0" scrolling="No" leftmargin="0" topmargin="0"></iframe>
# 方法二:
通过<iframe>
标签引入processon (opens new window)或其他在线作图工具生成的链接。
<iframe src="https://www.processon.com/view/link/5e718942e4b015182028682c" width="100%" height="500" frameborder="0" scrolling="No" leftmargin="0" topmargin="0"></iframe>
# 方法三:
使用流程图插件:
# 5.Demo演示框
# 方法一:
- 安装 vuepress-plugin-demo-block (opens new window)或其他同类插件,使用方法看插件文档
- 在
.vuepress/config.js
配置插件 - Markdown中使用
# 方法二:
<iframe height="400" style="width: 100%;" scrolling="no" title="【CSS:行为】使用:hover和attr()定制悬浮提示" src="https://codepen.io/xugaoyi/embed/vYNKNaq?height=400&theme-id=light&default-tab=css,result" frameborder="no" allowtransparency="true" allowfullscreen="true" loading="lazy">
See the Pen <a href='https://codepen.io/xugaoyi/pen/vYNKNaq'>【CSS:行为】使用:hover和attr()定制悬浮提示</a> by xugaoyi
(<a href='https://codepen.io/xugaoyi'>@xugaoyi</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>
笔记
<iframe>
标签还可以嵌入其他任何外部网页,如视频、地图等
上次更新: 2023/07/09, 11:40:24