Markdown 的基础使用

最新推荐文章于 2024-11-08 12:15:20 发布

wxl_344600977

最新推荐文章于 2024-11-08 12:15:20 发布

阅读量168

点赞数

分类专栏： Markdown 文章标签： markdown

本文链接：https://blog.csdn.net/wxl_344600977/article/details/105483469

版权

Markdown 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Markdown 是一个 Web 上使用的文本到 HTML 的转换工具，可以通过简单、易读易写的文本格式生成结构化的 HTML 文档。目前 github、Stackoverflow 等网站均支持这种格式.

官方文档

Markdown 文件要以.md或者.markdown为后缀名

Markdown 文件可以导出为 word,html,pdf,image…

MarkdownPad2, Typora 是通用的 Markdown 编辑工具
Markdown 支持和一些html标签一起使用

接下来描述一下常用的一些语法：

1. 标题样例

使用 # 来标记，# 与内容保留一个空格;可以选择性的闭合;
多一个#代表降一级（即字号小一级），总共有 6 级；分别对应h1 -h6：

标题样例:

# 这是一级标题
## 这是二级标题
...
###### 这是六级标题

题效果：

这是一级标题

这是二级标题

这是三级标题

这是四级标题

这是五级标题

这是六级标题

2. 字体样例

斜体

斜体的内容需要使用一对下划线 _ 或者一对星号 * 进行包裹(部分编辑器会强制转换 _ 包裹);
标签与内容之间不能有空格;如果内容中含有相关标签内容需要使用 \ 进行转义与编程语言相似;
在.md文件中可以直接使用部分标签

斜体样例： _斜体_ 或者 *斜体* 或者 斜体

斜体效果：斜体, 斜体, 斜体

加粗

加粗的内容需要使用两个星号 ** 或者两个下划线 __ 进行包裹(部分编辑器会强制转换 ** 包裹)
标签与内容之间不能有空格;如果内容中含有相关标签内容需要使用 \ 进行转义与编程语言相似;
当页面加载时会被转成 html 中 标签

粗体样例： **粗体** 或者 __粗体__ 或者 粗体

粗体效果：粗体, 粗体, 粗体

斜体加粗

斜体加粗的内容需要使用两个星号和一个下划线 **_ 进行对称包裹;
标签与内容之间不能有空格;如果内容中含有相关标签内容需要使用 \ 进行转义与编程语言相似;

斜体加粗样例： **_斜体加粗_** 或者 ***斜体加粗*** 或者 ___斜体加粗___

斜体加粗效果：斜体加粗, 斜体加粗, 斜体加粗

删除线

增加删除线的内容需要使用两对波浪号 ~~ 进行包裹
标签与内容之间不能有空格;如果内容中含有相关标签内容需要使用 \ 进行转义与编程语言相似;

删除线样例：~~删除线~~

删除线效果：~~删除线~~
下划线

下划线是使用前端标签的方式

下划线样例：下划线
下划线效果：下划线

注解

添加注解形式的文本

注解文字样例：这里是一个 [^Markdown]:一种标记语言

注解文字效果：

这里是一个 ¹

3. 区块引用样例

区块引用，就是描述内容标记为一个模块;Markdown 标记区块引用是使用 > 的引用方式
区块里面可以嵌套使用其他的样式

区块应用样例：

> 1. 这是一段详细的描述...
> 2. 这是描述的内部的引用...
> > 这是描述的内部的引用...

效果如下：

这是一段详细的描述…
这是描述的内部的引用…

这是描述的内部的引用…

4. 分割线样例

一条浅灰色的实线，使用三个及以上数量的星号***或者三个及以上数量减号---或者三个及以上数量下划线___进行标识,部分编辑器强制变更为减号，依据当前位置上下文环境；注意该行内不能有其他的元素

例如：

    ***
    ---
    ___

效果如下：

5. 图片样例

图片加载至支持使用网络图片,使用![alt](image_url "title"),和超链接有些相似,相对超链接就是增加了一个 !进行标识;

注意: url与title之间不需要加,

图片样例：

![This is image](http://inews.gtimg.com/newsapp_match/0/359390627/0 "这是一张图片!")

图片效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UllGXp6C-1586745758669)(http://inews.gtimg.com/newsapp_match/0/359390627/0 “这是一张图片!”)]

6. 超链接样例

使用文字描述，支持点击进行跳转，使用 [desc](url "title"),或者直接给出(url)和图片有些相似;
当页面加载时会被转成 html 中 <a> 标签

注意: url与title之间不需要,

超链接样例:

[Typora官网](https://typora.io/ "Typora官网")
或者
<https://typora.io/>

超链接效果：

Typora 官网

https://typora.io/

7. 列表样例

有序列表样例

有序列表：使用 1.,2.,3.,…,注意序号和内容之间需要空格分隔;

有序列表样例：
```
1. title
2. font
3. image
```
有序列表效果：
1. title
2. font
3. image
无序列表样例

无序列表: +,-,*,…排下去，不需要排序，部分编辑器会自动强制，注意序号和内容之间需要空格分隔;

无序列表样例:
```
- 超链接
* 代码
- 逻辑条件
```
无序列表效果：
- 超链接
- 代码
- 逻辑条件

8. 代码样例

代码样式有两种:

单行代码和多行代码(两者的区别就是多行样式中区分间距和换行，保留代码块的样式，而单行则忽略);

单行代码：使用一对反向单引号 `` 包裹起来; 当页面加载时会被转成html中p` 标签;

`This is a example ......`

单行代码效果:

This is a example ......

多行代码：使用三对反向单引号```包裹起来;这种模式下支持多语言：c，java，php，js，python…几乎所有开发语言)

```java     // 这里指定代码的语言
public static void main(String[] args){
    System.out.print("Hello world !")
}

多行代码效果：

public static void main(String[] args){
   System.out.print("Hello world !")
}

9. 表格

表格使用 | tab | tab | tab |...|声明表头字段；
表格使用 | :-- | :-: | --: |...|申明表单中对应列中的内容对其方式,冒号在左侧即左对齐，在右侧即右对齐，在两侧即居中；
表格使用 |value|value|value|...|插入数据；

表格样例：

| name   | age | gender | user_info                   |
| :----  | --: | :----: | :---------------------------|
| Jack   |  18 |   男   | 高高高 de 一批............... |
| Leo    |  10 |   女   | 富富富 de 一批............... |
| Suxan  |  28 |   男   | 帅帅帅 de 一批............... |

表格效果：

name	age	gender	user_info
Jack	18	男	高高高 de 一批…
Leo	10	女	富富富 de 一批…
Suxan	28	男	帅帅帅 de 一批…

10. 流程图

我擦，这个好强大…直接看例子：不过 github 好像不支持显示

```mermaid
flowchat
st=>start: 开始
op=>operation: My Operation
cond=>condition: Yes or No?
e=>end
st->op->cond
cond(yes)->e
cond(no)->op
&```

效果：

工具：推荐使用`typora`,官网下载下滑至"Download" module 选择对应的版本

块与嵌套：

Title

This is title : A;

content;

content;
content;

This is title : B

content;

content;

content;

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AeDekzmW-1586745758672)(https://tse1-mm.cn.bing.net/th?id=OIP.uUT5wt6VDHJ7zAFDru9IvQHaHa&w=156&h=160&c=8&rs=1&qlt=90&pid=3.1&rm=2)]

This is title : c

链接content;