type
status
slug
summary
tags
category
password
date
icon
写在前面
在完成组会任务、记笔记、甚至完成实验报告的过程中，经常需要用到markdown语法，同时md做笔记也是十分好看并且高效，因此markdown也备受人们的喜爱。但是我们使用markdown的过程中，经常借助typora，最后导致的结果就是我们并不能称作是真正的理解了markdown的用法，所以下面我们就来探索markdown的本质。
本节大纲内容
- 什么是markdown？其本质是什么？
- markdown的语法概述
- 基于CommonMark的语法标准概述
- markdown常见的扩展语法
- 表格、脚注、任务列表（markdown 侧）
- 数学公式、mermaid 图表（非 markdown 侧）
- 可以使用markdown的实用工具介绍
- 文档编写：vscode mpe 插件、Marktext...
- 网站建设：mkdocs、hexo、reveal-md...
请记住如果你想要学习一门技术，或者是想学习到这项技术的内核，核心点在于你需要去阅读这个技术的官方文档(tutorial)
下面是markdown commonmark的官方文档
然后去push自己去使用这项技术，只有在使用的过程中你才会对这项技术更加熟悉
一、什么是markdown
- 是一种轻量级文本标记语言
- 可以通过纯文本来表示带有格式的文档，同时容易保证文本的可读性
- 语法简单，便于学习，利于使用
- 可以轻松转换为HTML
首先，有一个极大的误区
1.markdown不等于typora
“前面是你这辈子就是被typora害了，后面忘了” —lyqgg
2.markdown不是一种排版语言，其实他的本质上是一种标记语言，是一种对
HTML 的简化
3.markdown只会决定解析出 HTML 是什么，不会决定任何视觉上的形式，相反，所有的视觉效果都是通过HTML + CSS来共同决定的
因此，要想要真正学习到markdown的本质，我的建议是将markdown和对应的视觉效果分离开，这样才能真正的去学会markdown同时各个软件都拥有自己的一套markdown的标准：
- Github GFM的规范：（改自CommonMark）
- Typora的使用规范：
下面我们可以学习使用一些软件来使用markdown
- 裸的 markdown 解析器（如果你熟悉 HTML 语法）
- markdown-it 完美支持CommonMark的解析器
- markdown-it-py
- 所见即所得的 markdown 编辑器
- vscode mpe extension VSC上的一个插件，可以支持实时浏览
- obsidian：开源markdown解释器
- notion（笔者正在使用的也是notion）
- 尽量别去使用typora
二、Markdown 语法概览
- 标题语法
- 井号 # 开头，后面添加内容
- 注意还有一种Setext样式的标题
- 文字下方一行中添加任意多
=和-来完成标题等级的归类
- 注意：井号和标题之间需要间隔一个空格
- 只有1-6级的标题，7级以上就没有了
- 可以使用html来精准的利用h1-h6的tag
- 可以跨过某一级来使用，但是不推荐这种用法
- 段落内的语法
- 直接编写文本就是普通段落
- 段落间通过空行来分隔
- 段落内换行需要在行尾添加两个空格 <br>
- 如果没有两个空格的话，源码会自动将两行内容合并成一行
- 有些软件的规范会认为段落内的换行不需要两个空格
- 使用多个空格可以使用 等 HTML 语法
- 引言
- 一个>后添加一个空格之后然后添加内容
- 内部还可以嵌套多层markdown语法
- 需要一个空行来退出环境
- 软件中一般使用一次enter推出一层嵌套
- 无序列表
- + *之后隔一个空格之后再添加内容- 同一个层级的符号需要保持一致
- 嵌套列表直接缩进一次就即可
- 中间需要空格一行来跳出循环
- 有序列表
- 数字加点 后接空格 再接内容
- 标准的 md 完全无视数字内容，所有有序列表都从 1 开始计数
- 下面我们给出一个例子进行说明：
- 有序列表可以和无序列表互相嵌套
最后的结果当中可以看出，已经是忽略掉了数字中的内容，而默认从1开始
- 分割线
- 使用 * - _ 中的任意一个字符重复至少三次
- 可以采用空格进行间隔，甚至组织成为不同的样式
- 被转换为html中<hr/>
- 分割线上方和下方最好都添加空行
- 注意：分割线的正上方不要有文字，避免成为settext的标题的形式
- 代码块
- 缩进形式
- 空行添加一个缩进来创建代码块
- 内部会被原样展示
- 使用三个以上的` 或者是 ~围起来来形成代码块
- ` ~后面可以添加语言的名称
- 加text/不加 代码块不会被高亮展示
- 产生的效果如下：
显然我们会更加倾向于使用```一点，因为可以高亮表示
- 行内标记
- 格式见下面，其中 * 和 _ 等效
- 但是更倾向于使用*，_打中文不太方便
- 下划线没有专门的markdown语法，因此可以采用html中的<u> tag来进行实现
- 行内标记之间都可以互相进行嵌套
- 最好在标记左右都加上空格
- 注意：尤其是你使用notion写代码块的时候，左右两边的空格是强制的
- 文字中如果需要使用*建议加上\进行转义
使用效果
- 插入图片
- 感叹号 - 方括号 - 圆括号结合的形式
- 图片描述的部分可以进行省略
- 位置可以是链接，也可以是本地文件的路径
- 常规 md 语法插入图片无法调大小，使用 html img 的 style 可以调节
- 软件一般可以帮你保存图片到某一目录
- 记住图片不会嵌入 md 文件中，要交给别人 md 文件的话请附带上所有素材文件
- 当时笔者做sqtp的时候深受其害
左右就是输入的代码块和相应的原理图
- 插入链接
- 方括号 - 圆括号的组合形式
- 文字是要展示的内容，链接附在其后面
- 链接左右加 <> 自动链接
- 可以嵌套链接
<>会自动链接
- 内联HTML语法
- markdown 中一般可以直接使用 html 语法和 css 样式
- GitHub（GFM）仅支持少量 html，且不支持 css 样式
- 文本中使用 <tag> 这样的字样需要用 \ 转义
- 解析器会原封不动的保留 html 内容
三、常用的markdown扩展语法
- 表格
- 推荐使用这个在线的markdown表格生成器，可以帮助你根据要求，生成对应的latex，html，markdown，text的代码：
- 仅可以处理简单表格，复杂的用 html 插入
- 每个单元格的内容使用|分开
- 第二行一定要有，规范整列的行列规范形式
- |—|,|:—|表示左对齐
- |:—:| 表示中对齐
- ｜—:| 表示右对齐
- 其中-的个数随意
不在markdown的标准中，但是一般都会使用
注意，是在第二行开始输入时看见了表格，但是一定注意不要使用中文的符号，不然会导致出错
- 脚注
- 使用[^脚注名]来插入脚注
- 在文中任意位置添加 `[^脚注名] 定义脚注内容
- 脚注名只是标记、匹配使用的，可以是任何字符串
- 最终的编号一般是由在文中出现的顺序所决定的
- 也就是说正文引用的地方那里出现所需要的脚注
- 任务列表
- 使用 - [ ] 插入未完成的任务
- 使用 - [x] 插入已完成的任务
- 任务列表可以和其它列表混合使用
- 还可以进行嵌套使用
最后markdown的代码表现形式是这样的，如果在preview中点击，系统会自动同步到markdown文件中
- 插入数学公式
- 严格来说这一直都不是 markdown 语法的一部分
- 关于公式处理的一切都不在 markdown->HTML 的过程中
- HTML 保留公式文本，交给mathjex & kateX等 js 库来处理
- 使用规范
- 一般使用一对$来作为行内公式的标记
- 一对$$来作为块级公式来进行标记
- 下面是流程示意图的具体讲解（挺直观的）
- 之后我们会在学习latex的过程中进行进一步的展开,在markdown中就不进行扩展了
- 流程图\时序图\甘特图
- 非常常见，也是非常重要的扩展，同时也不是markdown语法中的一部分
- 现在一般使用mermaid.js来处理，来制图
- 下面的官方文档中的内容极其丰富，可以多加留意下面的用法
- 目前很多编辑器都自带mermaid的支持
- markdown 在这里做的只是将其转为 ”mermaid“ 语言的代码块，然后交给 mermaid.js 来识别并处理
- 下面请参考流程图
四、支持Markdown的实用工具
下面是针对markdown的一些实用工具的推荐：
- 文档编写类（做笔记首选）：
- 建议使用
HTML + CSS灵活的形式来进行排版 - 其次，使用VSC+Markdown Preview Enhanced这个插件也是非常好的体验，很适合CS专业的学生进行使用
- 所见即所得的开源编辑器：
- 使用一些笔记软件：notion
- 笔者目前正在使用的就是notion
- 网站搭建：
- 👩💻首先使用markdown语法可以大大减少使用html搭建网页的工作量
- 笔记类网页制作：mkdocs(身边人最常用的）:
- 入门及部署都很简单，掌握md，git的用法就可以较好的完成网页的搭建任务
- 博客blog类网页制作：notion-next，hexo
- slide幻灯片的制作，代替原有的ppt繁琐又臭又长的模式
- reveal-md
- 作者在GitHub上开源了这个内容
- reveal.js
- 一个基于html的展示框架
- Slidev
- Slidev (slide + dev,
/slʌɪdɪv/) 是基于 Web 的幻灯片制作和演示工具。它旨在让开发者专注在 Markdown 中编写内容，同时拥有支持 HTML 和 Vue 组件的能力，并且能够呈现像素级完美的布局，还在你的演讲稿中内置了互动的演示样例。 - Slidev是采用web进行驱动，使用markdown语法，使开发者能够专注于编写markdown中的内容
- 书籍类网页的制作：
- 一个命令行工具可以使用markdown来创建书籍
实用工具进一步解释
- Markdown Preview Enhanced
- 详细用法可以看官方文档
- 特性：
- 源码<=>预览是同步的，即所见即所得
- 可以有多种导出方式，并且可以自定义主题
- 支持数学公式和多种图表（mermaid、wavedrom、flow charts、...）
- TOC 目录、文件导入、admonition、CriticMarkup 等扩展语法
- 代码块的执行
- 自定义markdown parser的高级扩展用法
- mkdocs
- 一个基于python的静态网站生成器，很适合笔记本的网站
- 详细内容可以参考官网
- 使用 python-markdown，可方便配置具体扩展，material 插件也有语法扩展
- 优点：简便灵活，主题自带功能丰富，插件多
- 实现逻辑：
- 一切都在mkdocs.yml中进行配置，通过nav规定网站进行导航，从中读取md中的源代码，经过解析后嵌入主题的html框架中
- 下面是实现操作的命令行用法
- 文件的结构
- reveal.md
- 只需要看readme.md就可以啦
- 只是一个包装，主要内容都由 reveal.js 提供，详细用法要看那个文档
- 优点：交互方便，二维组织结构，导出 PDF，演讲者模式，样式易编写
- 下面是xg最常用的主题文档
参考文献
- 作者:fufu酱
- 链接:https://csfufu.life/article/bb665575-25ff-4930-b7e0-e6bc00ae5c76
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议，转载请注明出处。
相关文章