文章目录

Markdown学习笔记

起于2020.05.15
结束于…
若学到新的技巧，会及时更新

参考文献

[1] 菜鸟教程
[2] CSDN教程：几款主流好用的markdown编辑器介绍

一、Markdown简介

         以前一直用work写文档和笔记，但是work的格式太难控制了，而且如果到了写论文的时候，变一个版本，格式可能就会变了，当然，对于写论文来说，Markdown可能不是最好的选择，而应该选择Latex，不过，对于写博客，还有Github，等等，都支持Markdown排版，用来写普通笔记也是一个不错的选择，为了以后更好地使用Markdown，这里整理一下Markdown的学习笔记。
        这份笔记就是一边看着1一边写的，基本就是把它抄过来，然后自己补充一些。
        其实，还有一个很直接的方法，就比如在Haroopad编辑器中，在菜单栏点插入，就会有相应的语法出来了！！

几款Markdown编辑器

Typora
我不是很会用，用了一下就卸载了，感觉就像word一样，直接写代码不生效，初学还是用代码写好，所以就换了另一款。
Haroopad
现在就是用这个编辑器写的。
其它参考[2]

二、基本格式

2.1 标题

1) 1、2级标题

在标题下加-和=分别表示一级和二级标题

一级标题
========
二级标题
--------

标题效果就不显示了。

2) 六级标题表示

可以用在标题前加#，#的个数表示标题等级

#一级标题
##二级标题
###三级标题
####四级标题
#####五级标题
######六级标题

标题效果就不显示了，影响目录。

2.2 段落格式

1) 段落

Markdown 段落没有特殊的格式，直接编写文字就好，段落的换行是使用两个以上空格加上回车。

第一段（空格 空格 回车）
（空格 空格 回车）空一段
第二段

效果
第一段

第二段

2) 字体

*斜体文本*
_斜体文本_
**粗体文本**
__粗体文本__
***粗斜体文本***
___粗斜体文本___

效果
斜体文本
斜体文本
粗体文本
粗体文本
粗斜体文本
粗斜体文本

3) 分隔线

你可以在一行中用三个以上的星号、减号、底线来建立一个分隔线，行内不能有其他东西。你也可以在星号或是减号中间插入空格。下面每种写法都可以建立分隔线：

***

* * *

*****

- - -

----------

效果

4) 删除线

如果段落上的文字要添加删除线，只需要在文字的两后都加上两个波浪线~~即可，实例如下：

RUNOOB.COM
GOOGLE.COM
~~BAIDU.COM~~

效果：
RUNOOB.COM
GOOGLE.COM
~~BAIDU.COM~~

5) 下划线

下划线可以通过 HTML 的  标签来实现：

<u>带下划线文本</u>

效果：
带下划线文本

6) 脚注

脚注是对文本的补充说明。
Markdown 脚注的格式如下:

[^要注明的文本]

以下实例演示了脚注的用法

创建脚注格式类似这样 [^RUNOOB]。
[^RUNOOB]: 菜鸟教程 -- 学的不仅是技术，更是梦想！！！

效果：（好像没什么用，是版本问题吗？Haroopad好像不能显示，但是在CSDN中可以看到文章最后有显示的。）
创建脚注格式类似这样 ¹。

7) 中文空格

中文不好加入空格，那就加入空格分隔符 ，更多的参考：

插入一个空格 (non-breaking space)
  或   或  
插入两个空格 (en space)
&ensp; 或   或  
插入四个空格 (em space)
&emsp; 或   或  
插入细空格 (thin space)
  或   或

2.3 列表

1) 无序列表

Markdown 支持有序列表和无序列表。
无序列表使用星号*、加号+或是减号-作为列表标记，符号后面还要加一个空格：

* 第一项
* 第二项
* 第三项
+ 第一项
+ 第二项
+ 第三项
- 第一项
- 第二项
- 第三项

效果：

第一项
第二项
第三项

第一项
第二项
第三项

第一项
第二项
第三项

2) 有序列表

有序列表使用数字并加上 . 号来表示，如：

1. 第一项
2. 第二项
3. 第三项

效果

第一项
第二项
第三项

3) 列表嵌套

列表嵌套只需在子列表中的选项添加四个空格即可：

1. 第一项：
    - 第一项嵌套的第一个元素
    - 第一项嵌套的第二个元素
2. 第二项：
    - 第二项嵌套的第一个元素
    - 第二项嵌套的第二个元素

效果：

第一项：
- 第一项嵌套的第一个元素
- 第一项嵌套的第二个元素
第二项：
- 第二项嵌套的第一个元素
- 第二项嵌套的第二个元素

2.4 区块

1) 一般的使用

Markdown 区块引用是在段落开头使用 > 符号，然后后面紧跟一个空格符号。

> 区块引用
> 菜鸟教程
> 学的不仅是技术更是梦想

区块引用
菜鸟教程
学的不仅是技术更是梦想

2) 区块分块

另外区块是可以嵌套的，一个 > 符号是最外层，两个 > 符号是第一层嵌套，以此类推：

> 最外层
> > 第一层嵌套
> > > 第二层嵌套

最外层

第一层嵌套

第二层嵌套

3) 区块中使用列表

> 区块中使用列表
> 1. 第一项
> 2. 第二项
> + 第一项
> + 第二项
> + 第三项

效果：

区块中使用列表

第一项

第二项

第一项

第二项

第三项

4) 列表中使用区块

如果要在列表项目内放进区块，那么就需要在 > 前添加四个空格的缩进。
区块中使用列表实例如下：

* 第一项
    > 菜鸟教程
    > 学的不仅是技术更是梦想
* 第二项

效果：

第一项

菜鸟教程
学的不仅是技术更是梦想
第二项

2.4 插入代码

1) 行内代码

如果是段落上的一个函数或片段的代码可以用反引号把它包起来 `，例如：

`printf()` 函数

效果：
printf() 函数

Tips: 如何把 `加入代码中？

空格 空格 `
不过这个方法在显示上好像没有问题，但是在代码框中就好像有点问题了。

2) 插入代码块1

代码区块使用 4 个空格或者一个制表符（Tab 键）。
实例如下：
Hellow world!!!
Display codes block.

效果好像不行

3) 插入代码块2

你也可以用 ` ````包裹一段代码，并指定一种语言（也可以不指定）：

```javascript
$(document).ready(function () {
    alert('RUNOOB');
});
```<!--怎么在代码块显示这三个点？-->

2.5 插入链接

1) 普通链接

链接名称](链接地址)
或者
<链接地址>
例：
这是一个链接 [菜鸟教程](https://www.runoob.com)

效果：
这是一个链接菜鸟教程
直接使用链接地址：

<https://www.runoob.com>

效果
https://www.runoob.com

2) 高级链接

我们可以通过变量来设置一个链接，变量赋值在文档末尾进行：

这个链接用 1 作为网址变量 [Google][1]
这个链接用 runoob 作为网址变量 [Runoob][runoob]
然后在文档的结尾为变量赋值（网址）

  [1]: http://www.google.com/
  [runoob]: http://www.runoob.com/

效果：
这个链接用 1 作为网址变量 Google
这个链接用 runoob 作为网址变量 Runoob
然后在文档的结尾为变量赋值（网址）

3) 页内跳转

实现在文件中跳转

目的：
<span id='ID_Name'>跳转到这</span>
起点：
[从这跳转](#ID_Name)

效果：
目的：
跳转到这
起点：
从这跳转

2.6 插入图片

Markdown 图片语法格式如下：

![alt 属性文本](图片地址)
![alt 属性文本](图片地址 "可选标题")

开头一个感叹号 !
接着一个方括号，里面放上图片的替代文字
接着一个普通括号，里面放上图片的网址，最后还可* 以用引号包住并加上选择性的 ‘title’ 属性的文字。
地址也可以用本地的，直接从地址栏复制就行。

使用实例：

![RUNOOB 图标](http://static.runoob.com/images/runoob-logo.png)

![RUNOOB 图标](http://static.runoob.com/images/runoob-logo.png "RUNOOB")

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bIviC76X-1589624657634)(http://static.runoob.com/images/runoob-logo.png “RUNOOB”)]

当然，你也可以像网址那样对图片网址使用变量:

这个链接用 1 作为网址变量 [RUNOOB][1].
然后在文档的结尾为变量赋值（网址）

[1]: http://static.runoob.com/images/runoob-logo.png

Markdown 还没有办法指定图片的高度与宽度，如果你需要的话，你可以使用普通的 <img> 标签。

<img src="http://static.runoob.com/images/runoob-logo.png" width="50%">

效果：

2.6 插入表格

表格语法

Markdown 制作表格使用 | 来分隔不同的单元格，使用 - 来分隔表头和其他行。
语法格式如下：

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

效果：(为什么Haroopad中不显示？前后空一行可以解决！)

表头	表头
单元格	单元格
单元格	单元格

对齐方式
我们可以设置表格的对齐方式：

-: 设置内容和标题栏居右对齐。
:- 设置内容和标题栏居左对齐。
:-: 设置内容和标题栏居中对齐。

实例如下：

| 左对齐 | 右对齐 | 居中对齐 |
| :-----| ----: | :----: |
| 单元格 | 单元格 | 单元格 |
| 单元格 | 单元格 | 单元格 |

效果：

左对齐	右对齐	居中对齐
单元格	单元格	单元格
单元格	单元格	单元格

三、高级技巧

3.1 支持的HTML元素

Markdown是内嵌HTML的，通过HTML的语法，我们可以设置字体大小、颜色等等。
不在 Markdown 涵盖范围之内的标签，都可以直接在文档里面用 HTML 撰写。

目前支持的 HTML 元素有：<kbd>       等，如：

使用 <kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>Del</kbd> 重启电脑

效果：
使用 Ctrl+Alt+Del 重启电脑

3.1.1 字体类型、大小、颜色

<font face="黑体">我是黑体字</font>
<font face="微软雅黑">我是微软雅黑</font>
<font face="STCAIYUN">我是华文彩云</font>
<font color=red>我是红色</font>
<font color=#008000>我是绿色</font>
<font color=Blue>我是蓝色</font>
<font size=5>我是尺寸</font>
<font face="黑体" color=green size=5>我是黑体，绿色，尺寸为5</font>

效果：
我是黑体字
我是微软雅黑
我是华文彩云
我是红色
我是绿色
我是蓝色
我是尺寸
我是黑体，绿色，尺寸为5

3.1.2 为文字添加背景色

由于 style 标签和标签的 style 属性不被支持，所以这里只能是借助 table, tr, td 等表格标签的 bgcolor 属性来实现背景色。故这里对于文字背景色的设置，只是将那一整行看作一个表格，更改了那个格子的背景色（bgcolor）

<table><tr><td bgcolor=yellow>背景色yellow</td></tr></table>

效果：

背景色yellow

设置图片百分比

<img src="http://pic11.photophoto.cn/20090626/0036036341009653_b.jpg" width="50%" height="50%">

设置图片大小

<img src="http://pic11.photophoto.cn/20090626/0036036341009653_b.jpg" width="251" height="350" >

设置图片位置

<div align=right><img src="http://pic11.photophoto.cn/20090626/0036036341009653_b.jpg" width="50%" height="50%"></div>

更多的：center, left, left

3.2 转义

Markdown 使用了很多特殊符号来表示特定的意义，如果需要显示特定的符号则需要使用转义字符，Markdown 使用反斜杠转义特殊字符：

**文本加粗** 
\*\* 正常显示星号 \*\*

效果：
文本加粗
** 正常显示星号 **

Markdown 支持以下这些符号前面加上反斜杠来帮助插入普通的符号：

\   反斜线
`   反引号
*   星号
_   下划线
{}  花括号
[]  方括号
()  小括号
#   井字号
+   加号
-   减号
.   英文句点
!   感叹号

3.3 公式

当你需要在编辑器中插入数学公式时，可以使用两个美元符 $$ 包裹 TeX 或 LaTeX 格式的数学公式来实现。提交后，问答和文章页会根据需要加载 Mathjax 对数学公式进行渲染。如：

这个需要了解Latex语法。

$$
\mathbf{V}_1 \times \mathbf{V}_2 =  \begin{vmatrix} 
\mathbf{i} & \mathbf{j} & \mathbf{k} \\
\frac{\partial X}{\partial u} &  \frac{\partial Y}{\partial u} & 0 \\
\frac{\partial X}{\partial v} &  \frac{\partial Y}{\partial v} & 0 \\
\end{vmatrix}
${$tep1}{\style{visibility:hidden}{(x+1)(x+1)}}
$$

效果：
$KaTeX parse error: Can't use function '$' in math mode at position 249: … \end{vmatrix} $̲{$tep1}{\style{…$

3.4 插入目录

插入目录只要在想插入的地方加入[TOC]即可：

文章目录

**Markdown学习笔记**

***参考文献***

**一、Markdown简介**

几款Markdown编辑器

**二、基本格式**

2.1 标题

2.2 段落格式

2.3 列表

2.4 区块

2.4 插入代码

1) 行内代码

Tips: 如何把` ` `加入代码中？

2.5 插入链接

表格语法

三、高级技巧

3.1 支持的HTML元素

四、框图

五、Markdown转PDF

5.1 使用pandoc转换

3.5 小技巧，解决代码不编译

我发现在Haroopad上写的时候，比如插入表格，需要在前面空一行表格才会显示出来，还有其它一些问题也是可以在前面空一行解决的，还比如列表会连续，空一行就可以断开了。
在CSDN上，标题后比如##要加入一个空格才行，否则不显示，可能还有其它一些小问题了。
这些问题的出现可能是不同的编译器上的小差别造成的，不过写代码需要规范，规范了一般不会有什么问题的。

四、框图

更多的应该参考mermaid的语法，当然一般的使用下面说的应该也够了
mermaid官网

4.1 横向流程图

```mermaid
graph LR
A[方形] -->B(圆角)
    B --> C{条件a}
    C -->|a=1| D[结果1]
    C -->|a=2| E[结果2]
    F[横向流程图]

***注意：***需要把` ````也输入才能写表格，这里并不是markdown的代码注释了。

效果：

4.2 竖向流程图

```mermaid
graph TD
A[方形] --> B(圆角)
    B --> C{条件a}
    C --> |a=1| D[结果1]
    C --> |a=2| E[结果2]
    F[竖向流程图]

效果：

4.3 标准流程图

```mermaid
flowchat
st=>start: 开始框
op=>operation: 处理框
cond=>condition: 判断框(是或否?)
sub1=>subroutine: 子流程
io=>inputoutput: 输入输出框
e=>end: 结束框
st->op->cond
cond(yes)->io->e
cond(no)->sub1(right)->op

效果：(好像没有效果？可能是Haroopad不支持吧？)

4.4 标准流程图源码格式（横向）

```mermaid
flowchat
st=>start: 开始框
op=>operation: 处理框
cond=>condition: 判断框(是或否?)
sub1=>subroutine: 子流程
io=>inputoutput: 输入输出框
e=>end: 结束框
st(right)->op(right)->cond
cond(yes)->io(bottom)->e
cond(no)->sub1(right)->op

效果：

4.5 UML时序图源码样例

```mermaid
sequenceDiagram
对象A->>对象B: 对象B你好吗?（请求）
Note right of 对象B: 对象B的描述
Note left of 对象A: 对象A的描述(提示)
对象B-->>对象A: 我很好(响应)
对象A->>对象B: 你真的好吗？

效果：

4.6 UML时序图源码复杂样例

```mermaid
sequenceDiagram
Title: 标题：复杂使用
对象A->>对象B: 对象B你好吗?（请求）
Note right of 对象B: 对象B的描述
Note left of 对象A: 对象A的描述(提示)
对象B-->>对象A: 我很好(响应)
对象B->>小三: 你好吗
小三-->>对象A: 对象B找我了
对象A->>对象B: 你真的好吗？
Note over 小三,对象B: 我们是朋友
participant C
Note right of C: 没人陪我玩

效果：

4.7 UML标准时序图样例

```mermaid
%% 时序图例子,-> 直线，-->虚线，->>实线箭头
  sequenceDiagram
    participant 张三
    participant 李四
    张三->王五: 王五你好吗？
    loop 健康检查
        王五->王五: 与疾病战斗
    end
    Note right of 王五: 合理 食物 <br/>看医生...
    李四-->>张三: 很好!
    王五->李四: 你怎么样?
    李四-->王五: 很好!

效果：

4.8 甘特图样例

```mermaid
%% 语法示例
        gantt
        dateFormat  YYYY-MM-DD
        title 软件开发甘特图
        section 设计
        需求                      :done,    des1, 2014-01-06,2014-01-08
        原型                      :active,  des2, 2014-01-09, 3d
        UI设计                     :         des3, after des2, 5d
    未来任务                     :         des4, after des3, 5d
        section 开发
        学习准备理解需求                      :crit, done, 2014-01-06,24h
        设计框架                             :crit, done, after des2, 2d
        开发                                 :crit, active, 3d
        未来任务                              :crit, 5d
        耍                                   :2d
        section 测试
        功能测试                              :active, a1, after des3, 3d
        压力测试                               :after a1  , 20h
        测试报告                               : 48h

效果：

%% 语法示例
        gantt
        dateFormat  YYYY-MM-DD
        title 软件开发甘特图
        section 设计
        需求                      :done,    des1, 2014-01-06,2014-01-08
        原型                      :active,  des2, 2014-01-09, 3d
        UI设计                     :         des3, after des2, 5d
    未来任务                     :         des4, after des3, 5d
        section 开发
        学习准备理解需求                      :crit, done, 2014-01-06,24h
        设计框架                             :crit, done, after des2, 2d
        开发                                 :crit, active, 3d
        未来任务                              :crit, 5d
        耍                                   :2d
        section 测试
        功能测试                              :active, a1, after des3, 3d
        压力测试                               :after a1  , 20h
        测试报告                               : 48h

五、Markdown转PDF

安装Latex
想要更好的PDF体验，还是老实学习Latex吧！

5.1 使用pandoc转换

5.1.1 下载与安装pandoc

网上的人推荐用pandoc，不过好像要结合Latex，上面给出了Latex的安装方法！
pandoc简介：Pandoc 是一个用 haskell 编写的开源文本转换工具，小巧迅速且支持格式广泛，堪称文本转换应用的瑞士军刀。支持很多种输入输出，有关 Pandoc 可以在其官网进行详细了解。下载页面可以点此进入，在其中选择合适的版本即可（GitHub 下载不多赘述）。
参考1
参考2
参考3

首先我们打开pandoc的官方网站，然后点击Installing，下载即可，或者点击Releases，到github上下载，这是一个开源的项目，放心使用吧！

我选择了x64的下载，他提供了一个zip包和一个msi包，都下了，msi可以安装的，但是zip提供了exe文件，不会用，zip里会有说明，没细看了。那就下载msi文件安装吧，双击运行安装即可！

5.1.2 Getting started

下载好后参照pandoc管网的Getting started来操作吧，也可以看pandoc帮助手册，还有指令demos。

按官网说转pdf需要安装Latex，他指定的是MiKTeX，不过我已经安装了TeXlive了，不安装那么多了，所以看看有没有其它方法吧。

安装好后打开cmd或者PowerShell，输入：

pandoc --version

可以查到版本号就说明安装成功了！
2. 更改当前目录
在powershell中输入pwd可以查看当前目录，dir可以查看当前目录下的文件，cd可以转换目录，可以打开需要转换的文件所在目录，直接转换过去，比如：

cd your_directory
Example: 
cd D:\Software_Study\Markdown\Latex安装与配置

输入cd ..可以跳转到上一个目录，等等。
3. 转换命令
如果只是英文的，所说可以用：

pandoc input.md -o output.pdf

但是，有中文不行，需要latex，但是我试了几种方法都不行，但是关键都是latex，所以先学latex吧！

5.2 使用Haroopad的打印功能

这个很简单，但是出来的pdf文件的链接没有了，字也不能复制。
如果想格式可调一点的话，那就先导出HTML，再用浏览器打开，打印成pdf，不过还是一样会丢失链接。

不过转成pdf都面临一个排版的问题，有时候不尽人意。

5.3 使用markdownpad2转换

markdownpad2带有转为pdf的功能，所以是一个不错的选择，但是收费！！！

到官网上下载就可以了，下载后直接安装，不过好像又要安装一个visual c++什么的，我没安装成功，看看再说吧。

5.3.1 注册

安装好后，会弹出注册的框，填入以下信息即可注册成功。如果没有弹出，可以这么做：

不过我遇到点问题，输入注册信息后还是不行，提示html错误什么的，结果重新打开一下软件又可以了，不知道为什么。
以下提供一个可用的license：

Email address :
 [email protected]

License key : 
GBPduHjWfJU1mZqcPM3BikjYKF6xKhlKIys3i1MU2eJHqWGImDHzWdD6xhMNLGVpbP2M5SN6bnxn2kSE8qHqNY5QaaRxmO3YSMHxlv2EYpjdwLcPwfeTG7kUdnhKE0vVy4RidP6Y2wZ0q74f47fzsZo45JE2hfQBFi2O9Jldjp1mW8HUpTtLA2a5/sQytXJUQl/QKO0jUQY4pa5CCx20sV1ClOTZtAGngSOJtIOFXK599sBr5aIEFyH0K7H4BoNMiiDMnxt1rD8Vb/ikJdhGMMQr0R4B+L3nWU97eaVPTRKfWGDE8/eAgKzpGwrQQoDh+nzX1xoVQ8NAuH+s4UcSeQ==

激活后，随便打开一个markdown文件，但是无法显示预览，需要下载一个跟html有关的文件，Awesomium，下载安装好后，重启电脑就可以使用了。

如果使用注册机，只需要随便给一下邮箱地址就可以生成license key了！

5.3.2 转换pdf

在markdownpad2中写好文章后，点击file->export，导出到PDF文件就可以了，文字可以复制，链接能保留，但是排版不是很理想，而且表格好像也无法显示，等等一些问题，以后想到解决办法再补充吧。

菜鸟教程 – 学的不仅是技术，更是梦想！！！ ↩︎

学习Markdown的笔记

文章目录

Markdown学习笔记

参考文献

一、Markdown简介

几款Markdown编辑器

二、基本格式

2.1 标题

1) 1、2级标题

2) 六级标题表示

2.2 段落格式

1) 段落

2) 字体

3) 分隔线

4) 删除线

5) 下划线

6) 脚注

7) 中文空格

2.3 列表

1) 无序列表

2) 有序列表

3) 列表嵌套

2.4 区块

1) 一般的使用

2) 区块分块

3) 区块中使用列表

4) 列表中使用区块

2.4 插入代码

1) 行内代码

Tips: 如何把 `加入代码中？

2) 插入代码块1

3) 插入代码块2

2.5 插入链接

1) 普通链接

2) 高级链接

3) 页内跳转

2.6 插入图片

2.6 插入表格

表格语法

三、高级技巧

3.1 支持的HTML元素

3.1.1 字体类型、大小、颜色

3.1.2 为文字添加背景色

3.2 转义

3.3 公式

3.4 插入目录

文章目录

3.5 小技巧，解决代码不编译

四、框图

4.1 横向流程图

4.2 竖向流程图

4.3 标准流程图

4.4 标准流程图源码格式（横向）

4.5 UML时序图源码样例

4.6 UML时序图源码复杂样例

4.7 UML标准时序图样例

4.8 甘特图样例

五、Markdown转PDF

5.1 使用pandoc转换

5.1.1 下载与安装pandoc

5.1.2 Getting started

5.2 使用Haroopad的打印功能

5.3 使用markdownpad2转换

5.3.1 注册

5.3.2 转换pdf