• 欢迎光临~

Markdown骚操作|字体颜色、字体背景、流程图一网打尽【建议收藏】

开发技术 开发技术 2021-09-01 260次浏览

本文二哥带领大家来学习一下Markdown文档编辑的那些高端操作。

  • 推荐MD编辑器:Typora

注:除最后一个图外,均可用于CSDN Markdown!
注:文中代码块中给出书写格式,下方给出效果展示。

别犹豫了!先收藏吧!

一、标题

为了使段落展示的更加清晰,Markdown中设置了多级标题的表达形式,级别用#来表示,几个#就表示几级标题,代码形式如下:

注意#后面要有一个空格

# 一级标题
## 二级标题
### 三级标题

示例如下:

一级标题

二级标题

三级标题


二、字体

Markdown中提供了如下几种常用的字体格式。

斜体

*斜体*
_斜体_

斜体
斜体


粗体

**粗体**
__粗体__

粗体
粗体


粗斜体

***粗斜体***
___粗斜体___

粗斜体
粗斜体


删除线

~~删除线~~

删除线


分割线

***
---


脚注

[^脚注]

Typora展示如下:
Markdown骚操作|字体颜色、字体背景、流程图一网打尽【建议收藏】


除了markdown中自带的几种字体格式之外,我们还可以配合HTML代码进行字体的改变。

文本颜色

<font color="red">红色字体</font>
<font color="green">绿色字体</font>
<font color="blue">蓝色字体</font>

红色字体
绿色字体
蓝色字体


字体格式

<font face="黑体">黑体字</font>

黑体字


文本大小

<font size=5>5号字</font>

5号字


组合使用

<font color="red" face="黑体" size=5>别犹豫了!点赞吧!</font>

别犹豫了!点赞吧!


文本高亮显示

<mark>高亮显示</mark>

高亮显示


添加背景颜色

<table><tr><td bgcolor="yellow">搞点颜色</td></tr></table>
搞点颜色

文本注音

当我们遇到生僻字或者为了突出某个字的时候可以使用注音的方式。

<ruby>饕餮 <rt>tāo tiè</rt></ruby>

饕餮 tāo tiè


下划线

<u>下划线</u>

下划线


三、列表和板块

为了使得排版更清晰,Markdown中提供了多种格式的列表和排版块供我们组合使用。

无序列表

注意符号后面要有一个空格

- 无序列表
* 无序列表
+ 无序列表
  • 无序列表
  • 无序列表
  • 无序列表

有序列表

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

嵌套列表

使用嵌套列表的时候需要在子列表的前面加上4个空格。

- 第一级
    - 第二级
  • 第一级
    • 第二级

区块引用

> 外层区块
> > 第一层区块
> > > 第二层区块

外层区块

第一层区块

第二层区块


片段代码块

Markdown中提供了能够随时在文本中添加片段代码块的方法。字符为键盘左上角的按键`。

`hello World`

hello World


代码块

Markdown中的代码块可以匹配几乎类型的代码样式。在使用的时候我们可以选择指定(也可不指定)对应的语言。

​```python
print('Hello World')
​```
print('Hello World')

公式块

对于数学相关学者来说,通常需要编写数学公式,在Markdown可以使用$$来作为公式块,在其中进行Latex类型公式的输入。

$y=x^2+1$

$$y=x^2+1$$

y = x 2 + 1 y=x^2+1 y=x2+1

y = x 2 + 1 y=x^2+1 y=x2+1


四、图片与表格

Markdown在提供了控制图片添加大小、位置的方法。

MD添加图片(传统方式)

![alt 属性文本](图片地址)

使用img添加图片

使用img添加图片的时候,width用于控制宽度,height用于控制高度,div align用于控制位置(left、center、right)

<img src="https://img-home.csdnimg.cn/images/20201124032511.png" width="400" height="192" div align=center>
Markdown骚操作|字体颜色、字体背景、流程图一网打尽【建议收藏】

添加表格

MD中添加表格的方式比较单一,添加表格的时候可以控制文字的对齐方式:

  • -: 设置内容和标题栏居右对齐。
  • :- 设置内容和标题栏居左对齐。
  • :-: 设置内容和标题栏居中对齐。
| 左对齐 | 右对齐 | 居中对齐 |
| :-----| ----: | :----: |
| 单元格 | 单元格 | 单元格 |
| 单元格 | 单元格 | 单元格 |
左对齐右对齐居中对齐
单元格单元格单元格
单元格单元格单元格

添加链接

这是二哥的主页: [二哥不像程序员](https://blog.csdn.net/qq_35164554?spm=1000.2115.3001.5343)

这是二哥的主页: 二哥不像程序员


五、流程图

很多人觉得Markdown的缺点就在于无法绘图,其实我们可以使用多种代码的组合进行多个流程图的绘制,示例如下:

横向流程图

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

纵向流程图

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

纵向标准流程图

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

横向标准流程图

​```mermaid
flowchat
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
​```
Created with Raphaël 2.3.0 开始框 处理框 判断框(是或否?) 输入输出框 结束框 子流程 yes no

UML时序图

​```mermaid
sequenceDiagram
二哥->>女神: 你好吗?(请求)
Note right of 女神: 女神的答复
Note left of 二哥: 二哥在等待回复
女神-->>二哥: 我很好,什么事?(响应)
二哥->>女神: 今天天气不错
女神-->>二哥:下雨呢,滚!
​```
二哥 女神 你好吗?(请求) 女神的答复 二哥在等待回复 我很好,什么事?(响应) 今天天气不错 下雨呢,滚! 二哥 女神

UML时序图

​```mermaid
%% 时序图例子,-> 直线,-->虚线,->>实线箭头
sequenceDiagram
participant 二哥
participant 三哥
二哥->>四弟: 中午吃啥?
loop 吃啥呢?
		三哥->三哥: *****
end
Note right of 
    二哥: 烤肉 火锅 <br/>麻辣烫...
    三哥->>二哥: 你说吃啥!
    二哥-->>三哥:你想
    四弟->>三哥: 三哥吃啥?
    三哥-->>四弟: 不知道!
​```
二哥 三哥 四弟 中午吃啥? ***** loop [吃啥呢?] 烤肉 火锅 麻辣烫... 你说吃啥! 你想 三哥吃啥? 不知道! 二哥 三哥 四弟

甘特图

​```mermaid
%% 语法示例
gantt
dateFormat  YYYY-MM-DD
title 软件开发甘特图
section 设计
需求:done, des1, 2021-09-01,2021-09-03
原型:active, des2, 2021-09-05, 2d
UI设计:des3, after des2, 5d
未来任务:des4, after des3, 5d
section 开发
准备:crit, done, 2021-09-01,24h
设计框架:crit, done, after des2, 2d
开发:crit, active, 3d
补充:crit, 5d
section 测试
功能测试:active, a1, after des3, 3d
压力测试:after a1  , 20h
测试报告: 48h
​```

Typora中的显示如下:
Markdown骚操作|字体颜色、字体背景、流程图一网打尽【建议收藏】

❤️ 整理不易,点个赞吧~❤️
喜欢 (0)