关于 Markdown 的一些奇技淫巧

简介: Markdown 基础语法之外的高级用法,让你的文档更出彩。

(图 from http://mikemclin.net)

自从几年前开始在 GitHub 玩耍,接触到 Markdown 之后,就一发不可收拾,在各种文档编辑上,有条件用 Markdown 的尽量用,不能用的创造条件也要用——README、博客、公众号、接口文档等等全都是,比如当前这篇文章就是用 Markdown 编辑而成。

这几年也发现越来越多的网站和程序提供了对 Markdown 的支持,从最初接触的 GitHub、Jekyll,到简书、掘金、CSDN 等等,由此也从别人做得好的文档中,学到了一些『奇技淫巧』,所以本文不是对 Markdown 基础语法的介绍,而是一些相对高级、能将 Markdown 玩出更多花样的小技巧。

注:如下技巧大多是利用 Markdown 兼容部分 HTML 标签的特性来完成,不一定在所有网站和软件里都完全支持,主要以 GitHub 支持为准。

在表格单元格里换行

借助于 HTML 里的 <br/> 实现。

示例代码:

| Header1 | Header2                          |
|---------|----------------------------------|
| item 1  | 1. one<br />2. two<br />3. three |

示例效果:

Header1 Header2
item 1 1. one

2. two
3. three |

图文混排

使用 <img> 标签来贴图,然后指定 align 属性。

示例代码:

<img align="right" src="https://raw.githubusercontent.com/mzlogin/mzlogin.github.io/master/images/posts/markdown/demo.png"/>

这是一个示例图片。

图片显示在 N 段文字的右边。

N 与图片高度有关。

刷屏行。

刷屏行。

到这里应该不会受影响了,本行应该延伸到了图片的正下方,所以我要足够长才能确保不同的屏幕下都看到效果。

示例效果:

图片

控制图片大小和位置

标准的 Markdown 图片标记 ![]() 无法指定图片的大小和位置,只能依赖默认的图片大小,默认居左。

而有时候源图太大想要缩小一点,或者想将图片居中,就仍需要借助 HTML 的标签来实现了。图片居中可以使用 <div> 标签加 align 属性来控制,图片宽高则用 widthheight 来控制。

示例代码:

**图片默认显示效果:**

![](https://raw.githubusercontent.com/mzlogin/mzlogin.github.io/master/images/posts/markdown/demo.png)

**加以控制后的效果:**

<div align="center"><img width="65" height="75" src="https://raw.githubusercontent.com/mzlogin/mzlogin.github.io/master/images/posts/markdown/demo.png"/></div>

示例效果:

图片

格式化表格

表格在渲染之后很整洁好看,但是在文件源码里却可能是这样的:

|Header1|Header2|
|---|---|
|a|a|
|ab|ab|
|abc|abc|

不知道你能不能忍,反正我是不能忍。

好在广大网友们的智慧是无穷的,在各种编辑器里为 Markdown 提供了表格格式化功能,比如我使用 Vim 编辑器,就有 vim-table-mode 插件,它能帮我自动将表格格式化成这样:

| Header1 | Header2 |
|---------|---------|
| a       | a       |
| ab      | ab      |
| abc     | abc     |

是不是看着舒服多了?

如果你不使用 Vim,也没有关系,比如 Atom 编辑器的 markdown-table-formatter 插件,Sublime Text 3 的 MarkdownTableFormatter 等等,都提供了类似的解决方案。

使用 Emoji

这个是 GitHub 对标准 Markdown 标记之外的扩展了,用得好能让文字生动一些。

示例代码:

我和我的小伙伴们都笑了。:
smile
:

示例效果:

我和我的小伙伴们都笑了。图片

更多可用 Emoji 代码参见 https://www.webpagefx.com/tools/emoji-cheat-sheet/。

行首缩进

直接在 Markdown 里用空格和 Tab 键缩进在渲染后会被忽略掉,需要借助 HTML 转义字符在行首添加空格来实现, &ensp; 代表半角空格, &emsp; 代表全角空格。

示例代码:

&
emsp
;&
emsp
;春天来了,又到了万物复苏的季节。

示例效果:

  春天来了,又到了万物复苏的季节。

自动维护目录

有时候维护一份比较长的文档,希望能够自动根据文档中的标题生成目录(Table of Contents),并且当标题有变化时自动更新目录,能减轻工作量,也不易出错。

如果你使用 Vim 编辑器,那可以使用我维护的插件 vim-markdown-toc 来帮你完美地解决此事:

图片

插件地址:https://github.com/mzlogin/vim-markdown-toc

如果你使用其它编辑器,一般也能找到对应的解决方案,比如 Atom 编辑器的 markdown-toc 插件,Sublime Text 的 MarkdownTOC 插件等。

后话

好了,这一波的奇技淫巧就此告一段落,希望大家在了解这些之后能有所收获,更好地排版,专注写作。

如果你觉得本文对你有帮助,欢迎关注我的微信公众号,获取更多有帮助的内容。

参考

目录
相关文章
|
11月前
|
程序员
【Markdown速成】半小时入门Markdown教程(后缀.md文件详解)
作为程序员我们经常会看到README.md这种说明文件,以.md为后缀的文件就是我们所说的Markdown的文件。
1369 4
|
12月前
|
存储 安全 区块链
未来网络架构:从中心化到去中心化的演进
【10月更文挑战第20天】 在数字时代,网络架构是支撑信息社会的基石。本文将探讨网络架构如何从传统的中心化模式逐步演变为更加灵活、高效的去中心化模式。我们将分析这一转变背后的技术驱动力,包括区块链、分布式账本技术和点对点(P2P)网络,以及这些技术如何共同作用于网络的未来形态。文章还将讨论去中心化网络架构面临的挑战和潜在的解决方案,为读者提供一个关于网络未来发展的宏观视角。
480 12
|
12月前
|
缓存 Java Shell
Android 系统缓存扫描与清理方法分析
Android 系统缓存从原理探索到实现。
387 15
Android 系统缓存扫描与清理方法分析
|
自然语言处理 IDE 开发工具
通义灵码编程智能体上线,支持Qwen3模型
通义灵码最全使用指南,一键收藏。
128447 31
通义灵码编程智能体上线,支持Qwen3模型
|
12月前
|
Java API
Java 对象释放与 finalize 方法
关于 Java 对象释放的疑惑解答,以及 finalize 方法的相关知识。
156 17
|
12月前
|
Java Shell Linux
从 am start 的 --user 参数说到 Android 多用户
am start 命令有时并不会乖乖如我们所愿,这时候我们需要知对策并知其所以然。
290 16
|
12月前
|
存储 设计模式 缓存
从一个 NullPointerException 探究 Java 的自动装箱拆箱机制
这行代码一个对象方法都没有调用,怎么会抛出 NullPointerException 呢?
114 9
|
12月前
|
安全
基于AFDPF主动频率偏移法的孤岛检测Simulink仿真
本课题基于AFDPF(主动频率偏移法)进行孤岛检测的Simulink仿真。在分布式发电系统中,孤岛现象可能对电网安全和人员生命构成威胁。AFDPF通过主动改变并网点的注入功率,引起系统频率的变化,从而检测孤岛现象。系统正常运行时,频率由主电网控制;采用AFDPF方法时,逆变器短暂改变有功功率输出,监测频率变化。若频率迅速恢复,说明系统仍与大电网相连;否则,可能存在孤岛现象。本仿真使用MATLAB2022a版本。
|
12月前
|
并行计算 JavaScript 前端开发
单线程模型
【10月更文挑战第15天】
|
12月前
|
JavaScript 前端开发 IDE
ESLint
【10月更文挑战第14天】
186 12