主题

2022-05-16
673
3.3m

博客记录-笔记标记与插入思维导图pdf 折腾记录 ​

1. 文本标注 ​

使用<mark>标签让文本高亮

text
本网站是一个 <mark>知识管理&博客</mark> 网站

本网站是一个 知识管理&博客 网站

2. 标记 ​

内置标记 ​

主题内置的Badge组件 ，直接在 Markdown 文件中使用

html
<Badge text="beta" type="warning"/>
<Badge text="测试"/>
beta测试

外部标记 ​

使用 shields (opens new window)生成标记，在Markdown中使用

markdown
![npm](https://img.shields.io/npm/v/vuepress-theme-vdoing)
![star](https://img.shields.io/github/stars/xugaoyi/vuepress-theme-vdoing)

npm star

这类标记图标可以生成动态统计数据。

3. 折叠列表 ​

主题内置的容器，直接在 Markdown 文件中使用

html
::: details
图片隐藏测试

![image-20220515211448586](https://pic.241315.xyz/2022/09/990893b6bc1475714ed4c0ffed4b7eec.png)

:::
详细信息

图片隐藏测试

image-20220515211448586

更多：Markdown 容器

4. 思维导图 & 流程图 ​

这里采用MindManager21来制作思维导图→导出HTML→上传到PICGO B2图床→嵌入markdown文件的方式做实现

破解版的MindManager21下载地址（含补丁）

下载后解压安装EXE并把CRACKER解压后的文件放到软件安装目录根目录即可

运行mindmanager新建任意思维导图

image-20220926204714150

选择文件→另存为→类型选则html导出

image-20220926204846053

image-20220926204920356

image-20220926204936561

image-20220926205001136

然后讲导出的图床通过picgo上传到B2图床，关于B2图床的搭建教程，见:B2图床的搭建教程

image-20220926205114015

然后得到网页的链接，然后通过以下代码嵌入markdown文件

bash
<div style="position: relative; width: 100%; height: 0; padding-bottom: 75%;">
<iframe src="https://pic.241315.xyz/2022/09/049f577c9a844ff2c8c8f41bc4bec9a7.html" style="position: absolute; width: 100%; height: 100%; left: 0; top: 0;"></iframe>
</div>

效果如下:

5. pdf展示方案 ​

利用pdfjs+网盘地址来预览pdf

bash
<div style="position: relative; width: 100%; height: 0; padding-bottom: 75%;">
<iframe src="/pdf/web/viewer.html?file=https://pic.241315.xyz/2023/11/cb2134ed1f4c1d4f06f1cb185bb05872.pdf" style="position: absolute; width: 100%; height: 100%; left: 0; top: 0;"></iframe>
</div>

效果如下:

最近更新