markdown终极教程

Author : zbzhen, Last modification time : Tue Aug 15 17:57:02 2023

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

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

下面的内容都是个人经验

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

1. markdown教程案例

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

1.1. 标题

要注意空格与空行, 例如

题目
===

小标题
---

# 一级标题

## 二级标题

### 三级标题 {#id33}

[跳转到标题](#id33)

跳转到标题

1.2. 列表

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

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

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

1.3. 复选框

复选框 - [x] 复选框
复选框 - [] 复选框

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

加粗 **加粗**
用Esc键下面的~键可得到阴影菌, 例如
```
`阴影菌`
```
Esc上面加个凸出方框<kbd>Esc</kbd>
链接 [链接](https://kz16.top/)
鼠标悬浮在链接上
[鼠标悬浮在链接上](https://kz16.top/ "链接解释")
书签目录 [TOC]
注释

1.5. 代码块

加入代码块, 这里以Python代码为例(也可用三个波浪线, 只需把三个`都替换成~):

```python
print("hello")
print("python")
```

print("hello")
print("python")

显示行号

```python{.line-numbers}
print("hello")
print("python")
```

print("hello")
print("python")

1.6. 表格

表格找它就对了 https://kz16.top/ckeditor/

|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
1	4	6

1.7. 公式

公式找它就对了 https://kz16.top/latex/symbol/

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

$\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. 图片

插入图片的方法一
![](https://kz16.top/circle.svg)
![](https://kz16.top/circle.svg) "图片解释"
插入图片的方法二(该方法同样适用于链接)
```
![][f]

[f]:https://kz16.top/circle.svg
```
插入图片的方法三
<img src="https://kz16.top/circle.svg" width="50">
上面三种方法都可以得到下面的动图, 要想插入本地图, 可以把图片转为Base64代码, 推荐在线转换 https://kz16.top/png2base64.html
链接和图片的区别其实只差一个感叹号

1.9. 段落

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

第二段与第一段要空行

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

第二段与第一段要空行

1.10. 字体格式

^上标 _下标
😄 😂 ⛺️ ❤️
斜体文本1 斜体文本2
粗体文本1 粗体文本2
粗斜体文本1 粗斜体文本2
下划线文本 ~~删除线文本~~
变为红色
高亮显示

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

1.11. 区块

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

最外层
最外层

第一层

第二层

1.12. 尾注

尾注^[1]
尾注^[2]

- 尾注^[我是尾注菌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=\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插入图片比较好的一种方案

别用图床, 不安全
别用图床, 不安全
别用图床, 不安全
先用这个网站 https://kz16.top/png2base64.html 把图片转成base64代码, 然后插入base64代码这样既可以插入图片又可以保证安全. 但是会带来新问题, base64代码太长怎么办?
base64代码太长可用折叠方案, 例如VScode可以用标签与
想简单省事, 直接用vscode中的Paste Image插件, 截图之后, Ctrl+Alt+V快速插入图片
或者用marktext编辑器就不存在图片代码过长的问题

2.2. markdown伴侣工具

富文本编辑器ckeditor: https://kz16.top/ckeditor/ 支持从word中粘贴带格式的文本和表格, 然后导入到markdown中, 一定要试试
无广告表格: https://mengshukeji.gitee.io/luckyexceldemo/ 配合 ckeditor有奇效
有广告但好用的在线表格: https://www.tablesgenerator.com/
在线图片转base64代码 https://kz16.top/png2base64.html, 从根源上解决markdown插图问题.
mdnice: https://mdnice.com/ 可以把公式转化为svg, 因此用来写邮件和公众号很不错, 要注意部分邮件可能不支持svg图片.
常用latex公式 https://kz16.top/latex/symbol/
mathpix: 在线也有一个markdown, 它的优势有两个, 一个是可以很方便支持同步编写, 另外一个可以识别数学公式.
在线表格: https://www.tablesgenerator.com/, 虽然有广告, 但是很强大
思维导图 https://app.diagrams.net/
数学绘图
官网网站https://www.geogebra.org/
中文镜像https://ggb123.cn/
推荐好用https://geogebra.kz16.top/ggbppt.html
矢图编辑 https://inkscape.org/

3. 那些年用过的markdown

3.1. 用的第一款markdown

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

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

3.1.1. 案例

一开始选择它最关键的原因是, 它可以很方便与GeoGebra结合, 生成含有可交互动态图的html文件, 详见视频 . 具体内容见 https://geogebra.kz16.top/ 该页面里的不少链接里的内容是用stackedit写好的
后面发现用它写笔记也不错, 笔记链接
再后面用它写了一些计算数学相关经验 https://na.kz16.top/, 这个链接里的大部分内容是一天内完成的

3.1.2. 优点

无需安装, 打开浏览器就可用, 很方便做笔记, 特别是网上找资料做笔记, 用它准错不了
进入界面就是一个很好的教程样例, 无需经验, 打开链接就会写
强大的同步功能, 用它同步文档到github或gitlab很方便
导出的html书签模板很不错, 很方便电脑查看
可以很方便自定义输出模板
自动保存

3.1.3. 缺点

浏览器中不能很好地和本地建立同步,因此有安全隐患, 清除浏览器记录可能导致所有笔记被删除
没有代码折叠

3.2. 用的第二款markdown

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

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

Markdown Preview Enhanced (必备)
Markdown All in one
Markdown Editor
Markdown TOC
Excel to Markdown
Paste Image
vscode-pandoc
file-tree-generator
File Utils
File icons
Draw Note
open in browser

3.2.1. 优点

写公式相当方便, 因为有提示, 并且非常智能, 体验感很强
速度很快, 没出现过卡顿现象
支持[toc]添加书签, 并且支持给大小标题自动加序号
同步渲染, 定位精准

很方便自定义样式, 快捷键Ctrl+Shift+P打开命令面板, 输入Customize CSS, 然后打开style.less就可以自定义样式, 例如个人设置为

.markdown-preview{
body {
margin: 0
}

article,aside,footer,header,nav,section {
display: block
}

h1 {
    font-size: 1.4em;
}

h2 {
    font-size: 1.2em;
}

h3 {
    font-size: 1.1em;
}

h1,h2,h3,h4,h5,h6 {
margin: .5em 0;
line-height: 1.5
}

hr {
color:#e1e4e8;
background-color: #e1e4e8;
}

h1:after,h2:after {
content: "";
display: block;
position: relative;
top: .13em;
border-bottom: 1px solid hsla(0,0%,20%,.33)
}

ol ol,ol ul,ul ol,ul ul,ol li,ul li {
margin: 1em 0;
line-height:1.5
}
}

vscode的markdown-preview-enhanced主要配置代码, 更多可参考 https://kz16.top/tex/#23-vscode相关配置

  "markdown-preview-enhanced.enableExtendedTableSyntax": true,
  "markdown-preview-enhanced.mathRenderingOption": "KaTeX",
  "markdown-preview-enhanced.enableScriptExecution": true,
  "markdown-preview-enhanced.enableHTML5Embed": true,
  "markdown-preview-enhanced.mathBlockDelimiters": [
    [
      "$$",
      "$$"
    ],
    [
      "\\[",
      "\\]"
    ],
    [
      "\\begin{equation}",
      "\\end{equation}"
    ],
    [
      "\\begin{equation*}",
      "\\end{equation*}"
    ],
  ],

轻松与github同步

3.3. 其它的一些markdown

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

marktext: 这款软件很不错, 插入图片方便, 可以修改图片大小, 据说和typora差不多(typora不开源不曾用过). 导出的html文件样式很方便手机查看
Notable: 用它分享文档不错, 直接得到链接
joplin
zettrl
boost

3.4. 小结

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

4. 奇技

4.1. markdown批量转html

只需两步: 安装node, 执行脚本node mume.js

node安装包地址: https://nodejs.org/zh-cn/download/

可以运行node -v查看是否安装成功, 然后换源, 并安装mume, 命令依次为

npm install -g cnpm --registry=https://registry.npmmirror.com
cnpm install -g @shd101wyy/mume

点我下载mume.js

4.2. markdown转doc

具体参考: https://kz16.top/dn/#23-不同格式文本互换-pandoc

4.3. 为什么选择vscode为主要编辑器

具体可参考 vscode是最理想的markdown编辑器吗?

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

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

我是尾注菌1 ↩︎
我是尾注菌2 ↩︎