我的Markdown笔记

Markdown 是一种轻量化的标记语言,可以看作是$\LaTeX$的简化版。学习 Markdown 可以方便快捷地创作包含代码、公式、结构图等内容的文档,且文档以文本格式保存。

Markdown 主要包括以下几个方面的内容

  • 基本语法
  • 表格
  • 公式
  • 绘图
  • 相关软件

如果只学习 Markdown 的基本语法,那么 Markdown 对于写作效率的提升是有限的。对我来说,能够在Markdown中方便快捷地绘图和书写公式更为重要。

基本语法

Markdown 的基本语法,可以参考官方教程 Markdown 官方教程

下面记录几个容易遗忘的知识点

在文档中引用函数使用单引号,例如:Use the printf() function.

代码块

Markdown 代码块可声明编程语言类型有几十种,具体可以参考:

添加脚注

使用 Markdown1可以效率的书写文档, 直接转换成 HTML2, 你可以使用 Typora3 编辑器进行书写。


表格

Markdown 制作表格使用 | 来分隔不同的单元格,使用 - 来分隔表头和其他行。

Pandoc 以及其他工具支持更多的表格形式,

| 表头   | 表头   |
| ------ | ----  |
| 单元格 | 单元格 |
| 单元格 | 单元格 |

参考教程

公式

Markdown支持数学公式主要是两个 JavaScript 插件 MathJax 和 Katex ($\KaTeX$)。

Supported Functions · KaTeX

加颜色,加大字体

$$\color{blue}{F=ma}$$
\[E=mc^2\] \[\color{blue}{F=ma}\]
$$\huge{F=ma}$$
\[\huge{F=ma}\]
$$\Huge{F=ma}$$
\[\Huge{F=ma}\]

图表

Markdown 中除了引用图片,还可以使用Mermaid绘制更为丰富的图片。

Mermaid是一个用于画流程图、状态图、时序图、甘特图的库,使用JS进行本地渲染,广泛集成于许多Markdown编辑器中。

之前用过 PlantUML,但是发现这个东西的实现原理是生成 UML 的图片后上传服务端,每次再从服务端读取,因此觉得不够鲁棒,隐私性也不好,因而弃用。

Mermaid 作为一个使用 JS 渲染的库,生成的不是一个“图片”,而是一段 HTML 代码,因此安全许多。

官网:https://mermaidjs.github.io/

Github 项目地址:https://github.com/knsv/mermaid

接下来介绍 Mermaid 的流程图及序列图的语法,也就是大家在工作中常使用的图表。

流程图

图表方向

Mermaid 支持多种图表的方向,语法如下:

graph 方向描述
    图表中的其他语句...

其中“方向描述”为

用词 含义
TB 从上到下
BT 从下到上
RL 从右到左
LR 从左到右

用语转义

只支持表情,不支持公式??

graph LR
    A["A double quote:#quot;"] -->B["A dec char:#9829;"]

节点定义

即流程图中每个文本块,包括开始、结束、处理、判断等。Mermaid 中每个节点都有一个 id,以及节点的文字。

表述 说明
id[文字] 矩形节点
id(文字) 圆角矩形节点
id((文字)) 圆形节点
id>文字] 右向旗帜状节点
id{文字} 菱形节点
id[(文字)] 数据库节点

需要注意的是,如果节点的文字中包含标点符号,需要时用双引号包裹起来。 另外如果希望在文字中使用换行,请使用替换换行

graph TB
    node1>右向旗帜状节点]
    node2{菱形节点}
    node3((圆形))
    node4(圆角矩形节点)
    node5[(Database)]

节点间的连线

表述 说明
> 添加尾部箭头
- 不添加尾部箭头
-- 单线
--text-- 单线上加文字
== 粗线
==text== 粗线加文字
-.- 虚线
-.text.- 虚线加文字

子图表

使用以下语法添加子图表

subgraph 子图表名称
    子图表中的描述语句...
end

对 fontawesome 的支持

使用 fa: # 图表名称 # 的语法添加 fontawesome。

举个例子

这里写图片描述

graph TB
    id1(圆角矩形)--普通线-->id2[矩形]
    subgraph 子图表
        id2==粗线==>id3{菱形}
        id3-.虚线.->id4>右向旗帜]
        id3--无箭头---id5((圆形))
    end

序列图

使用以下语法开始序列图

sequenceDiagram
    [参与者1][消息线][参与者2]:消息体
    ...

例如

sequenceDiagram
    张三->>李四: 吃了吗?
    李四->>张三: 吃了

参与者

上例中的张三、李四都是参与者,上例中的语法是最简单的,也可以明显表明参与者有哪些

sequenceDiagram
    participant 参与者 1
    participant 参与者 2
    ...
    participant 简称 as 参与者 3 # 该语法可以在接下来的描述中使用简称来代替参与者 3

消息线

类型 描述
-> 无箭头的实线
--> 无箭头的虚线
->> 有箭头的实线
-->> 有箭头的虚线
-x 末端为叉的实线(表示异步)
--x 末端为叉的虚线(表示异步)

处理中

在消息线末尾增加 + ,则消息接收者进入当前消息的“处理中”状态; 在消息线末尾增加 - ,则消息接收者离开当前消息的“处理中”状态。

或者使用以下语法直接说明某个参与者进入“处理中”状态

activate 参与者

标注

语法如下

Note 位置表述 参与者: 标注文字

其中位置表述可以为

表述 含义
right of 右侧
left of 左侧
over 在当中,可以横跨多个参与者

循环

语法如下

loop 循环的条件
end

判断

alt 条件 1 描述
    分支 1 描述语句
else 条件 2 描述 # else 分支可选
    分支 2 描述语句
else ...
    ...
end

如果遇到可选的情况,即没有 else 分支的情况,使用如下语法:

opt 条件描述
    分支描述语句
end

举个例子

这里写图片描述

sequenceDiagram
    participant z as 张三
    participant l as 李四
    loop 日复一日
        z->>l: 吃了吗您呐?
        l-->>z: 吃了,您呢?
        activate z
        Note left of z: 想了一下
        alt 还没吃
            z-xl: 还没呢,正准备回去吃
        else 已经吃了
            z-xl: 我也吃过了,哈哈
        end
        opt 大过年的
            l-->z: 祝您新年好啊
        end
    end

饼图

pie
    "Dogs" : 36
    "Cats" : 85
    "Rats" : 15

相关软件

MathJax 和 KaTeX

浏览器插件

  • Copy Selection as Markdown

  • Markdown Viewer

    支持的数学公式,mermaid和图表,非常不错。

下面两个插件也不错,但是没有数学公式支持

  • Markdown Editor for Firefox
  • Markdown Viewer Webext

专用软件

  1. Logseq : 存储的格式不是标准的 Markdown 格式。
  2. Obsidian: 使用起来太过复杂,同步功能比较弱,但预览的确很强
  3. QOwnNotes 不支持数学公式,忽略之

    Latex support · Issue #529 · pbek/QOwnNotes

    MathJax is a javascript library, we don’t have a webbrowser to use it. Please see #377 and #400.

文本编辑器 Vim 和 VsCode

格式转换 Pandoc

pandoc 生成pdf

pandoc -s --pdf-engine=xelatex --highlight-style=tango
        -V CJKmainfont='WenQuanYi Micro Hei'
        -V geometry:margin=.8in
        -V papersize=b5 xx.md
        -o test.pdf
  1. Markdown是一种纯文本标记语言 

  2. HyperText Markup Language 超文本标记语言 

  3. NEW WAY TO READ & WRITE Markdown.