Markdown骚操作｜字体颜色、字体背景、流程图一网打尽【建议收藏】 |
您所在的位置：网站首页 › 画图工具怎么给文字加边框颜色 › Markdown骚操作｜字体颜色、字体背景、流程图一网打尽【建议收藏】 |
Markdown骚操作｜字体颜色、字体背景、流程图一网打尽【建议收藏】
|
本文二哥带领大家来学习一下Markdown文档编辑的那些高端操作。 推荐MD编辑器：Typora注：除最后一个图外，均可用于CSDN Markdown！ 注：文中代码块中给出书写格式，下方给出效果展示。 别犹豫了！先收藏吧！ 一、标题为了使段落展示的更加清晰，Markdown中设置了多级标题的表达形式，级别用#来表示，几个#就表示几级标题，代码形式如下： 注意#后面要有一个空格 # 一级标题 ## 二级标题 ### 三级标题示例如下： 一级标题 二级标题 三级标题 二、字体Markdown中提供了如下几种常用的字体格式。 斜体 *斜体* _斜体_斜体 斜体 粗体 **粗体** __粗体__粗体 粗体 粗斜体 ***粗斜体*** ___粗斜体___粗斜体 粗斜体 删除线 ~~删除线~~删除线 分割线 *** ---脚注 [^脚注]Typora展示如下： 除了markdown中自带的几种字体格式之外，我们还可以配合HTML代码进行字体的改变。 文本颜色 红色字体 绿色字体 蓝色字体红色字体 绿色字体 蓝色字体 字体格式 黑体字黑体字 文本大小 5号字5号字 组合使用 别犹豫了！点赞吧！别犹豫了！点赞吧！ 文本高亮显示 高亮显示高亮显示 添加背景颜色 搞点颜色 搞点颜色文本注音 当我们遇到生僻字或者为了突出某个字的时候可以使用注音的方式。 饕餮 tāo tiè饕餮 tāo tiè 下划线 下划线下划线 三、列表和板块为了使得排版更清晰，Markdown中提供了多种格式的列表和排版块供我们组合使用。 无序列表 注意符号后面要有一个空格 - 无序列表 * 无序列表 + 无序列表 无序列表 无序列表 无序列表有序列表 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添加图片（传统方式） 使用img添加图片 使用img添加图片的时候，width用于控制宽度，height用于控制高度，div align用于控制位置（left、center、right） 
添加表格 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 noUML时序图 ```mermaid sequenceDiagram 二哥->>女神: 你好吗?（请求） Note right of 女神: 女神的答复 Note left of 二哥: 二哥在等待回复 女神-->>二哥: 我很好，什么事？(响应) 二哥->>女神: 今天天气不错 女神-->>二哥:下雨呢，滚！ ``` 二哥 女神 你好吗?（请求） 女神的答复 二哥在等待回复 我很好，什么事？(响应) 今天天气不错 下雨呢，滚！ 二哥 女神UML时序图 ```mermaid %% 时序图例子,-> 直线，-->虚线，->>实线箭头 sequenceDiagram participant 二哥 participant 三哥 二哥->>四弟: 中午吃啥？ loop 吃啥呢？ 三哥->三哥: ***** end Note right of 二哥: 烤肉 火锅 麻辣烫... 三哥->>二哥: 你说吃啥! 二哥-->>三哥:你想 四弟->>三哥: 三哥吃啥? 三哥-->>四弟: 不知道! ``` 二哥 三哥 四弟 中午吃啥？ ***** 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中的显示如下： |
【本文地址】
今日新闻 |
推荐新闻 |