110.其他Markdown技巧
讲讲其他关于 Markdown 的杂技。
Slidev
官网:cn.sli.dev/guide
Slidev 是一款专门为开发者打造的演示文稿工具,目前在 Github 上已有 23K+Star
。
通过 Slidev,我们只要使用熟悉的 Markdown 就可以做出炫酷的 PPT 来,同时拥有支持 HTML 和 Vue 组件的能力,并且能够呈现像素级完美的布局。
去除冗余图片
写博客的时候,经常会插入图片。如果觉得图片不合适,可以直接在编辑器中删掉该图片的引用,但是这就有一个问题:图片所在的文件夹中,对应的图片并没有被删除。
如果你使用的是思源笔记,可以很方便地在设置里去除未引用的资源(包括图片):
而 Typora 也有相关的插件,参考 github.com/obgnail/typora_plugin
如果你使用的是其他 Markdown 编辑器,那么可能只能另辟蹊径了,我随手 Google 了下,也有不少人自己动手写代码完成(其实懂编程的话并不难,特别是用 Python 的话):
再不济,也能手工删除,就是费时费力了点。
将图片转为 Base64 文本
为什么要转
在 Markdown 中,插入图片的语法是:![图片说明](图片链接)
。但这有个问题,就是图片得跟着文章走,对图片的依赖很重,例如想要发布到网上,就得先将图片上传到其他地方;而如果要发给朋友/同事,还需要连图片一起发送。
为此,我们可以改为使用内嵌图片,其原理就是将图片转为文本的形式,嵌入到文章内,这样就不用依赖其他文件了。
原理
那么如何将图片转为文本呢?我们可以使用 Base64 编码。
Base64 是一种常见的二进制数据编码方式,它将任意二进制数据转换为文本字符串,便于在网络传输、数据存储和HTML/CSS等文本环境中直接使用。此外,电子邮件协议就是文本协议,如果要在电子邮件中添加一个二进制文件(比如图片),就可以用 Base64 编码,然后以文本的形式传送。
如果想深入了解 Base64 编码,可以看我的另一篇文章:Base64编码
举个例子,这是某张图片的超链接,圆括号里的内容就是将图片进行 Base 64 编码后的内容:
![](data:image/png;base64,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)
效果:
没错,一张小小的图片,转换成文本后几乎就能霸屏.... 所以我觉得这种方式不太优雅,为此我是坚持使用图床的。
此外,如果图片太多,那么整个文章就会变的很大,慎用!
如何转
可以用一些在线网站来转(善用 Google):
也可以用第三方插件来转,例如 VSCode 有个插件叫 ClipImage64 的插件,就支持这个转换:
如果你懂编程,那么几乎任何编程语言都支持这个转换,例如 Python:
import base64
f=open('xxxxpath.jpg','rb')
ls_f=base64.b64encode(f.read())
f.close()
print(ls_f)
优化
图片的 base64
编码非常之长,直接插入文件中间会影响文章的美观。为此,我们可以使用变量的写法。
在需要插入图片的地方写: ![][reference_name]
在任何地方(最好是文章末尾)写: [reference_name]:<base64>
效果:
然后文章的末尾定义了该图片的 Base 64 编码:
如果你有什么其他“杂技”,也欢迎留言分享🙃
——(未完待续)——