markdown终极教程

Author : zbzhen,        Modified : Mon Dec 4 18:13:45 2023

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

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

下面的内容都是个人经验

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

1. markdown教程案例

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

更多可参考: https://shd101wyy.github.io/markdown-preview-enhanced/#/zh-cn/

小技巧: 用分隔符<!-- slide --> 可直接把md变成ppt

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. 表格

|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
下划线文本 删除线文本
变为
高亮显示

^上标^ ~下标~
:smile:  :joy:  :tent: :heart:
*斜体文本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插入图片比较好的一种方案

  • 别用图床, 不安全

  • 别用图床, 不安全

  • 别用图床, 不安全

  • 先用这个网站 https://kz16.top/png2base64.html 把图片转成base64代码, 然后插入base64代码这样既可以插入图片又可以保证安全. 但是会带来新问题, base64代码太长怎么办?

  • base64代码太长可用折叠方案, 例如VScode可以用标签<!-- #region --><!-- #endregion -->

  • 想简单省事, 直接用vscode中的Paste Image插件, 截图之后, Ctrl+Alt+V快速插入图片

  • 或者用marktext编辑器就不存在图片代码过长的问题

2.2. markdown伴侣工具

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://kz16.top/na, 这个链接里的大部分内容是一天内完成的

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

参考: https://kz16.top/showumd

4.2. markdown转doc

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

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

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


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

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


  1. 我是尾注菌1 ↩︎

  2. 我是尾注菌2 ↩︎