初学Markdown二三事

根据Markdown教程|菜鸟教程学习

初学Markdown二三事

1、使用 = 和 - 标记一级和二级标题

我展示的是一级标题
=================
我展示的是二级标题
-----------------

我展示的是一级标题

我展示的是二级标题

#1
##2
###3
####4
#####5
######6

1

2

3

4

5
6

#######7

看来使用#最多能有六级

2、段落标记

直接写就行：
我爱吃西红柿
还有土豆

3、字体

斜体:

*芒果*
_西瓜_

芒果
西瓜

粗体:

**草莓**
__白菜__

草莓
白菜

粗斜体:

***香蕉***
___苹果___

香蕉
苹果

小明当上了售货员
小红当上了_大学老师_
小蓝当上了#博主#
后两个咋不行嘞

4、分隔符

你可以在一行中用三个以上的星号、减号、底线来建立一个分隔线，行内不能有其他东西。你也可以在星号或是减号中间插入空格。下面每种写法都可以建立分隔线：

***

* * *

**** *

- - -

----------

如果用正则表达式写的话，应该是匹配三个或多个符号之间只省略了空格

5、删除线

在文字的两端加上两个波浪线 ~~:
~~大海啊，你全是水~~
大海啊，你全是水

6、下划线

通过 HTML 的<u>标签来实现：
<u>请在此处填空</u>
请在此处填空
不可以省略掉结尾的</u>哦

7、脚注

格式： [^要注明的文本]

计算机二级好多题没见过的啊 [^footnote]。
[^footnote]:其中脚注就是一个，以前只在书上见过。
脚注后面要空一行再写正文喔

8、列表

计算机二级好多题没见过的啊 [1]。

8、列表
Markdown 支持有序列表和无序列表。

无序列表：

无序列表使用星号(*)、加号(+)或是减号(-)作为列表标记，这些标记后面要添加一个空格，然后再填写内容：

点击查看代码 
* 第一项
* 第二项
* 第三项

+ 第一项
+ 第二项
+ 第三项


- 第一项
- 第二项
- 第三项
  • 第一项
  • 第二项
  • 第三项
  • 第一项
  • 第二项
  • 第三项
  • 第一项
  • 第二项
  • 第三项

有序列表：

注意空格

1. A
1.B
1. c
1.  d
1.    e
  1. A
    1.B
  2. c
  3. d
  4. e

列表嵌套

1. 田径：
    - 100米
    - 1000米
2. 球类：
    - 篮球
    - 足球
            3. 多人足球
                  - 蓝队
  1. 田径：
    • 100米
    • 1000米
  2. 球类：
    • 篮球
    • 足球
      3. 多人足球
      - 蓝队

9、区块

Markdown 区块引用是在段落开头使用 > 符号 ，然后后面紧跟一个空格符号
另外区块是可以嵌套的，一个 > 符号是最外层，两个 > 符号是第一层嵌套，以此类推：

github
博客园

paopao688

文章

9.区块

1

2

3

看来能套很多层呢，哈哈(在编辑预览中是显示这个样的)

（此处发现波浪号还有其他特殊效果 小号和大方框）
~1~
~~~1~~~
1231

区块中使用列表

省略...

列表中使用区块

如果要在列表项目内放进区块，那么就需要在 > 前添加四个空格的缩进。

列表中使用区块实例如下：

* 早晨
    > 起床
    > 洗漱
* 晚上
>洗漱
>> 睡觉
  • 早晨

    起床
    洗漱

  • 晚上

洗漱

睡觉

10、代码

如果是段落上的一个函数或片段的代码可以用反引号把它包起来（`），例如：

printf() 函数

代码区块

代码区块使用 4 个空格或者一个制表符（Tab 键）。

此处有错误!!!!!

`
 <?php
 echo 'bokeyuan';

 111
`
function(){}
var log = console.log

可以用 ``` 包裹一段代码，并指定一种语言（也可以不指定）：

```c
#include <stdio.h>
int main()
{
printf("今天在学校c语言课第一次上机哦");
//2025.4.7
return 0;
}
`A``
//此处要删去A

也可以用&#96表示
&#96;markdown&#96;
`markdown`

#include <stdio.h>
int main()
{
printf("今天在学校c语言课第一次上机哦");
//2025.4.7
return 0;
}

11、链接

链接使用方法如下：

[链接名称](链接地址)

或者

<链接地址>
eg：

这是一个链接 [博客园](https://www.cnblogs.com/)
百度<https://www.baidu.com> （直接使用链接地址)

这是一个链接 博客园
百度https://www.baidu.com （直接使用链接地址)

高级链接

我们可以通过变量来设置一个链接，变量赋值在文档末尾进行：

这个链接用 1 作为网址变量 [bilibili][1]
这个链接用 花瓣 作为网址变量 [花瓣网][花瓣]
然后在文档的结尾为变量赋值（网址）

  [1]: https://www.bilibili.com/
  [花瓣]: https://huaban.com/

这个链接用 1 作为网址变量 bilibili
这个链接用 花瓣 作为网址变量 花瓣网
然后在文档的结尾为变量赋值（网址）

12、图片

![alt 属性文本](图片地址)
![alt 属性文本](图片地址 "可选标题")

alt 属性文本
alt 属性文本

eg:

![调查问卷](https://img2024.cnblogs.com/blog/3591449/202503/3591449-20250321111107104-1306004436.png)
![黄皮耗子](https://images.cnblogs.com/cnblogs_com/blogs/838082/galleries/2450458/o_250322012242_qqq.jpg "皮卡丘")
![图片看不见啦]()

调查问卷
黄皮耗子
图片看不见啦

当然，你也可以像网址那样对图片网址使用变量:

这个链接用 test 作为网址变量 [测试下载][test].
然后在文档的结尾为变量赋值（网址）

[test]: https://img2024.cnblogs.com/blog/3591449/202503/3591449-20250321235152669-1015942784.png

这个链接用 test 作为网址变量 测试下载.
然后在文档的结尾为变量赋值（网址）

Markdown 还没有办法指定图片的高度与宽度，如果你需要的话，你可以使用普通的 <img>标签。

12、表格

Markdown 制作表格使用 | 来分隔不同的单元格，使用 - 来分隔表头和其他行。

语法格式如下：

|  名称   | 身高   |
|  ----  | ---- |
| 芭芭拉  | 158.1cm|
| 阿尔托莉雅·潘德拉贡  | 154cm |
名称 身高
芭芭拉 158.1cm
阿尔托莉雅·潘德拉贡 154cm

对齐方式

-: 设置内容和标题栏居右对齐。
:- 设置内容和标题栏居左对齐。
:-: 设置内容和标题栏居中对齐。

| 编剧 | 名称 | 时长 |
| :-----| ----: | :----: |
| 里斯·谢尔史密斯、史蒂夫·佩姆伯顿 | 《9号秘事》 | ≈30min |
| 黄伟健 | 《喜羊羊与灰太狼之牛气冲天》 | 85分钟 |
编剧 名称 时长
里斯·谢尔史密斯、史蒂夫·佩姆伯顿 《9号秘事》 ≈30min
黄伟健 《喜羊羊与灰太狼之牛气冲天》 85分钟

| :-----| ----: | :----: |这个好像只能放在第二行

13、高级

支持的 HTML 元素

不在 Markdown 涵盖范围之内的标签，都可以直接在文档里面用 HTML 撰写。

目前支持的 HTML 元素有：<kbd> <b> <i> <em> <sup> <sub> <br>等 ，如：
<kbd>键盘输入函数
<b>加粗文本
<i>斜体文本
<em>强调文本
<sup>上标文本
<sub>下标文本
<br>换行

使用 <kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>Del</kbd> 重启电脑
<b>111</b><i>22</i><em>33</em><sup>44</sup><sub>55</sub><br>66
<canvas style="background-color: blue"></canvas>

使用 Ctrl+Alt+Del 重启电脑

oWo,kbd好像在博客园不可以

11122334455
66

canvas也行!!

转义

Markdown 使用了很多特殊符号来表示特定的意义，如果需要显示特定的符号则需要使用转义字符，Markdown 使用反斜杠转义特殊字符：

**文本加粗** 
\*\* 正常显示星号 \*\*

文本加粗
** 正常显示星号 **

Markdown 支持以下这些符号前面加上反斜杠来帮助插入普通的符号：

点击查看符号 
\   反斜线
`   反引号
*   星号
_   下划线
{}  花括号
[]  方括号
()  小括号
#   井字号
+   加号
-   减号
.   英文句点
!   感叹号

公式

在博客园不显示

Other

其他

点击查看

typora 画流程图、时序图(顺序图)、甘特图
复制以下代码使用 typora 的源码模式粘贴到编辑器中查看效果：

以下几个实例效果图如下：

1、横向流程图源码格式：

graph LR A[方形] -->B(圆角) B --> C{条件a} C -->|a=1| D[结果1] C -->|a=2| E[结果2] F[横向流程图]

2、竖向流程图源码格式：

graph TD A[方形] --> B(圆角) B --> C{条件a} C --> |a=1| D[结果1] C --> |a=2| E[结果2] F[竖向流程图]

3、标准流程图源码格式：

st=>start: 开始框
op=>operation: 处理框
cond=>condition: 判断框(是或否?)
sub1=>subroutine: 子流程
io=>inputoutput: 输入输出框
e=>end: 结束框
st->op->cond
cond(yes)->io->e
cond(no)->sub1(right)->op

4、标准流程图源码格式（横向）：

st=>start: 开始框
op=>operation: 处理框
cond=>condition: 判断框(是或否?)
sub1=>subroutine: 子流程
io=>inputoutput: 输入输出框
e=>end: 结束框
st(right)->op(right)->cond
cond(yes)->io(bottom)->e
cond(no)->sub1(right)->op

5、UML时序图源码样例：

对象A->对象B: 对象B你好吗?（请求）
Note right of 对象B: 对象B的描述
Note left of 对象A: 对象A的描述(提示)
对象B-->对象A: 我很好(响应)
对象A->对象B: 你真的好吗？

6、UML时序图源码复杂样例：

Title: 标题：复杂使用
对象A->对象B: 对象B你好吗?（请求）
Note right of 对象B: 对象B的描述
Note left of 对象A: 对象A的描述(提示)
对象B-->对象A: 我很好(响应)
对象B->小三: 你好吗
小三-->>对象A: 对象B找我了
对象A->对象B: 你真的好吗？
Note over 小三,对象B: 我们是朋友
participant C
Note right of C: 没人陪我玩

7、UML标准时序图样例：

%% 时序图例子,-> 直线，-->虚线，->>实线箭头 sequenceDiagram participant 张三 participant 李四 张三->王五: 王五你好吗？ loop 健康检查 王五->王五: 与疾病战斗 end Note right of 王五: 合理 食物 <br/>看医生... 李四-->>张三: 很好! 王五->李四: 你怎么样? 李四-->王五: 很好!

8、甘特图样例：

%% 语法示例 gantt dateFormat YYYY-MM-DD title 软件开发甘特图 section 设计 需求 :done, des1, 2014-01-06,2014-01-08 原型 :active, des2, 2014-01-09, 3d UI设计 : des3, after des2, 5d 未来任务 : des4, after des3, 5d section 开发 学习准备理解需求 :crit, done, 2014-01-06,24h 设计框架 :crit, done, after des2, 2d 开发 :crit, active, 3d 未来任务 :crit, 5d 耍 :2d section 测试 功能测试 :active, a1, after des3, 3d 压力测试 :after a1 , 20h 测试报告 : 48h
``` ~~~222~~~ 这是哪个 ``` 
这是哪个

  1. 其中脚注就是一个，以前只在书上见过。
    脚注后面要空一行再写正文喔 ↩︎

posted @ 2025-04-07 20:31  longlong688  阅读(45)  评论(2)    收藏  举报