前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Markdown语法规范

Markdown语法规范

作者头像
爱编程的小明
发布2022-09-06 14:59:41
1.7K0
发布2022-09-06 14:59:41
举报
文章被收录于专栏:小明的博客
  1. 文字编辑
    1. 对齐方式和文本字体大小
    2. 换行
    3. 上下标
    4. 高亮
    5. 表格
  2. 图片插入
    1. 多张图片的并排处理
  3. 网页插入
    1. 折叠列表
    2. 表格
  4. 列表
  5. mermaid
    1. Flowchart
  6. 表格文件

文字编辑

对齐方式和文本字体大小

markdown实现文本对齐也可以借助内嵌html实现:

MARKUP

代码语言:javascript
复制
<p align="right">这是一个右对齐</p>
<p align="left">这是一个左对齐</p>
<center>这是一个左对齐</center>

换行

markdown换行有两种方式: 段内换行是两个空格加上一个回车 这是一个段内换行

段落换行则是直接一个回车

注意观察两种换行情境下行间距大小

上下标

可以使用上标标签和下标标签。 例如:

MARKUP

代码语言:javascript
复制
n<sup>2</sup>+b<sub>1</sub>n+8=0

n2+b1n+8=0

高亮

可以使用高亮标签。

MARKUP

代码语言:javascript
复制
这是<mark>高亮文本</mark>

这是高亮文本

除了文本高亮以外,还可以对文本的颜色进行修改,一般修改文本的颜色有两种方式:

MARKUP

代码语言:javascript
复制
<font color="#0099ff">十六进制颜色表示方式 #0099ff</font>
<font color="red">红色</font>

十六进制颜色表示方式 #0099ff 红色 就实用性来讲,感觉十六进制没有后边一种好用一些,一些常见的颜色都可以直接跟英文名得到。 一些不常用的颜色点这里

表格

也可以插入 html 的表格,这是一个表格转 html 的网站

图片插入

再插入图片位置的下方_Image Caption_插入斜体表示索引

多张图片的并排处理

借助html语言嵌入:

MARKUP

代码语言:javascript
复制
<table><tr>
   <td><img src=pic1.jpg border=0></td>
   <td><img src=pic2.jpg border=0></td>
</tr></table>

tr定义行,th定义表头,td定义列

网页插入

对于那些 Markdown 语法没有规定的情形,可以直接在 Markdown 里面使用 Html 语法。只有 2 点限制:(1)Html 的块级元素必须用空行和 Markdown 的内容分隔开。(2)Html 标签前后没有空格。

这是一个文档

折叠列表

利用markdown的网页插入功能,可以实现在markdown中拥有折叠列表:

折叠文本折叠代码块

主要使用的是`html5` 中的`details`标签

对上述进行灵活变通,还可以插入图片进入折叠列表

表格

列表

有序列表用1.来实现,通过回车可以实现自动编号。 这里介绍一下待办列表的写法

  • [x] 这是一个已办
  • [ ] 这是一个待办

mermaid

Flowchart

收藏夹里有一个在线编辑的网站可以用。 Live editor 一个最短的 mermaid 就像下边演示的这样,

MARKDOWN

代码语言:javascript
复制
graph LR
    node_name[内容]---|线上内容| node_name1{中括号内写内容}

渲染效果如下所示

MERMAID

代码语言:javascript
复制
graph LR
    node_name[内容]---|线上内容| node_name1{中括号内写内容}

第一行声明创建的图表类型,node_name 用来表示节点的名字,后边跟用{}、[]包裹着节点处的内容,然后‘—’表示节点之间的连接线段,长度用字符串长度代表,连接方式也在字符串中有所体现。最后||包裹的内容表示在连接线段上的内容,记得与节点声明隔一个空格。

表格文件

Markdown 的表格用‘|’表示列,用三个或者多个连字符并排表示列标题,常见的表格形式如下。通过调整引号进行单元格内容的对齐操作

MARKDOWN

代码语言:javascript
复制
| 列名 1 |  列名 2  | 列名三 |
| :----- | :------: | -----: |
| 左对齐 | 居中对齐 | 右对齐 |

显示效果如下所示:

列名 1

列名 2

列名三

左对齐

居中对齐

右对齐

另外需要注意的是两条‘|’的距离可以任意长,这个不会对显示内容有什么影响。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022-04-06,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 文字编辑
    • 对齐方式和文本字体大小
      • 换行
        • 上下标
          • 高亮
            • 表格
            • 图片插入
              • 多张图片的并排处理
              • 网页插入
                • 折叠列表
                  • 表格
                  • 列表
                  • mermaid
                    • Flowchart
                    • 表格文件
                    领券
                    问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档