markdown终极教程
===
**请一定要看** [使用必读](%E4%BD%BF%E7%94%A8%E5%BF%85%E8%AF%BB.html)
用markdown写笔记付费是不可能付费的
想白漂那就选开源跨平台的软件
- 运行run.bat, 会开启本地 https://localhost 服务, 访问ggb可以点 [https://localhost/ggb自动保存在浏览器.html](https://localhost/ggb自动保存在浏览器.html), 注意自动保存在浏览器其实是有安全隐患的, 清除浏览器缓存后, 就没了, 而且换电脑也不行, 所有最好是导出离线html文件
- 运行mume会把所有的md转换为html文件
- (**推荐**)运行py脚本或者md2html.exe会把md转化为html文件, 并且得到搜索页面和相对路径, 要求是
- md文件必须要添加标题, 否则报错
- 搜索文件只能搜索标题的内容, 含小标题
- 如果没有同步搜索(或者出现一些奇怪错误), 可以再运行一次py文件
- (**推荐**)用vscode以及插件 `CharlesWan.markdown-toc`, 以便增加或剔除标签的数字
- [点我, 查看在md文档中插入可以交互的GeoGebra](./md_ggb/ggb.html)
# 1. markdown教程案例
这里的案例以`VScode(与插件Markdown Preview Enhanced)`为标准
更多可参考: https://shd101wyy.github.io/markdown-preview-enhanced/#/zh-cn/
小技巧: 用分隔符`` 可直接把md变成ppt
## 1.1. 标题 {#biaoti}
要注意空格与空行, 例如
```
题目
===
小标题
---
# 一级标题
## 二级标题
### 三级标题 {#id33}
[跳转到标题](#id33)
```
[跳转到标题](#biaoti)
## 1.2. 列表
可以用`-` `*` `+`三种任意一种, 要注意空格
- 第1节
- 第1.1节
- 第1.2节
- 第2节
```
- 第1节
- 第1.1节
- 第1.2节
- 第2节
```
## 1.3. 复选框
- [x] 复选框 `- [x] 复选框`
- [ ] 复选框 `- [] 复选框`
## 1.4. 加粗_阴影_链接_书签_注释
- **加粗** `**加粗**`
- 用Esc键下面的~键可得到`阴影菌`, 例如
```
`阴影菌`
```
- Esc上面加个凸出方框`Esc`
- [链接](https://kz16.top/) `[链接](https://kz16.top/)`
- [鼠标悬浮在链接上](https://kz16.top/ "链接解释")
`[鼠标悬浮在链接上](https://kz16.top/ "链接解释") `
- 书签目录 `[TOC]`
- 注释 ``
## 1.5. 代码块
- 加入代码块, 这里以Python代码为例(也可用三个波浪线, 只需把三个`都替换成~):
~~~
```python
print("hello")
print("python")
```
~~~
```python
print("hello")
print("python")
```
显示行号
~~~
```python{.line-numbers}
print("hello")
print("python")
```
~~~
```python{.line-numbers}
print("hello")
print("python")
```
## 1.6. 表格
- 表格找它就对了 [https://kz16.top/ckeditor/](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|
^|4|6
## 1.7. 公式
- 公式找它就对了 [https://kz16.top/latex/symbol/](https://kz16.top/latex/symbol/)
已知$|x|+|y|=0$, 则
$$\tag{2}
x=y=0
$$
引用公式[(2)](#eq2)的结果
```
已知$|x|+|y|=0$, 则
$$\tag{2}
x=y=0
$$
引用公式[(2)](#eq2)的结果
```
**注:** markdown做公式标签略微麻烦, `
`标签为了瞄点, 从而让公式的链接生效. 部分md编辑器会自动生成`
`
## 1.8. 图片
1. 插入图片的方法一
``
` "图片解释"`
2. 插入图片的方法二(该方法同样适用于链接)
```
![][f]
[f]:https://kz16.top/circle.svg
```
3. 插入图片的方法三
`
`
4. 上面三种方法都可以得到下面的动图, 要想插入本地图, 可以把图片转为Base64代码, 推荐在线转换 [https://kz16.top/png2base64.html](https://kz16.top/png2base64.html)
5. 链接和图片的区别其实只差一个感叹号
## 1.9. 段落
```
第一段第一行, 行尾空两格
第一段第二行
第二段与第一段要空行
```
第一段第一行, 行尾空两格
第一段第二行
第二段与第一段要空行
## 1.10. 字体格式
^上标^ ~下标~
:smile: :joy: :tent: :heart:
*斜体文本1* _斜体文本2_
**粗体文本1** __粗体文本2__
***粗斜体文本1*** ___粗斜体文本2___
下划线文本 ~~删除线文本~~
变为红色
==高亮显示==
```
^上标^ ~下标~
:smile: :joy: :tent: :heart:
*斜体文本1* _斜体文本2_
**粗体文本1** __粗体文本2__
***粗斜体文本1*** ___粗斜体文本2___
下划线文本 ~~删除线文本~~
变为红色
==高亮显示==
```
## 1.11. 区块
```
> 最外层
> 最外层
> > 第一层
> > > 第二层
```
> 最外层
> 最外层
>
> > 第一层
> >
> > > 第二层
## 1.12. 尾注
- 尾注^[我是尾注菌1]
- 尾注[^尾注菌2]
[^尾注菌2]: 我是尾注菌2
```
- 尾注^[我是尾注菌1]
- 尾注[^尾注菌2]
[^尾注菌2]: 我是尾注菌2
```
## 1.13. 分割线
三个减号 `---`
## 1.14. 打印分页
只需添加下面代码
```html
```
## 1.15. 流程图
参考 [mermaid官方文档](https://github.com/mermaid-js/mermaid/blob/develop/README.zh-CN.md)
```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
```
~~~
```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
标注
``` j
!!! 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}$
上面的例子分别代码为
```js
点我查看折叠内容
- 我是折叠菌内容
- 我是折叠菌内容
---
这种上下局部滚动可以适用于长代码块
第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}$
```
## 1.18. 插入GeoGebra交互动图
参考这里 https://kz16.top/geogebra/ggbmd.html
参考效果 https://kz16.top/geogebra/offiex/xcg.html
## 1.19. 字体样式
推荐结合富文本编辑器使用, 例如: https://kz16.top/ckeditor
我是仿宋字体菌
我是仿宋字体菌
```html
我是仿宋字体菌
我是仿宋字体菌
```
# 2. markdown小技巧
## 2.1. markdown插入图片比较好的一种方案
- 别用图床, 不安全
- 别用图床, 不安全
- 别用图床, 不安全
- 先用这个网站 [https://kz16.top/png2base64.html](https://kz16.top/png2base64.html) 把图片转成base64代码, 然后插入base64代码这样既可以插入图片又可以保证安全. 但是会带来新问题, base64代码太长怎么办?
- base64代码太长可用折叠方案, 例如VScode可以用标签``与``
- 想简单省事, 直接用vscode中的Paste Image插件, 截图之后, Ctrl+Alt+V快速插入图片
- 或者用[marktext](https://github.com/marktext/marktext/releases)编辑器就不存在图片代码过长的问题
## 2.2. markdown伴侣工具
- 富文本编辑器ckeditor: [https://kz16.top/ckeditor/](https://kz16.top/ckeditor/) 支持从word中粘贴带格式的文本和表格, 然后导入到markdown中, 一定要试试
- 无广告表格: https://mengshukeji.gitee.io/luckyexceldemo/ 配合 ckeditor有奇效
- 有广告但好用的在线表格: https://www.tablesgenerator.com/
- 在线图片转base64代码 [https://kz16.top/png2base64.html](https://kz16.top/png2base64.html), 从根源上解决markdown插图问题.
- mdnice: [https://mdnice.com/](https://mdnice.com/) 可以把公式转化为svg, 因此用来写邮件和公众号很不错, 要注意部分邮件可能不支持svg图片.
- 常用latex公式 [https://kz16.top/latex/symbol/](https://kz16.top/latex/symbol/)
- mathpix: 在线也有一个markdown, 它的优势有两个, 一个是可以很方便支持同步编写, 另外一个可以识别数学公式.
- 在线表格: [https://www.tablesgenerator.com/](https://www.tablesgenerator.com/), 虽然有广告, 但是很强大
- 思维导图 [https://app.diagrams.net/](https://app.diagrams.net/)
- 数学绘图
官网网站[https://www.geogebra.org/](https://www.geogebra.org/)
中文镜像[https://ggb123.cn/](https://ggb123.cn/)
推荐好用[https://geogebra.kz16.top/ggbppt.html](https://geogebra.kz16.top/ggbppt.html)
- 矢图编辑 [https://inkscape.org/](https://inkscape.org/)
# 3. 那些年用过的markdown
## 3.1. 用的第一款markdown
stackedit官网: [https://stackedit.io/app#](https://stackedit.io/app#)
### 3.1.1. 优点
- 无需安装, 打开浏览器就可用, 很方便做笔记, 特别是网上找资料做笔记, 用它准错不了
- 进入界面就是一个很好的教程样例, 无需经验, 打开链接就会写
- 强大的同步功能, 用它同步文档到github或gitlab很方便
- 导出的html书签模板很不错, 很方便电脑查看
- 可以很方便自定义输出模板
- 自动保存
### 3.1.2. 缺点
- 浏览器中不能很好地和本地建立同步,因此有安全隐患, 清除浏览器记录可能导致所有笔记被删除
- 没有代码折叠
## 3.2. 用的第二款markdown
VScode: [https://code.visualstudio.com/](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`就可以自定义样式, 例如个人设置为
```j
.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%E7%9B%B8%E5%85%B3%E9%85%8D%E7%BD%AE
```j
"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](https://github.com/marktext/marktext/releases): 这款软件很不错, 插入图片方便, 可以修改图片大小, 据说和typora差不多(typora不开源不曾用过). 导出的html文件样式很方便手机查看
- [Notable](https://github.com/notable/notable/releases): 用它分享文档不错, 直接得到链接
- [joplin](https://github.com/laurent22/joplin)
- [zettrl](https://github.com/Zettlr/Zettlr/releases)
- [boost](https://github.com/BoostIO/Boostnote)
----
本文来源: [http://kz16.top/md](http://kz16.top/md)
欢迎非商用转载, 转载请说明来源