Markdown usage tutorial
1. Markdown
Introduction
Markdown is a lightweight markup language that allows people to write documents in a plain text format that is easy to read and write.
Application
Currently, many websites use Markdown extensively to write help documents or to post messages on forums.For example: GitHub, Jianshu, Zhihu, etc.
Editor
It is recommended to use Typora, official website: https://typora.io/
2. Badge
what is a badge
A badge is a small and exquisite icon, usually with relevant text for auxiliary explanation. It can monitor data, jump links, etc., and is full of expressiveness.
It is common on the github project homepage, but it not only appears on the github project homepage, but can appear anywhere where pictures can be displayed.
Use of badges
- Used in
markdown
格式:
[](超链接地址) # 即超链接内部嵌套图片
语法：
[](https://github.com/xugaoyi)
Badge generation website: https://shields.io/
This document mainly introduces markdown and does not introduce too much about badges. Please click me for detailed introduction.
3. Set directory
After setting, the table of contents will be automatically generated based on hierarchical titles.
[TOC]Note: Github does not support it yet.
[TOC]
How to generate TOC on github: https://github.com/ekalinin/github-markdown-toc
Windows systems require tools based on golang: https://github.com/ekalinin/github-markdown-toc.go
If you have a GO language compilation environment, you can try to compile it yourself. If not, you can directly download the compiled binary file.
For example, Windows system 64-bit download: gh-md-toc.windows.amd64.tgz (386 is 32-bit, amd64 is 64-bit)
After downloading and decompressing, I found that it cannot be recognized without the suffix name. In fact, it is an exe file, so you only need to violently add .exe at the end and you can start using it happily.
How to use:
- First copy the .md document to the root directory of gh-md-toc.exe
- Open the system command line in this directory and enter the command: gh-md-toc.exe README.MD to generate the directory
- Just copy the generated directory to the .md file.
This is the directory generated by gh-md-toc:
- 1. Markdown
- 2. Badge
- 3. Set directory
- 4. Title
- Level 1 title
4. Title
# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题first level title
Second level title
Level 3 headings
Level 4 heading
Level 5 heading
Level 6 headings
5. Text
paragraph
Markdown paragraphs have no special format. Write the text directly. Use 2 Tabs when you need to indent the paragraph
font
*斜体文本*
或 _斜体文本_
**粗体文本**
或 __粗体文本__
***粗斜体文本***
或 ___粗斜体文本___italic text
italic text
Bold text
Bold Text
Bold italic text
Bold italic text
strikethrough
If you want to add a strikethrough to the text on the paragraph, you only need to add two wavy lines ~~ at both ends of the text. An example is as follows:
~~BAIDU.COM~~BAIDU.COM
Underline
Underlining can be achieved through the HTML <u> tag:
<u>带下划线的文本</u>Underlined text
text highlight
Text highlighting can highlight part of the text within a line, using a pair of backticks.
`html` `css` `javascript`html css javascript
divider
You can use more than three asterisks, minus signs, and underscores in a line to create a separator line, and there can be no other things in the line.You can also insert spaces between asterisks or minus signs.Each of the following writing methods can create a dividing line:
***
*****
- - -
----------Footnote
Footnotes are additional explanations of the text.
[^变量]
在文档结尾或其他位置給变量赋值：
[^变量]: 注明框内显示的内容
鼠标移到这里> [^哈喽]
[^哈喽]: 注明框内显示的内容Note: Not supported in some online previews
Move the mouse here> [^哈喽]
6. List
unordered list
Use asterisk *, plus sign + or minus sign - as list markers:
* 第一项
* 第二项
+ 第一项
+ 第二项
- 第一项
- 第二项- first item
- Second item
ordered list
Use numbers followed by a . sign to indicate
1. 第一项
2. 第二项- first item
- Second item
Collapse list
<details>
<summary>点我打开关闭折叠</summary>
折叠内容
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</details>Note: Markdown code written in the <details> tag is invalid. HTML code can be written, such as ul>li, table, etc.
Click me to open and close the fold
Collapse content- 1
- 2
- 3
Folding containing table
| Category | Examples |
|---|---|
| Personal pronoun-nominative case | I, you, he, she, they, we |
| Personal pronoun-objective | me, you, him, her, them, us |
| Possessive pronoun | my, his, your, their, hers |
| Demonstrative pronoun | this, that, these, those |
| Reflexive pronoun | myself, himself, themselves, yourself, herself |
| Interrogative pronouns | who, what, which |
| Indefinite pronoun | some, many, both, both, any |
| Relative pronoun | Which... thing, who... person, that... person or thing, who, that guides the attributive clause |
| Mutual pronouns | each other, one another |
| Connecting pronoun | who,whom,whose,what,which,whatever,whichever,whoever,whomever |
| Alternative words | one (singular), ones (plural) |
List with checkboxes
* [x] 第一项
* [ ] 第二项
* [ ] 第三项Note: Not supported in some online previews
[x] first item
[ ] Second item
[ ] The third item
List nesting
1. 第一项：
- 第一项嵌套的第一个元素
- 第一项嵌套的第二个元素
2. 第二项：
- 第二项嵌套的第一个元素
- 第三层嵌套- first item
- Nesting 1
- Nesting 2
- Second item
- Nesting 1
- Nesting 2
- Nesting 1
7. Block reference
A block quote is made by using the > symbol at the beginning of the paragraph, followed by a space symbol:
> 区块引用block reference
Enter key automatically extends block in Typora
Block nesting
> 第一层
> > 第二层
> > > 第三层first floor
second floor
third floor
Use list in block
> 区块中使用列表
> 1. 第一项
> 2. 第二项
> * 111
> * 222Use list in block
- first item
- Second item
- 111
- 222
Use blocks in lists
* 第一项
> 区块
* 第二项first item
block
block
Second item
8. Code
If it is a code fragment in a paragraph, you can wrap it in backticks (`), example:
`alert()`alert()
code block
Use three backticks ``` to wrap a piece of code and specify a language (or not specify it). After specifying the code language, the color of the code will be highlighted.
This code block is an example:
```javascript
function test() {
alert('test')
}
```Effect:
function test() {
alert('test')
}9. Links
Format:
[链接名称](链接地址)
[链接名称](链接地址,可选的alt)
或
<链接地址>Example:
[百度](http://www.baidu.com,'百度')Directly display the link address:
<http://www.baidu.com>variable link
Links can be replaced by variables, with variable addresses attached at the end of the document or elsewhere:
这个链接用 1 作为网址变量 [Google][1]
这个链接用 baidu 作为网址变量 [Baidu][baidu]
然后在文档的结尾或其他位置给变量赋值（网址）
[1]: http://www.google.com/
[baidu]: http://www.baidu.com/This link uses 1 as the URL variable Google
This link uses baidu as the URL variable Baidu
Using internal links in Github repositories
可使用相对路径（前提是有该路径下的文件）
[test](test.md)[test](./md-img/test.md)
anchor link
Each title in this document is an anchor point, similar to the HTML anchor point (#)
[Markdown](#Markdown)Note: When github anchors a title containing punctuation marks, it will ignore the punctuation marks. In this page, if you write like this, you will not be able to jump: [ link ](#九、链接) Correct way to write: [ link ](#九链接)
10. Pictures
The difference from a link is that there is an exclamation mark ! in front of it.
Of course, you can also use variables for image addresses like links:
这里链接用 img 作为图片地址变量
然后在文档的结尾或其他位置给变量赋值（图片地址）
![RUNOOB][img]
[img]: https://raw.githubusercontent.com/xugaoyi/image_store/master/blog/md_logo.png
Picture width and height
If you want to set the image width and height as follows, you can use the <img> tag.
<img src="https://raw.githubusercontent.com/xugaoyi/image_store/master/blog/md_logo.png" width="50px" height="30px">Relative paths and using images in Github
Whether it is locally or in the same GitHub repository, if the image exists, you can use relative path.
Relative path image:
If you reference images from other GitHub repositories on GitHub, you must pay attention to the address format: 仓库地址/raw/分支名/图片路径 or https://raw.githubusercontent.com/用户名/仓库名/分支名/图片路径
或
11. Table
When making a table, use | to separate different cells, and use - to separate the header and other rows.
| 表头 | 表头 |
| ---- | ---- |
| 单元格 | 单元格 |
| 单元格 | 单元格 || Header | Header |
|---|---|
| cell | cell |
| cell | cell |
Alignment
- -: Set content and title bar to right alignment
- :- Set content and title bar to left alignment
- :-: Set the content and title bar to be centered
| 左对齐 | 右对齐 | 居中对齐 |
| :-----| ----: | :----: |
| 单元格 | 单元格 | 单元格 |
| 单元格 | 单元格 | 单元格 || Align left | Align right | Align center |
|---|---|---|
| cell | cell | cell |
| cell | cell | cell |
12. Emoji expression pack
Add colons before and after the English name of Emoji. On Typore, enter the colon first and then the first letter to get the expression prompt.
:smirk:💋 😸🙈🐴 😏😊😃😄 ☀️
For more emoticon names, please see: Emoji Pack List
13. Other techniques
Supported HTML elements
Tags that are not covered by Markdown syntax can be written directly in HTML in the document.
Currently supported HTML elements are: <kbd> <b> <i> <em> <sup> <sub> <br> and so on, such as:
使用 <kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>Del</kbd> 重启电脑Use Ctrl+Alt+Del to restart your computer
I use the bold font of the b tag
escape
Markdown uses many special symbols to express specific meanings. If you need to display specific symbols, you need to use backslash escape characters:
**未转义星号显示加粗**
\*\* 转义显示星号 \*\*Unescaped asterisks appear bold ** Escape and display asterisks **
Markdown supports the following symbols preceded by a backslash to help insert ordinary symbols:
\ 反斜线
` 反引号
* 星号
_ 下划线
{} 花括号
[] 方括号
() 小括号
# 井字号
+ 加号
- 减号
. 英文句点
! 感叹号*** The following parts are not supported in Github or other online previews ***
mathematical formula
When you need to insert a mathematical formula into the editor, you can do so by wrapping the mathematical formula in TeX or LaTeX format with two dollar signs $$.After submission, the Q&A and article pages will load Mathjax as needed to render the mathematical formulas.Such as:
$$
\mathbf{V}_1 \times \mathbf{V}_2 = \begin{vmatrix}
\mathbf{i} & \mathbf{j} & \mathbf{k} \\
\frac{\partial X}{\partial u} & \frac{\partial Y}{\partial u} & 0 \\
\frac{\partial X}{\partial v} & \frac{\partial Y}{\partial v} & 0 \\
\end{vmatrix}
$$tep1}{\style{visibility:hidden}{(x+1)(x+1)}}
$$$$ \mathbf{V}_1 \times \mathbf{V}_2 = \begin{vmatrix} \mathbf{i} & \mathbf{j} & \mathbf{k} \ \frac{\partial X}{\partial u} & \frac{\partial Y}{\partial u} & 0 \ \frac{\partial X}{\partial v} & \frac{\partial Y}{\partial v} & 0 \ \end{vmatrix} $$
chart
```chart
,Budget,Income,Expenses,Debt
June,5000,8000,4000,6000
July,3000,1000,4000,3000
Aug,5000,7000,6000,3000
Sep,7000,2000,3000,1000
Oct,6000,5000,4000,2000
Nov,4000,3000,5000,
type: pie
title: Monthly Revenue
x.title: Amount
y.title: Month
y.suffix: $
```
```mermaid
sequenceDiagram
A->>B: 是否已收到消息？
B-->>A: 已收到消息
```Note: Not supported in Typora
flowchart
语法：
```mermaid
graph TD
A[模块A] -->|A1| B(模块B)
B --> C{判断条件C}
C -->|条件C1| D[模块D]
C -->|条件C2| E[模块E]
C -->|条件C3| F[模块F]
```Flow chart related articles:
https://www.jianshu.com/p/b421cc723da5
http://www.imooc.com/article/292708
Timing diagram
```mermaid
sequenceDiagram
A->>B: 是否已收到消息？
B-->>A: 已收到消息
```Gantt chart
```mermaid
gantt
title 甘特图
dateFormat YYYY-MM-DD
section 项目A
任务1 :a1, 2018-06-06, 30d
任务2 :after a1 , 20d
section 项目B
任务3 :2018-06-12 , 12d
任务4 : 24d
```