markdown终极教程

用markdown写笔记付费是不可能付费的

想白漂那就选开源跨平台的软件

下面的内容都是个人经验

markdown插入交互动图, 参考这里

1. markdown教程案例

这里的案例以VScode(与插件Markdown Preview Enhanced)为标准

1.1. 标题

要注意空格与空行, 例如

题目
===

小标题
---

# 一级标题

## 二级标题

### 三级标题 {#id33}

[跳转到标题](#id33)

跳转到标题

1.2. 列表

可以用- * +三种任意一种, 要注意空格

- 第1节
	- 第1.1节
	- 第1.2节
- 第2节

1.3. 复选框

1.4. 加粗_阴影_链接_书签_注释

1.5. 代码块

1.6. 表格

|1|22|333|4444|
|:--:|:--|--:|--|
|55555|666666|7|8|
1 22 333 4444
55555 666666 7 8

如果要支持合并单元格, 需要设置

"markdown-preview-enhanced.enableExtendedTableSyntax": true,

a|b|c
-|-|-
1|2|
 ^|4|6
a b c
1 2
4 6

1.7. 公式

已知x+y=0|x|+|y|=0, 则

x=y=0(2)\tag{2} x=y=0

引用公式(2)的结果

已知$|x|+|y|=0$, 则

<p id="eq2">

$$\tag{2}
x=y=0
$$

引用公式[(2)](#eq2)的结果

注: markdown做公式标签略微麻烦, <p>标签为了瞄点, 从而让公式的链接生效. 部分md编辑器会自动生成</p>

1.8. 图片

  1. 插入图片的方法一
    ![](https://kz16.top/circle.svg)
    ![](https://kz16.top/circle.svg) "图片解释"

  2. 插入图片的方法二(该方法同样适用于链接)

    ![][f]
    
    [f]:https://kz16.top/circle.svg
    
  3. 插入图片的方法三
    <img src="https://kz16.top/circle.svg" width="50">

  4. 上面三种方法都可以得到下面的动图, 要想插入本地图, 可以把图片转为Base64代码, 推荐在线转换 https://kz16.top/png2base64.html

  5. 链接和图片的区别其实只差一个感叹号

1.9. 段落

第一段第一行, 行尾空两格  
第一段第二行

第二段与第一段要空行

第一段第一行, 行尾空两格
第一段第二行

第二段与第一段要空行

1.10. 字体格式

斜体文本1 斜体文本2
粗体文本1 粗体文本2
粗斜体文本1 粗斜体文本2
下划线文本 删除线文本
变为
高亮显示

*斜体文本1*   _斜体文本2_ 
**粗体文本1**  __粗体文本2__ 
***粗斜体文本1***  ___粗斜体文本2___
<u>下划线文本</u>  ~~删除线文本~~
变为<font color="red">红</font>色
==高亮显示==

1.11. 区块

> 最外层 
> 最外层 
> > 第一层
> > > 第二层

最外层
最外层

第一层

第二层

1.12. 尾注

- 尾注^[我是尾注菌1] 

- 尾注[^尾注菌2] 

[^尾注菌2]: 我是尾注菌2

1.13. 分割线

三个减号 ---

1.14. 打印分页

只需添加下面代码

<div STYLE="page-break-after: always;"></div>

1.15. 流程图

参考 mermaid官方文档

flowchart LR A[Hard] -->|Text| B(Round) B --> C{Decision} C -->|One| D[Result 1] C -->|Two| E[Result 2]
pie "Dogs" : 386 "Cats" : 85 "Rats" : 15
```mermaid
flowchart LR
A[Hard] -->|Text| B(Round)
B --> C{Decision}
C -->|One| D[Result 1]
C -->|Two| E[Result 2]
```

```mermaid
pie
"Dogs" : 386
"Cats" : 85
"Rats" : 15
```

1.16. 总结警告和标注

Summary

总结

Warning

警告

Note

标注

!!! summary
    总结 

!!! warning
    警告

!!! Note
    标注

1.17. 配合html语言

点我查看折叠内容
  • 我是折叠菌内容
  • 我是折叠菌内容

我是文字滚动菌


这种上下局部滚动可以适用于长代码块
第1行
第2行
第3行
第4行
第5行
第6行
...


这种可以适用于长公式
x=a+b+c+d+e+f+g+a+b+c+d+e+f+g+a+b+c+d+e+f+g+a+b+c+d+e+f+g+a+b+c+d+e+f+g+a+b+c+d+e+f+g+a+b+c+d+e+f+g+a+b+c+d+e+f+g+a+b+c+d+e+f+gx=\sqrt{a+b+c+d+e+f+g+a+b+c+d+e+f+g+a+b+c+d+e+f+g+a+b+c+d+e+f+g+a+b+c+d+e+f+g+a+b+c+d+e+f+g+a+b+c+d+e+f+g+a+b+c+d+e+f+g+a+b+c+d+e+f+g}

上面的例子分别代码为

<details>
<summary>点我查看折叠内容</summary>

- 我是折叠菌内容
- 我是折叠菌内容

</details>

<marquee>我是文字滚动菌</marquee>

---

<div style="height: 80px; overflow-y: scroll;">

这种上下局部滚动可以适用于长代码块 
第1行
第2行
第3行
第4行
第5行
第6...
</div>

---

<div style="display: flex; overflow-x: scroll;">

这种可以适用于长公式
$x=\sqrt{a+b+c+d+e+f+g+a+b+c+d+e+f+g+a+b+c+d+e+f+g+a+b+c+d+e+f+g+a+b+c+d+e+f+g+a+b+c+d+e+f+g+a+b+c+d+e+f+g+a+b+c+d+e+f+g+a+b+c+d+e+f+g}$
</div>

1.18. 插入GeoGebra交互动图

参考这里 https://kz16.top/geogebra/ggbmd.html
参考效果 https://kz16.top/geogebra/offiex/xcg.html

1.19. 字体样式

推荐结合富文本编辑器使用, 例如: https://kz16.top/ckeditor

我是仿宋字体菌

我是仿宋字体菌

<div style="font-family:仿宋">
我是仿宋字体菌
</div>

我是<span style="font-family:仿宋">仿宋<span>字体菌

2. markdown小技巧

2.1. markdown插入图片比较好的一种方案

2.2. markdown伴侣工具

3. 那些年用过的markdown

3.1. 用的第一款markdown

stackedit官网: https://stackedit.io/app#

stackedit个人经验: https://kz16.top/stackedit/

3.1.1. 案例

3.1.2. 优点

3.1.3. 缺点

3.2. 用的第二款markdown

VScode: https://code.visualstudio.com/

直接用的话不太给力, 需要下载一些插件

可以用gethtml.py把导出的html文件转换成含有左侧目录树的样式, 要注意从eBook格式中导出的html文件会得到链接引用的本地绝对路径, 因此如果链接里有相对路径, 就千万别用eBook格式

3.2.1. 优点

3.3. 其它的一些markdown

用得不多, 所以不做过多评价, 但是都在github点了星星, 毕竟开源不容易

3.4. 小结

总之, markdown编辑软件千万别只选一个, 不同的需求用不同的软件. 每款软件都有它优秀的地方, 应该充分利用好它们的优势, 当然要注意下不同软件的兼容问题, 不同编辑器语法会略有不同, 但是大体是兼容的.

本文来源: http://kz16.top/md

欢迎非商用转载, 转载请说明来源


  1. 我是尾注菌1 ↩︎

  2. 我是尾注菌2 ↩︎