发布于 由kailjava

markdown – How-to-write-a-blog-in-markdown

title: 如何使用markdown语法来写文章
toc: true
tags: markdown
top:
abbrlink: e293b68b
date: 2021-01-02 22:55:54
categories:

  • Markdown 是一种轻量级标记语言，它允许人们使用易读易写的纯文本格式编写文档。
  • Markdown 语言在 2004 由约翰·格鲁伯（英语：John Gruber）创建。
  • Markdown 编写的文档可以导出 HTML 、Word、图像、PDF、Epub 等多种格式的文档。
  • Markdown 编写的文档后缀为 .md, .markdown。

[TOC]

一. Markdown标题

1.使用=和-标记一级和二级标题

2.也可以使用

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

随着#的数量增加依次标记对应层级的标题

二. 段落格式

1.段落:

换行是使用两个以上空格然后回车

2.字体:

2.1 斜体

*斜体*
斜体

2.2 粗体

**粗体**或__粗体__
粗体 或 粗体
***粗斜体***或 ___粗斜体___
粗斜体 或 粗斜体

2.3 字体更换

这是楷体字

<font face="楷体">这是楷体字</font>

2.3 大小更换

这是宋体字

<font face="宋体" size=8>这是宋体字</font>

2.4 颜色替换

在html语言中,颜色是用color来表示:

颜色

<font color=blue size=69>颜色</font>

2.5 标记文本

==标记文本==

3.分隔线:

用三个以上的星号,减号或底线来完成
***

---

___

4.波浪线:

如果要给段落上的文字添加删除线,可以在文字两端加上两个~~;

删除线

5.下划线:

<u>文本</u>
文本

6.脚注:


一个具有注脚的文本。[^1]

[^1]: 注脚的解释

一个具有注脚的文本。^1

6.上标和下标

kailjava:上标
kailjava:下标

kailjava:<sup>上标</sup>  
kailjava:<sub>下标</sub>

H~2~O is是液体。

2^10^ 运算结果是 1024。

H~2~O is是液体。

2^10^ 运算结果是 1024。

7.加空格和回车

空 格 空格
空&nbsp;格&nbsp;空格
回车
回
车

回车<br/> 回<br/>车

8.折叠

标题

被折叠内容

标题

被折叠内容

    <details>
    <summary><font color=darkred>标题</font></summary>
    被折叠内容
    </details>

    <details><summary><font color=darkred>标题</font></summary>
    被折叠内容
    </details>

9.居中

文字居中

<center>文字居中</center>

三. 列表

1.无序列表:

在文字前加上*,+或-,且需要在这些标记后面添加一个空格;

  • 列表1
    * 列表1
  • 列表2
    + 列表2
  • 列表3
    - 列表3

    2.有序列表:

    使用数字加上.号来表示,如1.;

    1. 列表1
      1. 列表1

3.列表嵌套:

只需要在字列表的选项前添加四个空格即可;

  1. 列表1
    • 列表2
    • 列表3

1. 列表1
四个空格* 列表2
四个空格+ 列表3

4. 列表综合应用及计划待完成列表

  • 项目
    • 项目
    • 项目
  1. 项目1
  2. 项目2
  3. 项目3
  • [ ] 计划任务
  • [x] 完成任务
- 项目
  * 项目
    + 项目

1. 项目1
2. 项目2
3. 项目3

- [ ] 计划任务
- [x] 完成任务

5. 注释

Markdown将文本转换为 HTML。

*[HTML]: 超文本标记语言

Markdown将文本转换为 HTML。

*[HTML]:   超文本标记语言

四. 区块

1.区块引用

是在段落开头加上>符号和一个空格即可,区块引用可以区块嵌套,或和列表嵌套;

区块1

>区块1

区块2

区块3

区块4

  1. 区块有序列表1
    • 区块无序列表2 
>区块2  
>>区块3  
>>>区块4  
>>>1. 区块有序列表1  
>>>* 区块无序列表2

五. 代码

1.段落上的一个函数或片段

可以用反引号把它包起来,要打反引号可以在英文状态下点击Esc下面的键;

System.out.println(""HelloWorld!");
`System.out.println(""HelloWorld!")`

2.区块代码

可以使用三个反引号在前后包住代码,第一行反引号后面可以加上语言类型也可以不加;

#include<stdio.h>
int main(){
    printf("HelloWorld!n");
    return 0;
}
```C
#include<stdio.h>
int main(){
    printf("HelloWorld!n");
    return 0;
}
```

六. 链接

1.链接格式为:[链接名称](链接地址)或[链接名称]<链接地址>

B站

七. 图片

1.格式:![属性文本](图片地址)

钢铁侠

2.设置图片大小,对齐:

格式如下,只要在<img src="" width=的后面加上想改变的大小数字即可,图片左对齐,右对齐和居中:格式如下,只要在<div align=后加上left,right或center即可;:

<div align=center>
<img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2684081058,936885281&fm=26&gp=0.jpg" width=200""> 
</div>

八. 表格

1.用|来分隔不同的单元格,使用-来分隔表头和其他行;

表头 表头
单元格 单元格
单元格 单元格

2.对齐方式:

-:设置内容和标题栏居右对齐;
:-设置内容和标题栏居左对齐;
:-:设置内容和标题栏居中对齐;

左对齐 右对齐 居中对齐
单元格 单元格 单元格
单元格 单元格 单元格

九.markdown页面目录跳转到指定标题

格式:

目录位置: <a href="#自定义标签1">自定义显示内容1</a>

要跳转去的位置: <span id="自定义标签1">自定义显示内容2</span>

点击跳转到狗蛋那里

<a href="#狗蛋">点击跳转到狗蛋那里</a>

点击跳转到二愣子那里

<a href="#二愣子">点击跳转到二愣子那里</a>

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

这里是狗蛋

<span id="狗蛋">这里是狗蛋</span>

2

2

2

2

2

2

2

2

2

2

2

2

2

2

2

2

这里是二愣子

<span id="二愣子">这里是二愣子</span>

十. 插入其他图

  1. 插入甘特图
gantt
        dateFormat  YYYY-MM-DD
        title Adding GANTT diagram functionality to mermaid
        section 现有任务
        已完成               :done,    des1, 2014-01-06,2014-01-08
        进行中               :active,  des2, 2014-01-09, 3d
        计划中               :         des3, after des2, 5d
[参考文档](https://mermaid-js.github.io/mermaid/#/gantt)
​```mermaid
gantt
        dateFormat  YYYY-MM-DD
        title Adding GANTT diagram functionality to mermaid
        section 现有任务
        已完成               :done,    des1, 2014-01-06,2014-01-08
        进行中               :active,  des2, 2014-01-09, 3d
        计划中               :         des3, after des2, 5d
​```
  1. 插入UML图
sequenceDiagram
张三 ->> 李四: 你好！李四, 最近怎么样?
李四-->>王五: 你最近怎么样，王五？
李四--x 张三: 我很好，谢谢!
李四-x 王五: 我很好，谢谢!
Note right of 王五: 李四想了很长时间, 文字太长了<br/>不适合放在一行.

李四-->>张三: 打量着王五...
张三->>王五: 很好... 王五, 你怎么样?
[参考文档](https://mermaid-js.github.io/mermaid/#/sequenceDiagram)
​```mermaid
sequenceDiagram
张三 ->> 李四: 你好！李四, 最近怎么样?
李四-->>王五: 你最近怎么样，王五？
李四--x 张三: 我很好，谢谢!
李四-x 王五: 我很好，谢谢!
Note right of 王五: 李四想了很长时间, 文字太长了<br/>不适合放在一行.

李四-->>张三: 打量着王五...
张三->>王五: 很好... 王五, 你怎么样?
​```
  1. 插入Mermaid流程图
graph LR
A[长方形] -- 链接 --> B((圆))
A --> C(圆角长方形)
B --> D{菱形}
C --> D
[参考文档](https://mermaid-js.github.io/mermaid/#/flowchart?id=graph)
​```mermaid
graph LR
A[长方形] -- 链接 --> B((圆))
A --> C(圆角长方形)
B --> D{菱形}
C --> D
​```
  1. 插入Flowchart流程图
flowchat
st=>start: 开始
e=>end: 结束
op=>operation: 我的操作
cond=>condition: 确认？

st->op->cond
cond(yes)->e
cond(no)->op
[参考文档](http://flowchart.js.org/)
​```mermaid
flowchat
st=>start: 开始
e=>end: 结束
op=>operation: 我的操作
cond=>condition: 确认？

st->op->cond
cond(yes)->e
cond(no)->op
​```
  1. 插入classDiagram类图
classDiagram
    Class01 <|-- AveryLongClass : Cool
    <<interface>> Class01
    Class09 --> C2 : Where am i?
    Class09 --* C3
    Class09 --|> Class07
    Class07 : equals()
    Class07 : Object[] elementData
    Class01 : size()
    Class01 : int chimp
    Class01 : int gorilla
    class Class10 {
        >>service>>
        int id
        size()
    }
[参考文档](https://mermaid-js.github.io/mermaid/#/classDiagram)
​```mermaid
classDiagram
    Class01 <|-- AveryLongClass : Cool
    <<interface>> Class01
    Class09 --> C2 : Where am i?
    Class09 --* C3
    Class09 --|> Class07
    Class07 : equals()
    Class07 : Object[] elementData
    Class01 : size()
    Class01 : int chimp
    Class01 : int gorilla
    class Class10 {
        >>service>>
        int id
        size()
    }
​```

发表评论

电子邮件地址不会被公开。 必填项已用*标注