博客园 Markdown编辑器简要教程 

[TOC] 生成目录

目录

简介

在刚才的导语里提到，Markdown 是一种用来写作的轻量级「标记语言」，它用简洁的语法代替排版，而不像一般我们用的字处理软件 Word 或 Pages 有大量的排版、字体设置。它使我们专心于码字，用「标记」语法，来代替常见的排版格式。例如此文从内容到格式，甚至插图，键盘就可以通通搞定了。
目前来看，支持 Markdown 语法的编辑器有很多，包括很多网站（例如简书）也支持了 Markdown 的文字录入。Markdown 从写作到完成，导出格式随心所欲，你可以导出 HTML 格式的文件用来网站发布，也可以十分方便的导出 PDF 格式，这种格式写出的简历更能得到 HR 的好感。甚至可以利用 CloudApp 这种云服务工具直接上传至网页用来分享你的文章，全球最大的轻博客平台 Tumblr，也支持 Mou 这类 Markdown 工具的直接上传。

[go to chapter 1](* #简介)

背景色的设置按照十六进制颜色值：#54FF9F
`printf()` 函数

printf() 函数

	```
	//代码块
	asdsa
	```

//代码块
asdsa


# 一级标题

一级标题

## 二级标题

二级标题

### 三级标题

三级标题

#### 四级标题

四级标题

##### 五级标题
五级标题
###### 六级标题
六级标题
我展示的是一级标题
=================

我展示的是一级标题

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

我展示的是二级标题

#### 无序列表

* 1
* 2
* 3
* 4

无序列表

  • 1
  • 2
  • 3
  • 4
#### 有序列表

1. 1
2. 2
3. 3
4. 4

有序列表

  1. 1
  2. 2
  3. 3
  4. 4
<br> #空行


>引用

引用

链接1


[链接名称(可自定义)](https://img2018.cnblogs.com/blog/1465922/201906/1465922-20190601102708557-930423812.jpg)

链接名称(可自定义)

链接2

<https://www.cnblogs.com/vikeykuo/p/10955521.html>

https://www.cnblogs.com/vikeykuo/p/10955521.html

**粗体**

粗体

**** #横杠

*斜体*

斜体

_______ #横杠

~~删除线~~ #删除线

删除线

横杠


----
***
* * *  
*****  
- - -  
----------

单元格

header 1 | header 2 | header 3
-------- | -------- | --------|
col 1 | col 2 | col 3
col 1 | col 2 | col 3

|  表头   | 表头  |
|  ----  | ----  |
| 单元格  | 单元格 |
| 单元格  | 单元格 |

| 左对齐 | 右对齐 | 居中对齐 |
| :-----| ----: | :----: |
| 单元格 | 单元格 | 单元格 |
| 单元格 | 单元格 | 单元格 |

表格title

header 1 header 2 header 3
col 1 col 2 col 3
col 1 col 2 col 3
表头 表头
单元格 单元格
单元格 单元格
左对齐 右对齐 居中对齐
单元格 单元格 单元格
单元格 单元格 单元格 
var sub = b - a;
$("#y_btn").click(function(event) {  
        /* Act on the event */
        var sub = b - a;
    });

html 样式

<font face="黑体">我是黑体字</font><br/>
<font face="微软雅黑">我是微软雅黑</font><br/>
<font face="fantasy">我是"fantasy"字体</font><br/>
<font color=#dd0000>我是红色</font><br/>
<font color=#00dd00>浅绿色文字</font><br/>
<font color=#006600>深绿色文字</font><br/>
<font color=Blue>我是蓝色</font><br/>
<font size=5>我是尺寸</font><br/>
<font face="宋体" color=green size=6>我是宋体，绿色，尺寸为6</font>

我是黑体字

我是微软雅黑

我是"fantasy"字体

我是红色

浅绿色文字

深绿色文字

我是蓝色

我是尺寸

我是宋体，绿色，尺寸为6

文本样式

*斜体文本*
-斜体文本-
**粗体文本**
--粗体文本--
***粗斜体文本***
===粗斜体文本===
<u>带下划线文本</u>

斜体文本
斜体文本
粗体文本
粗体文本
粗斜体文本
粗斜体文本

带下划线文本

脚注

创建脚注格式类似这样 [^lab1]。
[^lab1]: 菜鸟教程 -- 学的不仅是技术，更是梦想！！！

创建脚注格式类似这样 [1]。

列表

* 第一项
* 第二项
* 第三项

* 第一项
* 第二项
* 第三项

* 第一项
* 第二项
* 第三项

1. 第一项
2. 第二项
3. 第三项

1. 第一项：
    * 第一项嵌套的第一个元素
    * 第一项嵌套的第二个元素
2. 第二项：
    * 第二项嵌套的第一个元素
    * 第二项嵌套的第二个元素  

> 区块引用
> 菜鸟教程
> 学的不仅是技术更是梦想

> 最外层
> > 第一层嵌套
> > > 第二层嵌套

> 区块中使用列表
>
> 1. 第一项
> 2. 第二项
>
> * 第一项
> * 第二项
> * 第三项

* 第一项
    > 菜鸟教程
    > 学的不仅是技术更是梦想
* 第二项

  • 第一项

  • 第二项

  • 第三项

  • 第一项

  • 第二项

  • 第三项

  • 第一项

  • 第二项

  • 第三项

  1. 第一项

  2. 第二项

  3. 第三项

  4. 第一项：

    • 第一项嵌套的第一个元素
    • 第一项嵌套的第二个元素

  5. 第二项：

    • 第二项嵌套的第一个元素
    • 第二项嵌套的第二个元素

区块引用
菜鸟教程
学的不仅是技术更是梦想

最外层

第一层嵌套

第二层嵌套

区块中使用列表

  1. 第一项
  2. 第二项
  • 第一项
  • 第二项
  • 第三项
  • 第一项

    菜鸟教程
    学的不仅是技术更是梦想

  • 第二项

图片

![RUNOOB 图标](https://img2018.cnblogs.com/blog/1465922/201906/1465922-20190601102708557-930423812.jpg)

![RUNOOB 图标](https://images.cnblogs.com/cnblogs_com/blogs/419219/galleries/2424665/o_241007090527_GUyygLHbIAAXhaz.jpg "RUNOOB")
<img src="https://img2018.cnblogs.com/blog/1465922/201906/1465922-20190601102708557-930423812.jpg" width="200%">

RUNOOB 图标

RUNOOB 图标

高级技巧

使用 <kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>Del</kbd> 重启电脑

使用 Ctrl+Alt+Del 重启电脑

#使用了很多特殊符号来表示特定的意义，如果需要显示特定的符号则需要使用转义字符，Markdown 使用反斜杠转义特殊字符
**文本加粗**
\*\* 正常显示星号 \*\*

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

#支持以下这些符号前面加上反斜杠来帮助插入普通的符号
\\   反斜线
\`   反引号
\*   星号
\_   下划线
\{\}  花括号
\[\]  方括号
\(\)  小括号
\#   井字号
\+   加号
\-   减号
\.   英文句点
\!   感叹号

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

公式

$$
\begin{Bmatrix}
   a & b \\
   c & d
\end{Bmatrix}
$$
$$
\begin{CD}
   A @>a>> B \\
@VbVV @AAcA \\
   C @= D
\end{CD}
$$

$$
f(x)=sin(x)+12
$$

<center>诶嘿</center>
<p align="left">诶嘿</p>
<p align="right">诶嘿</p>

<p align="right">$
f(x)=sin(x)+12
$</p>

\[\begin{Bmatrix} a & b \\ c & d \end{Bmatrix} \]

\[\begin{CD} A @>a>> B \\ @VbVV @AAcA \\ C @= D \end{CD} \]

\( f(x)=sin(x)+12 \)

\[f(x)=sin(x)+12 \]

\[f(x)=sin(x)+12 \]

布局

<center>诶嘿</center>
<p align="left">诶嘿</p>
<p align="right">诶嘿</p>

<p align="right">$
f(x)=sin(x)+12
$</p>
诶嘿

诶嘿

诶嘿

$ f(x)=sin(x)+12 $

流程图

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

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

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

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

\```mermaid

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

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

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

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

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标准时序图样例：

\```mermaid

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

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

8、甘特图样例：

\```mermaid

%% 语法示例
        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

\```
%% 语法示例 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

高级链接

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

  [1]: https://www.runoob.com/
  [runoob]: http://www.runoob.com/
  
  [跳转1](#简介) 

1.1 [跳转2](#二级标题) 


1.2 假设这里有一个作息时间表  <span name="anchor">作息时间表</span> balabalabala--- 这里我们引用这个[作息时间表](#表格title)

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

跳转1

1.1 跳转2

1.2 假设这里有一个作息时间表 作息时间表 balabalabala--- 这里我们引用这个作息时间表

  1. 菜鸟教程 -- 学的不仅是技术，更是梦想！！！ ↩︎

posted @ 2024-10-07 15:07  WorldZhu  阅读(5)  评论(0)  编辑  收藏  举报