Markdown高级技巧辑录

Markdown高级技巧辑录

1.markdown文档内置base64图片并将base64码置于文档末尾

由于图床损坏,文档丢失等因素,base64图片内置有时是最佳选择,将一个web地址的图片转为base64,写了一段小脚本,另见nodejs脚本-将网络图片转成base64码方便写md插图

且由于base64码一般都会很长(随像素成正比),将图片图源和插图标签分离是浏览文档时的较好选择.

文档内置base64图片格式如下:

![ImgTag]

[ImgTag]:转换后的

e.g.

![百度LogoBase64码]

[百度LogoBase64码]:data:image/gif;base64,R0lGODlhdQAmAKIAAOYyL+rU4llg6Jmd8e92dCky4eEGAv///yH5BAAAAAAALAAAAAB1ACYAAAP/eLrc/jC2IEoZMATJu/9gyFVWIUyksIls677LUJbrEcxWDe98f+CWk4I0w/iOSNANKJQBC8mo9LEEDp8F3XR7rOIU2Cx3jHwKsUKyWqRhEEvGN3xN91BoCq8l9tTW/244Rk4mOkBGgIl8VjF+d4V5A5KKf3IWiCCEOZRraGxPnGqeIZpzoVyjDBptDpYmp1yumI9BWq5QUQS6fn+lm3lYmLdSBsW8xcjJBgAABLwfAMhXRQt6ODWuJ8rb3AYK0d3h4OHIBC7jC0TCYb/ZB+Th3/Dc4/PmLOgSvkwK+xjMAAEmCwhQnrc8rFSxGkiwnoFnEnTp0mdqlJw0DgIggwgu/08xABM+KkhGJdm9JJqMhGkyQIAATA3HxVwATuO8jyQfECiXJyYzZwzyOSilcqWEmzkP1ES6LGmDcStshjspNJAgMOwwNmBajGZXGyJVhU22quxOaR7hrahqQ52DC1jh/nj1AG0Eux3BLgu59x3SkxHO9mVLhJfcirUc2IWA96vUbvf+QkNbldCgIGCKHi6h1e/Bu1+VOiYHYAVTwBHyCfWyocoZzZovbf3ok1njzx/IltUg+GG13twMfta0gdDruLH3MOD6uaPDcI8hCAZp4/k24elmtOacGXlcPAuYe/VmnVt0ncioTyeYU+ibQRWOHyCRXEz40BDyivYWYBzQAIbTbeBUNTIZRF1QlNlVimGdfffLSPg9oJ9+vVV4H23smWSgFqrZZc0AWiTWACMXcjAhfgAqgxpXKwDXDXbZsSPjVcth6NNtZj3nzCpM1dDfPDACM+OQ9l2I1HiPlfNceentMoGLygQp5Eq3aKfYaUgOdBIB9RyYSEsmvASiFgG0RMRLEK2RAAA7

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,...