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

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

一、标题

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

注意#后面要有一个空格

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

示例如下:

一级标题

二级标题

三级标题

二、字体

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

斜体

*斜体*
_斜体_

斜体

斜体


粗体

**粗体**
__粗体__

粗体

粗体


粗斜体

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

粗斜体

粗斜体


删除线

~~删除线~~

删除线


分割线

***
---

脚注

[^脚注]

image.png

除了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>

image.png

下划线

<u>下划线</u>

下划线


三、列表和板块

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

无序列表

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

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


有序列表

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


嵌套列表

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

- 第一级
    - 第二级

image.png


区块引用

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

image.png

片段代码块

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

`hello World`

hello World


代码块

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

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

公式块

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

$y=x^2+1$
$$y=x^2+1$$

image.png

四、图片与表格

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>

添加表格

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

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

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

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

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

image.png

添加链接

这是二哥的主页: [二哥不像程序员](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[横向流程图]
​```

image.png

纵向流程图

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

image.png

纵向标准流程图

​```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
​```

image.png

横向标准流程图

​```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
​```

image.png

UML时序图

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

image.png

UML时序图

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

image.png

甘特图

​```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中的显示如下:

128.png

相关文章
|
2月前
markdown字体大小颜色样式详解
【4月更文挑战第10天】Markdown不直接支持字体样式设置,但可通过HTML标签实现。如用`<font face="字体名">`改变字体,`<font color=颜色值>`改变颜色,`<font size=数字>`调整大小。组合使用如`<font face="黑体" color=green size=5>`可同时设置。注意并非所有Markdown解析器都支持这些语法,使用前需查阅解析器文档。
47 1
|
8月前
markdown字体大小颜色样式详解
markdown字体大小颜色样式详解
126 1
|
2月前
|
计算机视觉
Markdown编辑器常用颜色背景指南(附颜色与代码展示,cv即可用)
Markdown编辑器常用颜色背景指南(附颜色与代码展示,cv即可用)
|
8月前
|
SQL JavaScript
markdown字体大小颜色样式
markdown字体大小颜色样式
Markdown (CSDN) MD编辑器(二)- 文本样式(更改字体、字体大小、字体颜色、加粗、斜体、高亮、删除线)
Markdown (CSDN) MD编辑器(二)- 文本样式(更改字体、字体大小、字体颜色、加粗、斜体、高亮、删除线)
947 0
Markdown (CSDN) MD编辑器(二)- 文本样式(更改字体、字体大小、字体颜色、加粗、斜体、高亮、删除线)
Typora、Markdown中的公式,颜色汇总(二)
由于写博客经常使用一些数学公式以及基础的 Markdown语法,网上一些博客虽然写的是大全汇总,但也总是有一些是我找不到的,一直去进行查找也是很麻烦的,本文是针对我个人的使用公式习惯进行一个汇总,也基本涵盖了大部分的使用技巧,同时本文也包含一些初等的 HTML 的知识,建议收藏本文,在需要的时候翻出来看
309 0
Typora、Markdown中的公式,颜色汇总(二)
Typora、Markdown中的公式,颜色汇总(一)
由于写博客经常使用一些数学公式以及基础的 Markdown语法,网上一些博客虽然写的是大全汇总,但也总是有一些是我找不到的,一直去进行查找也是很麻烦的,本文是针对我个人的使用公式习惯进行一个汇总,也基本涵盖了大部分的使用技巧,同时本文也包含一些初等的 HTML 的知识,建议收藏本文,在需要的时候翻出来看
249 0
Typora、Markdown中的公式,颜色汇总(一)
|
2月前
|
程序员 Linux iOS开发
一款比Typora更简洁优雅的Markdown编辑器神器(完全开源免费)
一款比Typora更简洁优雅的Markdown编辑器神器(完全开源免费)
105 1
|
2月前
《使用「Markdown」编辑器的那些天 |CSDN编辑器测评》
《使用「Markdown」编辑器的那些天 |CSDN编辑器测评》
33 0
|
2月前
|
机器学习/深度学习 uml
Markdown编辑器用法保存自用
Markdown编辑器用法保存自用