Markdown高级技巧辑录
Markdown高级技巧辑录
1.markdown文档内置base64图片并将base64码置于文档末尾
由于图床损坏,文档丢失等因素,base64图片内置有时是最佳选择,将一个web地址的图片转为base64,写了一段小脚本,另见nodejs脚本-将网络图片转成base64码方便写md插图
且由于base64码一般都会很长(随像素成正比),将图片图源和插图标签分离是浏览文档时的较好选择.
文档内置base64图片格式如下:
![ImgTag]
[ImgTag]:转换后的
e.g.
![百度LogoBase64码]
[百度LogoBase64码]:https://img2023.cnblogs.com/blog/812656/202308/812656-20230802111642821-1802838986.gif
2.居中/居右
居中可以直接用center标签,居右则需要align=right,格式如下:
<center>
...内容...
</center>
<!-- 或者align=center/right,默认left -->
<div align=right>
...内容...
</div>
注意:对于技巧1中描述的分离式的base64源图片进行居中时,一定不能写成一行,否则markdown转换html时会存在解析问题图片不显示,如下:
<!-- 错误情形!! -->
<center>![ImgTag]</center>
<div align=right>![ImgTag]</div>
<!-- 正确操作 -->
<center>
![ImgTag]
</center>
3.隐藏/折叠代码块
<details>
<summary>折叠代码块</summary>
<pre><code>
System.out.println("折叠代码块并使代码可以正常高亮");
</code></pre>
</details>
效果:
折叠代码块
System.out.println("折叠代码块并使代码可以正常高亮");
<details>
<summary>折叠代码块</summary>
<pre><blockcode>
System.out.println("折叠代码块并通过blockcode标签使代码无法高亮");
</blockcode></pre>
</details>
效果:
折叠代码块
System.out.println("折叠代码块并通过blockcode标签使代码无法高亮");
标签要素:
- details: 折叠代码标签
- summary: 折叠代码部分显示摘要
- pre: 以原有格式显示元素内的文字是已经格式化的文本
- code/blockcode：包裹代码块内容
4.Markdown隐藏大量段落
像技巧1中这样进行插图,在文档编辑时为了便于自己视线清晰,通常我会通过给图床部分加一个二级或三级标题,如下:
...内容
## 图床
### 图1
[图1]:data:image/gif;base64,...
这样的话像标题依然会一直露出,此时最简单粗暴的办法就是插入css内联样式,以下提供一种:
<!-- 隐藏后面所有内容,如果隐藏全文中间的段落,div标签要写完整 -->
<div style="display:none">
...内容
## 图床
### 图1
[图1]:data:image/gif;base64,...
