Markdown 语法最详入门

最新推荐文章于 2024-08-22 10:49:33 发布

原创最新推荐文章于 2024-08-22 10:49:33 发布 · 308 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Markdown #markdown 语法

计算机基础专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍了Markdown的基本语法，包括标题、分级标题、TOC目录、引用、行内标记、代码块、公式、分隔符、脚注、锚点、定义型列表、自动邮箱链接、流程图与时序图等内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.标题代码注：# 后面保持空格 # h1

h2

h3

h4

h5

h6

# h7 // 错误代码

## h8 // 错误代码

### h9 // 错误代码

#### h10 // 错误代码

演示

h1
h2
h3
h4
h5
h6

####### h7 ######## h8 ######### h9 ########## h10 2.分级标题代码注：= - 最少可以只写一个，兼容性一般一级标题 ======================

二级标题

演示

3.TOC

注：根据标题生成目录，兼容性一般

代码

[TOC]
演示

4.引用
代码1(单行式)

hello world!
演示

hello world!

代码2(多行式)

hello world!
hello world!
hello world!
或者

hello world!
hello world!
hello world!
演示

相同的结果

hello world!
hello world!
hello world!

代码3(多层嵌套)

aaaaaaaaa

bbbbbbbbb

cccccccccc
演示

aaaaaaaaa

bbbbbbbbb

cccccccccc

5.行内标记
注：用 ` 标记代码块将变成一行

代码

标记之外hello world标记之外
演示

标记之外hello world标记之外

错误代码
注：不同平台错误略有差异

标记之外 < div> < div></div> < div></div> < div></div> < /div>标记之外
演示

6.代码块
注：与上行距离一空行

代码1(“`)

注：用“`生成块

<div>   
    <div></div>
    <div></div>
    <div></div>
</div>

演示

代码2(Tab)

注： Tab缩进

我是文字……

<div>   
    <div></div>
    <div></div>
    <div></div>
</div>

演示

代码3(自定义语法)
注：根据不同的语言配置不同的代码着色

var num = 0;
for (var i = 0; i < 5; i++) {
    num+=i;
}
console.log(num);

演示 var num = 0; for (var i = 0; i

<div>   
    <div></div>
    <div></div>
    <div></div>
</div>

演示

19.公式 {#1}
注：1个$左对齐，2个居中

代码

x = y 2 + 1

$x \href{why-equal.html}{=} y^2 + 1$

x=−b±b2−4ac√2a. x = − b ± b 2 − 4 a c 2 a . $x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$
演示

20.分隔符
注：最少三个 — 或 *或 * * *

代码

*

演示

21.脚注
代码

Markdown1
Markdown[1]

22.锚点
代码
注：只有标题支持锚点，跳转目录方括号后保持空格

公式标题锚点

[需要跳转的目录] {#1} // 方括号后保持空格

演示

公式标题锚点

23.定义型列表
注：解释型定义
代码

Markdown

轻量级文本标记语言，可以转换成html，pdf等格式 // 开头一个 : + Tab 或四个空格

代码块定义

代码块定义……

var a = 10;         // 保持空一行与 递进缩进

演示

24.自动邮箱链接
代码

xxx@outlook.com
演示

xxx@outlook.com

25.流程图
代码1

st=>start: 开始|past:> http://www.baidu.com // 开始
e=>end: 结束              // 结束
c1=>condition: 条件1:>http://www.baidu.com[_parent]   // 判断条件
c2=>condition: 条件2      // 判断条件
c3=>condition: 条件3      // 判断条件
io=>inputoutput: 输出     // 输出
//----------------以上为定义参数-------------------------

//----------------以下为连接参数-------------------------
// 开始->判断条件1为no->判断条件2为no->判断条件3为no->输出->结束
st->c1(yes,right)->c2(yes,right)->c3(yes,right)->io->e
c1(no)->e                   // 条件1不满足->结束
c2(no)->e                   // 条件2不满足->结束
c3(no)->e                   // 条件3不满足->结束

演示

代码详解
流程图分为两个部分：定义参数然后连接参数

定义示例：

tag=>type: content:>url // 形参格式
st=>start: 开始:>http://www.baidu.com[blank] //实参格式
注：* st=>start: 开始的：后面保持空格*

形参实参含义
tag st 标签 (可以自定义)
=> => 赋值
type start 类型 (6种类型)
content 开始描述内容 (可以自定义)
:>url http://www.baidu.com[blank] 链接与跳转方式兼容性很差
6种类型含义
start 启动
end 结束
operation 程序
subroutine 子程序
condition 条件
inputoutput 输出
连接示例：

st->c1(yes,right)->c2(yes,right)->c3(yes,right)->io->e
开始->判断条件1为no->判断条件2为no->判断条件3为no->输出->结束
形参实参含义
-> -> 连接
condition c1 条件
(布尔值,方向) (yes,right) 如果满足向右连接，4种方向：right ，left，up ，down 默认为：down
注：operation (程序); subroutine (子程序) ;condition (条件)，都可以在括号里加入连接方向。

operation(right)
subroutine(left)
condition(yes,right) // 只有条件才能加布尔值
代码2

注：添加样式和url跳转需要添加第三方的脚本
实际效果很差，使用起来麻烦，意义不大

st=>start: 启动|past:>http://www.baidu.com[blank] // 开始
e=>end: 结束                      // 结束
op1=>operation: 方案一             // 运算1
sub2=>subroutine: 方案二|approved:>http://www.baidu.com[_parent]  // 运算2
sub3=>subroutine: 重新制定方案        // 运算2
cond1=>condition: 行不行？|request  // 判断条件1
cond2=>condition: 行不行？          // 判断条件2
io=>inputoutput: 结果满意           // 输出

// 开始->方案1->判断条件->
st->op1->cond1
// 判断条件1为no->方案2->判断条件2为no->重新制定方案->方案1
cond1(no,right)->sub2->cond2(no,right)->sub3(right)->op1
cond1(yes)->io->e       // 判断条件满足->输出->结束
cond2(yes)->io->e       // 判断条件满足->输出->结束

演示

作者地址：flowchart.js

一般普遍支持的效果

26.时序图
代码1

演示

代码详解

注：A->>B: 你好后面可以不写文字，但是一定要在最后加上：
Note left of A 代表注释在A的左边

符号含义
- 实线

实心箭头
– 虚线

空心箭头
代码2

```sequence
起床->吃饭: 稀饭油条
吃饭->上班: 不要迟到了
上班->午餐: 吃撑了
上班->下班:
Note right of 下班: 下班了
下班->回家:
Note right of 回家: 到家了
回家-->>起床:
Note left of 起床: 新的一天
```

演示

27.生成侧边栏扩展
注：生成侧边栏一般是插入JS，再就是模板,
总体来说，很是麻烦，效果一般，不作详解。

作者仓库：i5ting_ztree_toc

精简版：作者博客HaleyPKU

END
Markdown是一种纯文本标记语言 ↩

Markdown是一种纯文本标记语言 // 在文章最后面显示脚注
演示 ↩