Markdown 语法简介

发布于: 2017-06-21 22:33:44 更新于: 2023-10-30 18:37:44 分类： 开 发 标签： Tag(name='Markdown', count=1) Tag(name='HTML', count=18) Tag(name='MathJax', count=3) Tag(name='前端', count=22) Tag(name='有图', count=142) Tag(name='有公式', count=26) Tag(name='有表格', count=24)

Markdown 语法简介 Markdown 发明者 Daring Fireball 的 Markdown 介绍 https://daringfireball.net/projects/markdown/

Java Markdown 解析器

commonmark-java

commonmark / commonmark-java https://github.com/commonmark/commonmark-java

<dependency>
    <groupId>org.commonmark</groupId>
    <artifactId>commonmark</artifactId>
    <version>0.20.0</version>
</dependency>

https://blog.csdn.net/qq_41609208/article/details/106824386

flexmark-java

https://github.com/vsch/flexmark-java

HTML 转 Markdown

@Test
public void testHtmlToMarkdown() {
    String html = """
                    <h1>MarkDown h1示例</h1>
                    <h3>Header 3</h3>
                    <h3 id="h3">带id的h标题转Markdown会有{#id}</h3>

                    <blockquote>
                    <p>This is a blockquote.</p>
                    <p> &gt; This is the second paragraph in the blockquote.</p>
                    <h2 >This is an H2 in a blockquote</h2>
                    </blockquote>
            """;
    MutableDataSet options = new MutableDataSet();
    FlexmarkHtmlConverter converter = FlexmarkHtmlConverter.builder(options).build();
    String markdown = converter.convert(html);
    log.info("markdown:\n {}", markdown);
}

结果：

 MarkDown h1示例
=============

### Header 3

### 带id的h标题转Markdown会有{#id} {#h3}

> This is a blockquote.
>
> \> This is the second paragraph in the blockquote.
>
> This is an H2 in a blockquote
> -----------------------------
>

有两个问题： 1、<h1>MarkDown h1示例</h1> 转 Markdown 结果是：

 MarkDown h1示例
=============

和我以为的 Markdown 一级标题格式 # MarkDown h1示例 不一样，但查了下，文本下加 ==== 本身也是 Markdown 一级标题的一种格式，没有问题。 并且，后续如果使用 commonmark-java 解析 Markdown 文本，也是能成功解析此一级标题的。

2、<h3 id="h3">带id的h标题转Markdown会有{#id}</h3> 转 Markdown 结果是：

### 带id的h标题转Markdown会有{#id} {#h3}

最后有个 {} 括起来的锚点，不想要这个

JavaScript markdown 解析器

比较了一下 marked, markdown-it, showdown，感觉还是 marked 用的最多也最好

markdown-it vs marked vs showdown - npm trends https://www.npmtrends.com/markdown-it-vs-marked-vs-showdown

marked

markedjs / marked https://github.com/markedjs/marked

官网 https://marked.js.org/

marked 官方的即时渲染工具 https://marked.js.org/demo/

marked.js 换行：

  • options break:false，默认，软换行，即 空格+空格+回车 才换行。这是符合原始 Markdown 对换行的要求的 https://daringfireball.net/projects/markdown/syntax#p
  • options break:true，单个回车即可换行

后端返回的json Markdown 字符串中的 \n 如何被识别为 Markdown 换行 1、处理 Markdown 文本，用 <br> 替换 \n 2、一个 \n 替换为 \n\n 3、一个 \n 替换为 空格空格\n

marked 实时渲染 markdown 文档为 html

1、 jquery.get() 请求当前域下同级的 markdown.md markdown 文档 2、 使用 marked 实时渲染为 html

<!doctype html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>Marked in the browser</title>
  <script src="/js/jquery-2.0.3.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
</head>
<body>
  <div id="markdown"></div>
  <script type="text/javascript">
    $.get("markdown.md").done(content => $("#markdown").html(marked(content)));
  </script>
</body>
</html>

本站点的评论内容使用了 marked 渲染，所以评论是支持 markdown 格式的.

Uncaught TypeError: marked is not a function

marked 某个版本后，渲染方法从 marked 改为 marked.parse，如果代码没来得及改，但 marked 是从 https://cdn.jsdelivr.net/npm/marked/marked.min.js 引的新版，可能就会报这个错，改了就好。

markdown-it

markdown-it / markdown-it https://github.com/markdown-it/markdown-it

demo 页 https://markdown-it.github.io/

showdown

showdownjs / showdown https://github.com/showdownjs/showdown

我是一级标题

我是一级标题的另一种格式

我是二级标题

我是二级标题的另一种格式

我是三级标题

我是四级标题

我是五级标题
我是六级标题
# 我是一级标题

我是一级标题的另一种格式
=============

## 我是二级标题

我是二级标题的另一种格式
--------------------

### 我是三级标题
#### 我是四级标题
##### 我是五级标题
###### 我是六级标题

基本语法

Markdown简介

  • 一种纯文本标记语言，轻量级
  • 专注于写作，简单书写，丰富呈现

引用

>开始一段引用

这是被引用的一个段落 你是干什么工作的？ - 我专门杀僵尸 - 但是僵尸根本不存在啊 - 你见过哪怕一只吗？ - 没见过 - 那你觉得他们是被谁干掉的？

代码区块

  • 要在 Markdown 中建立代码区块很简单，只要简单地缩进 4 个空格或是 1 个制表符就可以，码区块会一直持续到没有缩进的那一行（或是文件结尾）
  • 行内小段代码用反引号(和波浪线同一键下面的)引住printf
  • 三个半角反引号后加语言类型加回车，最后再以三个半角反引号加回车结束，可嵌入指定语言代码（经常不好用），例如：
#include<stdio.h>
  • 支持的语言类型 https://github.com/github/linguist/blob/master/lib/linguist/languages.yml

强制分页

使用 css 的 page-break-after 属性设置分页符，page-break-after 用于在指定元素后面插入分页符。 在想要分页的地方插入一个指定了强制分页的 div 即可。

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

列表

  • 无序列表使用星号*、加号+或是减号-后跟一空格作为列表标记

    • 无序列表1
    • 无序列表2
    • 无序列表3

  • 有序列表则使用数字接着一个英文句点后跟一空格，列表标记上的数字与最终输出无关

    1. 有序列表
    2. 有序列表
    3. 有序列表

多级列表

  • 一级列表
    • 二级列表
      • 三级列表
      • 三级列表
        • 四级列表
        • 四级列表
    • 二级列表
    • 二级列表

注：为知笔记中多级列表只支持2层，在标记符前多加一个空格即可成为二级列表

html实现文本居中

<div id="jump-center" style="text-align:center;"><strong>用于人体检测的方向梯度直方图</strong><br/>
Navneet Dalal，Bill Triggs
</div>
用于人体检测的方向梯度直方图
Navneet Dalal，Bill Triggs

链接

行内链接

链接语法为[链接文字](地址 "提示语")，例如： 这是个[链接](masikkk.com "提示语")： 这是个链接

参考链接

参考链接就是将链接地址集中定义在一起，语法为链接文字用方括号括住，后面跟方括号括住的链接id，而此id是在别处定义的，如：

[链接文字][id1]
[id1]: http://masikkk.com "提示语"

链接文字 链接id的定义方式为：[链接id]: 地址 "提示语"，网址定义只有在产生链接的时候用到，并不会直接出现在文件之中。

页内跳转

锚点

标题自动成为锚点

Markdown 会自动给每一个 h1~h6 标题生成一个锚，其 id 就是标题内容。 目录树中的每一项都是一个跳转链接，点击后就会跳转到其对应的锚点（即标题所在位置）。

自定义锚点

如果需要在目录树之外还要增加跳转到某个标题的链接，需要增加自定义锚点。 首先在想要跳转到的地方加 html 元素标签，定义标签的id，从而成为一个锚点，可以是任意标签，如文本、图片、段落、span，div等等，我在本文档的“html实现文本居中”，“通过CSS设置背景色”，“通过 max-width 属性设定图片最大宽度示例”处都加上了id。

跳转

markdown语法跳转

使用 markdown 行内链接语法即可跳转到此锚点，只不过链接地址改为 #锚点id，例如： [跳转到通过CSS设置背景色](#jump-bg)： 跳转到通过CSS设置背景色

可以向后跳转，也可以跳转到前面定义好的锚点： [向前跳转到html实现文本居中](#jump-center)： 向前跳转到html实现文本居中

html<a>标签跳转

或者直接使用 html 标签 <a href="#锚点id"> 也可以： <a href="#jump-img">跳转到通过max-width属性设定图片最大宽度示例</a> 跳转到通过max-width属性设定图片最大宽度示例

加粗/斜体/删除线

  • 双星号(或下划线)引住**加粗**是粗体：加粗
  • 单星号(或下划线)引住*斜体*是斜体：斜体
  • 双波浪线引住~~删除线~~是删除线（中划线）：~~删除线~~

如果你的*和_两边都有空白的话，它们就只会被当成普通的符号，如果要在文字前后直接插入普通的星号或底线，你可以用反斜线转义\*，\_。 注：我的博客中为了和MathJax兼容，修改了MarkDown渲染引擎，将下划线_的加粗解释取消了，以后都要习惯用星号加粗。

通过html设定字体颜色或背景色

  • 通过html标签<font color="red">红色字体</font>来设置字体颜色：红色字体
  • 通过CSS样式表<span style="color:red">红色字体</span>来设置字体颜色：红色字体
  • 通过CSS样式表<span style="color:red;font-weight:bold">粗体红色</span>来设置红色粗体：粗体红色
  • 通过双星号引住CSS样式表<span style="color:red; font-weight:bold">粗体红色</span>来设置红色粗体：粗体红色
  • 通过CSS样式表<span id="jump-bg" style="background-color: rgb(255, 104, 32);">背景色</span>设置背景色：背景色

分割线

在一行中用三个以上的星号、减号、底线来建立一个分隔线，行内不能有其他东西。

通过html标签hr书写自定义分割线样式

html上看不到，被我用css隐藏了

<hr style="height:2px;border:none;border-top:2px dotted #185598;" />

<hr style="height:1px;border:none;border-top:2px solid #660000;" />

<hr style="height:3px;border:none;border-top:3px double red;" />

<hr style="height:5px;border:none;border-top:5px ridge green;" />

<hr style="height:10px;border:none;border-top:10px groove skyblue;" />

MarkDown语法插入图片

![文字描述](图片链接 "提示语") Markdown Logo 注：我一般不用MarkDown语法直接插入图片，都是通过html标签<img>插入图片，方便设定图片宽度。

通过html标签img插入图片并排版

通过float属性横排展示图片

<div style="float:left;text-align:center;"><img src="https://www.zybuluo.com/static/img/logo.png" style="margin-bottom:0px; width:100%;" alt="提示语"><br/>Markdown Logo</div>
<div style="float:left;text-align:center;"><img src="https://www.zybuluo.com/static/img/logo.png" style="margin-bottom:0px; width:100%;" alt="提示语"><br/>Markdown Logo</div>
<div style="clear:both;"></div>
提示语
Markdown Logo
提示语
Markdown Logo

注意：使用完float:left后必须<div style="clear:both;"></div>来清除float，否则后续的内容还会继续浮动到前一行。

通过width属性设定图片宽度

主要是为了解决图片太宽超出正文宽度。 在<img>标签的style中增加width属性，设为100%，即其父容器宽度的100%，而其父容器div肯定在正文宽度之内。 因为如果提供了一个百分比形式的width值而忽略了height，那么不管是放大还是缩小，浏览器都将保持图像的宽高比例。这意味着图像的高度与宽度之比将不会发生变化，图像也就不会发生扭曲。 示例如下，改变页面宽度来查看效果 <div style="text-align:center;"><img src="https://www.zybuluo.com/static/img/logo.png" style="margin-bottom:0px; width:100%;" alt=""><br/>MarkDown</div>：


MarkDown

<div style="text-align:center;"><img src="http://image.masikkk.com/blog/domain-analysis.png" style="margin-bottom:0px; width:100%;" alt=""><br/>我的域名解析配置</div>：


我的域名解析配置
  • HTML img标签的height和width属性 http://www.w3school.com.cn/tags/att_img_height-width.asp

通过max-width属性设定图片最大宽度

通过将<img src="..." style="width:100%;">设定图片宽度的缺点是：任何时候图片都会被等比缩放到宽度等于父容器宽度，当图片宽度小于父容器宽度时会被拉伸导致失真，很不爽。插入图片时还要考虑图片本身大小和正文宽度，小于正文宽度的不加此属性，大于正文宽度的加上此属性，很费事。并且考虑了这些还不够，因为正文宽度在不同大小屏幕上本身就是会变化的。 通过给<img>标签的style中增加max-width属性，设定为100%，可完美解决此问题，即<img src="..." style="max-width:100%;">，当图片宽度小于正文宽度时不会被缩放，当图片宽度大于正文宽度时会被等比缩放到宽度等于父容器宽度，并且在任何通过html的img标签插入图片的地方都可以无所顾忌的加上此属性，完美。 示例如下，改变页面宽度来查看效果 <div id="jump-img" style="text-align:center;"><img src="https://www.zybuluo.com/static/img/logo.png" style="margin-bottom:0px; max-width:100%;" alt=""><br/>MarkDown</div>：


MarkDown

<div style="text-align:center;"><img src="http://image.masikkk.com/blog/domain-analysis.png" style="margin-bottom:0px; max-width:100%;" alt=""><br/>我的域名解析配置</div>：


我的域名解析配置
  • CSS max-width 属性 http://www.w3school.com.cn/cssref/pr_dim_max-width.asp

表格

语法说明：

  • 1、第一行为表头，第二行用一个或多个"-"分隔表头和主体部分，第三行开始每一行代表一个表格行；
  • 2、列与列之间用管道符号"|"隔开，原生方式的表格每一行的两边也要有管道符。
  • 3、可在第二行指定不同列单元格内容的对齐方式，默认为左对齐，在"-"右边加上":"为右对齐，在"-"两侧同时加上":"为居中对齐。
| 表头A | 表头B |
| ----- | ----- |
| 数据A | 数据B |
| 数据C | 数据D |
表头A 表头B
数据A 数据B
数据C 数据D 
| 表头1    |    表头2 | 表头3 |
|:-------- | --------:|:-----:|
| Computer | 1600 USD |   5   |
| Phone    |   12 USD |  12   |
| Pipe     |    1 USD |  234  |
表头1 表头2 表头3
Computer 1600 USD 5
Phone 12 USD 12
Pipe 1 USD 234

MarkDown表格内换行

使用html换行标签<br>或<br/>实现markdown表格内换行。

操作符 | 说明 | 举例
--- | --- | ---
-b file | 检测文件是否是块设备文件，如果是，则返回 true。 | `[ -b $file ]` 返回 false。
-c file | 检测文件是否是字符设备文件，如果是，则返回 true。 | `[ -c $file ]` 返回 false。
-d file | 检测文件是否是目录，如果是，则返回 true。 | `[ -d $file ]` 返回 false。
-f file | 检测文件是否是普通文件（既不是目录，也不是设备文件），<br/>如果是，则返回 true。 | `[ -f $file ]` 返回 true。
-p file | 检测文件是否是有名管道，如果是，则返回 true。 | `[ -p $file ]` 返回 false。
-r file | 检测文件是否可读，如果是，则返回 true。 | `[ -r $file ]` 返回 true。
-w file | 检测文件是否可写，如果是，则返回 true。 | `[ -w $file ]` 返回 true。
-x file | 检测文件是否可执行，如果是，则返回 true。 | `[ -x $file ]` 返回 true。
-s file | 检测文件是否为空（文件大小是否大于0），不为空返回 true。 | `[ -s $file ]` 返回 true。
-e file | 检测文件（包括目录）是否存在，如果是，则返回 true。 | `[ -e $file ]` 返回 true。
操作符 说明 举例
-b file 检测文件是否是块设备文件，如果是，则返回 true。 [ -b $file ] 返回 false。
-c file 检测文件是否是字符设备文件，如果是，则返回 true。 [ -c $file ] 返回 false。
-d file 检测文件是否是目录，如果是，则返回 true。 [ -d $file ] 返回 false。
-f file 检测文件是否是普通文件（既不是目录，也不是设备文件），
如果是，则返回 true。		 [ -f $file ] 返回 true。
-p file 检测文件是否是有名管道，如果是，则返回 true。 [ -p $file ] 返回 false。
-r file 检测文件是否可读，如果是，则返回 true。 [ -r $file ] 返回 true。
-w file 检测文件是否可写，如果是，则返回 true。 [ -w $file ] 返回 true。
-x file 检测文件是否可执行，如果是，则返回 true。 [ -x $file ] 返回 true。
-s file 检测文件是否为空（文件大小是否大于0），不为空返回 true。 [ -s $file ] 返回 true。
-e file 检测文件（包括目录）是否存在，如果是，则返回 true。 [ -e $file ] 返回 true。

通过html标签table插入表格

  • 给<table>增加样式，变成<table class="table table-bordered table-striped table-condensed">
    • table-bordered：带圆角边框和竖线
    • table-striped：奇偶行颜色不同
    • table-condensed：压缩行距
  • 将table的宽度设置为屏幕的百分比，例如95%，<table width="95%">
  • 设置单元格排列属性align为left,right或center，例如<td aligh="center">
  • 如果表格内文需要换行，可以在要换行的内容后加入<br/>，后面的内容就会跑到下一行。
  • <style>标签可以定义到<table>标签中
<table width="95%" class="table table-bordered table-striped table-condensed" border="1">

<style type="text/css">
    .bgblue{background-color: rgb(51, 102, 255);}
    .bggreen{background-color: rgb(0, 255, 0);}
    .bgorange{background-color: rgb(255, 104, 32);}
    .bggrey{background-color: rgb(127, 127, 127);}
    .bgyellow{background-color: rgb(255, 255, 0);}
    .bold{font-weight:bold;}
</style>

<tr>
    <th>日期时间</th>
    <th>体重</th>
    <th>运动与备注</th>
</tr>
<tr>
    <td align="center">2016.03.07(一)21:20</td>
    <td align="center">73.9</td>
    <td>
    <ul>
        <li>胸</li>
        <ul>
            <li>平板哑铃卧推，左右各17.5公斤，10*4；<span class="bggreen">(重量增加15kg->17.5kg)</span></li>
            <li>平板杠铃卧推，35公斤，10*4；</li>
            <li>pec fly夹胸机，30公斤级，10*4；</li>
            <li>chest press坐姿推胸，45公斤级，10*4；</li>
            <li>平板哑铃仰卧飞鸟，左右各7.5公斤，10*4；</li>
        </ul>
        <li>腿</li>
        <ul>
            <li>史密斯架杠铃深蹲，30公斤，15*4；</li>
        </ul>
    </ul>
    <span class="bold">总结：</span><br/>
1 二头三头一直疼到今天，到下午才好点儿。<br/>
2 背部酸，看来前天练背练得还可以，好像第一次背部有这么强烈的延迟性酸痛。<br/>
3 终于可以推17.5kg的哑铃卧推了。<br/>
4 今天练腿了，强度还行，可预见接下来几天大腿会很疼。<br/>
5 小腿疼，很疼，肯定跟用前脚掌着地跑步有关，膝盖受压迫少了，小腿开始了。<br/>
    </td>
</tr>
<tr>
    <td align="center">2016.03.07(一)21:20</td>
    <td align="center">73.9</td>
    <td>
    <ul>
        <li><span class="bgblue">背</span></li>
        <ul>
            <li>俯身单臂哑铃划船，15公斤，左右各10*4；</li>
            <li>俯立杠铃划船，30公斤，10*6；</li>
            <li>正手宽距助力引体向上，30公斤助力，10*4；</li>
            <li>龙门架绳索划船，30公斤，10*5；</li>
            <li>seated horizontal pully水平坐拉，25公斤级，10*4;</li>
        </ul>
        <li><span class="bgblue">日常</span></li>
        <ul>
            <li>宽距俯卧撑，20*2；</li>
        </ul>
        <li><span class="bgblue">腿</span></li>
        <ul>
            <li>史密斯架杠铃深蹲，30公斤，15*2；</li>
        </ul>
        <li><span class="bgblue">有氧</span></li>
        <ul>
            <li>40分钟慢跑，5.87公里，381千卡；速度:9公里每小时，中间累了可休息1-3次，每次1-2分钟;</li>
        </ul>
    </ul>
    </td>
</tr>
<tr>
    <td align="center">2016.03.07(一)21:20</td>
    <td align="center">73.9</td>
    <td>
    <ul>
        <li>项目</li>
        <ul>
            <li></li>
            <li></li>
        </ul>
        <li>项目</li>
        <ul>
            <li></li>
            <li></li>
        </ul>
        <li>项目</li>
        <ul>
            <li></li>
            <li></li>
        </ul>
    </ul>
    </td>
</tr>
</table>
日期时间 体重 运动与备注
2016.03.07(一)21:20 73.9
  • 胸
    • 平板哑铃卧推，左右各17.5公斤，10*4；(重量增加15kg->17.5kg)
    • 平板杠铃卧推，35公斤，10*4；
    • pec fly夹胸机，30公斤级，10*4；
    • chest press坐姿推胸，45公斤级，10*4；
    • 平板哑铃仰卧飞鸟，左右各7.5公斤，10*4；
  • 腿
    • 史密斯架杠铃深蹲，30公斤，15*4；
总结：
1 二头三头一直疼到今天，到下午才好点儿。
2 背部酸，看来前天练背练得还可以，好像第一次背部有这么强烈的延迟性酸痛。
3 终于可以推17.5kg的哑铃卧推了。
4 今天练腿了，强度还行，可预见接下来几天大腿会很疼。
5 小腿疼，很疼，肯定跟用前脚掌着地跑步有关，膝盖受压迫少了，小腿开始了。
2016.03.07(一)21:20 73.9
  • 背
    • 俯身单臂哑铃划船，15公斤，左右各10*4；
    • 俯立杠铃划船，30公斤，10*6；
    • 正手宽距助力引体向上，30公斤助力，10*4；
    • 龙门架绳索划船，30公斤，10*5；
    • seated horizontal pully水平坐拉，25公斤级，10*4;
  • 日常
    • 宽距俯卧撑，20*2；
  • 腿
    • 史密斯架杠铃深蹲，30公斤，15*2；
  • 有氧
    • 40分钟慢跑，5.87公里，381千卡；速度:9公里每小时，中间累了可休息1-3次，每次1-2分钟;
2016.03.07(一)21:20 73.9
  • 项目
  • 项目
  • 项目

  • Markdown之表格的处理 http://www.ituring.com.cn/article/3452

  • Excel表格转html http://pressbin.com/tools/excel_to_html_table/index.html

增强语法

Markdown与HTML

  • 单标签可任意使用
  • 成对标签使用时，必须在前后加上空行与其它内容区隔开
  • 如果要引用html标签代码，用反引号括住，否则会被解析为html标签
  • 转义字符&和<
    • 版权符号&copy：©，小于号<，小于号&lt;：<，与&，与&amp：&
    • AT&T

目录TOC

[TOC]，在任意位置插入根据标题自动生成的文档目录(Table of Contents) 注：有些markdown编辑器不支持此语法

复选框/待办事项

复选框列表 在列表符号后面加上[]或者[x]代表选中或者未选中情况 注意只有在列表中才有效

- [ ] C++
- [x] Java
- [x] Qt
- [x] Android
 - [x] C#
 - [ ] .NET

效果为

  • C++
  • Java
  • Qt
  • Android
    • C#
    • .NET

想要在hexo中支持复选框，有两种方案可选： 1、更新hexo默认的渲染引擎 hexo-renderer-marked 到 0.3.0 及以上即可。 https://github.com/ahonn/hexo-theme-even/issues/135 https://github.com/hexojs/hexo-renderer-marked/issues/30 最新版hexo中默认的 hexo-renderer-marked 已包含此功能，不用单独升级 hexo-renderer-marked 版本。 2、更换markdown引擎为markdown-it，然后安装 markdown-it-checkbox 就可以了，命令是npm install markdown-it-checkbox，然后在配置文件启用这一扩展

流程图

元数据标识: grammar_flow

提供流程图语法扩展功能，语法格式为：

\`\`\`flow
st=>start: 开始
e=>end: 结束
op=>operation: 操作步骤
cond=>condition: 是 或者 否?
st->op->cond
cond(yes)->e
cond(no)->op
\`\`\`

st=>start: 开始
e=>end: 结束
op=>operation: 操作步骤
cond=>condition: 是 或者 否?
st->op->cond
cond(yes)->e
cond(no)->op

序列图

元数据标识: grammar_sequence

\`\`\`sequence
小明->小李: 你好 小李, 最近怎么样?
Note right of 小李: 小李想了想
小李-->小明: 还是老样子
\`\`\`

提供序列图语法扩展功能，语法格式为：

小明->小李: 你好 小李, 最近怎么样?
Note right of 小李: 小李想了想
小李-->小明: 还是老样子

MathJax公式

单$符引住的是行内公式，双$符引住的是行间公式。

含下划线_的公式$x_mu$：$x_mu$ 希腊字符$\sigma$：$\sigma$

双\\公式内换行：

$$
f(n) =
\begin{cases}
n/2,  & \text{if $n$ is even} \\\\
3n+1, & \text{if $n$ is odd}
\end{cases}
$$

$$ f(n) = \begin{cases} n/2, & \text{if $n$ is even} \\ 3n+1, & \text{if $n$ is odd} \end{cases} $$

行内公式$y=ax+b$：$y=ax+b$ 行内公式$\cos 2\theta = \cos^2 \theta - \sin^2 \theta = 2 \cos^2 \theta$：$\cos 2\theta = \cos^2 \theta - \sin^2 \theta = 2 \cos^2 \theta$

行间公式$$ \sum_{i=0}^n i^2 = \frac{(n^2+n)(2n+1)}{6} $$： $$ \sum_{i=0}^n i^2 = \frac{(n^2+n)(2n+1)}{6} $$ 行间公式$$ x = \dfrac{-b \pm \sqrt{b^2 - 4ac}}{2a} $$： $$ x = \dfrac{-b \pm \sqrt{b^2 - 4ac}}{2a} $$

MathJax 公式书写示例见 MathJax数学公式 Hexo博客中使用 MathJax js ，参考 Hexo博客(13)添加MathJax数学公式渲染

MathJax官网 https://www.mathjax.org/ MathJax公式书写参考 http://meta.math.stackexchange.com/questions/5020/mathjax-basic-tutorial-and-quick-reference

GFM(GitHub Flavored Markdown)

GFM 代码高亮支持的语言列表 https://docs.github.com/en/github/writing-on-github/working-with-advanced-formatting/creating-and-highlighting-code-blocks

  • Writing on GitHub https://help.github.com/categories/writing-on-github/

  • Basic writing and formatting syntax https://help.github.com/articles/basic-writing-and-formatting-syntax/

  • Working with advanced formatting https://help.github.com/articles/working-with-advanced-formatting/

其他

Markdown缺点

  • 有些编辑器不支持一些特殊语法
  • 解析样式由编辑器定，自己修改样式不方便
  • 对比word，Excel，latex等富文本编辑器，无复杂排版

Markdown应用

  • 写笔记，有道笔记、为知笔记支持markdown，印象笔记暂不支持(马克飞象)
  • 写博客，简书、WordPress、GitHub README.md、GitHub Issues https://github.com/lifesinger/blog/issues https://github.com/xufei/blog/issues/10 https://github.com/justjavac/free-programming-books-zh_CN/blob/master/README.md

MarkDown编辑器

Typora

Mac 上很漂亮的一款 MarkDown 编辑器，他的 MarkDown 渲染做的不错，看着很舒服。 见 Typora使用笔记

Atom

GitHub 出的一款编辑器，支持各种插件，用来写 MarkDown 很方便。 见 Atom使用笔记

Markdown在线编辑器

Cmd Markdown 编辑阅读器 https://www.zybuluo.com/mdeditor

小书匠 http://markdown.xiaoshujiang.com/

StackEdit https://stackedit.io/editor

markdown语法说明简体中文版 http://wowubuntu.com/markdown/

创始人 John Gruber 的 Markdown 语法说明 http://daringfireball.net/projects/markdown/syntax