Let the document easier to read and write - Markdown

A, Markdown Profile

If you use a long time github, but do not know what is Markdown, then you really need to look at the (in fact it is written in Markdown In this paper, this is a very useful and simple text editing skills, particularly the use of a Markdown editor later).

Markdown is a lightweight markup language, similar to HTML, by John Gruber: Founded in 2004 (English John Gruber). Markdown is committed to the creation of documents easier to read and therefore it is the readability of the highest standards. To this end, Markdown formatting without any labels and grammar, but only using simple tags (such as a # a space that represents a one followed by the title) to generate the document structure. An exemplary Markdown might look like:
Here Insert Picture Description
This is an online Markdown editor mdeditor sample page. Markdown code that is written on the left side, it is almost not much difference between plain text, it is the right of the display code is on the page.

We first observe Markdown syntax on the left side, its structure is as follows:
Here Insert Picture Description
So on the right, you can see that the pages are as follows:
Here Insert Picture Description
using a plain text editor to write a different document, this document contains a number of special tag. As a # can identify a space behind the text is a title. A pair of asterisks (*) wrapped in a piece of text, indicating that the text requires bold and so on.

Under these markers in most cases you do not need to remember, because the online editor toolbar will provide for you:
Here Insert Picture Description
Now if you select some text and then click on the "bold", the editor will automatically for you on both sides in the text * plus two each, so the text will be displayed as bold text. Such as:
Here Insert Picture Description
Now "github" left and right sides of each added two asterisks:
Here Insert Picture Description
Showing results:
Here Insert Picture Description
If you want to generate a table of contents for the document, just click on the right side of the "directory", the editor will insert this for you a mark ( "directory" word directory name, can be freely modified):
Here Insert Picture Description
so your document will appear in a directory like this:
Here Insert Picture Description
here's the contents of the directory from within the current document all the titles used, and you can click on link to this title. Very simple to use, is not it?

Many websites are currently widely used to write Markdown documentation or help for a message published on the forum. For example: GitHub, CSDN, Jane books, reddit, Diaspora, Stack Exchange, OpenStreetMap, SourceForge and so on. If you are an experienced user github, then you should be most familiar with is every time a new project file will be generated README.md it, it can be a description of the project file, or tutorials, but it is based on Markdown syntax the (md Markdown suffix is ​​the abbreviation).

Although there has been Markdown editor, when we write md files are rarely requested in writing Markdown syntax, but if you are familiar with Markdown, Markdown syntax is common to master essential.

Two, Markdown syntax common

1. Title

Markdown supports a total of six title (corresponding to the HTML title six ~ h1 h6), the standard format is:

Here Insert Picture Description
A title as a # followed by a space subheadings two # a space, and so on. The results are as follows:
Here Insert Picture Description

Furthermore, a title may be used, and the following two markers ( "=" and "-" is an arbitrary number):

我展示的是一级标题
=================

我展示的是二级标题
-----------------

2. paragraphs and text

如果你只需要一个普通的段落,那么它不需要任何标记,直接像在普通的文本编辑器中一样编写即可。如:
Here Insert Picture Description
Markdown文件与显示结果几乎没有差别。

如果你希望对其中某些文本添加特定的文本样式,那么你可以为这些文本添加专门的标记。常见的文本样式如下:
Here Insert Picture Description
它们产生的效果如下:
Here Insert Picture Description

3. 列表

主要包括有序列表和无序列表(不同的Markdown编辑器还可能提供其他的列表类型)。无序列表使用“*”、“+”或“-”加一个空格来标记,如:

* 第一项
* 第二项

+ 第一项
+ 第二项


- 第一项
- 第二项

显示结果为:

  • 第一项
  • 第二项
  • 第一项
  • 第二项
  • 第一项
  • 第二项

有序列表使用数字加“.”及一个空格来标记,如:

1. 第一项
2. 第二项
3. 第三项

显示为:

  1. 第一项
  2. 第二项
  3. 第三项

如果需要显示嵌套列表,只需要在子级列表项前加四个空格即可(这里csdn的编辑器将子级无序列表显示为有序列表,属于编辑器特性,在其他编辑器中行为可能略有不同):

 1. 第一项:
    - 第一项嵌套的第一个元素
    - 第一项嵌套的第二个元素
 2. 第二项:
    - 第二项嵌套的第一个元素
    - 第二项嵌套的第二个元素
  1. 第一项:
    • 第一项嵌套的第一个元素
    • 第一项嵌套的第二个元素
  2. 第二项:
    • 第二项嵌套的第一个元素
    • 第二项嵌套的第二个元素

4. 区块

一个区块的样式如下:

这是一个区块

多层嵌套:

最外层

第一层嵌套

第二层嵌套

它的语法非常简单,就是在文字前面加“> ”,多级区块使用多个>,如:

> 这是一个区块

> 最外层
> > 第一层嵌套
> > > 第二层嵌套

5. 代码块

如果是一段文本中间出现的少量代码块,你可以用反引号`(位于tab键的正上方,数字键“1”的左侧,使用英文输入法即可输入反引号)来标记,如:

这里有一个`print`函数

它显示为:这里有一个print函数。显示效果因编辑器及所用主题而异。

如果需要引用大段代码块,可以使用两种语法:

  1. 使用四个空格或一个tab符进行缩进
  2. 使用三个反引号标记一个代码段,支持标注所用的语言

如:

    function returnTrue(){
      return true;
    }

或(反引号写法不便于嵌套,因此这里用图片展示):
Here Insert Picture Description
显示结果即为:

function returnTrue(){
    return true;
}

这里显示为黑色,是因为在编辑器设置中启用了黑色的代码块风格,如果编辑器提供了其他风格,它可能看起来与这里不完全一致。如果不指定所用语法,只是使用三个反引号,编辑器可能无法进行代码高亮,这样通常不便于阅读。

6. 超链接

编写web文档时经常出现超链接,Markdown使用如下语法来标记一个超链接:

[链接名称](链接地址)


<链接地址>

例如:

这是一个链接 [菜鸟教程](https://www.runoob.com)

<https://www.runoob.com>

将显示为:
Here Insert Picture Description
除此之外,链接地址还可以使用变量来代替,然后在文档末尾为变量指定链接地址,如:

这个链接用 1 作为网址变量 [Google][1]

//在文档尾添加
[1]: http://www.google.com/

该模式参考了论文中使用[1]这样的语法标记引用,然后在论文末尾标注引用的习惯。使用数字作为变量只是一个习惯,理论上你可以使用任意变量名。

7. 图片

Markdown的图片语法通常非常简单:

![alt 属性文本](图片地址)

![alt 属性文本](图片地址 "可选标题")

alt 属性文本为图片无法加载时的替代文本,括号内是图片地址,允许指定标题。如:

![markdown](https://www.mdeditor.com/images/logos/markdown.png "markdown")

这样在预览区就会出现目标图片。

大多数Markdown编辑器不需要手动插入图片,你可以直接复制一张图片,然后粘贴到文档内即可(甚至是拖拽到文档内,这取决于编辑器实现),编辑器会自动为你生成标记。

8. 表格

表格的语法相比于HTML来说也简单了很多,一个简单的表格实现如下:

|  表头   | 表头  |
|  ----  | ----  |
| 单元格  | 单元格 |
| 单元格  | 单元格 |

它会生成这样一张表格:

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

第二行用于分隔表头和表格体。在这里你还可以指定表格的对齐方式,它通过添加引号来实现:

| 左对齐 | 右对齐 | 居中对齐 |
| :-----| ----: | :----: |
| 单元格 | 单元格 | 单元格 |
| 单元格 | 单元格 | 单元格 |

结果如下:

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

冒号位于左侧即为左对齐,位于右侧为右对齐,两侧都有冒号即为中间对齐(通常这种情况不需要添加冒号)。这里用于分隔的减号(-)数量没有强制要求。

9. 其他

除了上面介绍的常见标记外,Markdown还有很多非常强大的标记,比如插入数学公式、UML图、甘特图、流程图等,这些功能是随着文档编写的需要逐步添加到Markdown语法的。由于较为复杂并且不是很常用,这里不再详述,只举几个例子:

数学公式:

$$
\Gamma(z) = \int_0^\infty t^{z-1}e^{-t}dt\,.
$$

生成:
C ( from ) = 0 t z 1 e t d t . \Gamma(z) = \int_0^\infty t^{z-1}e^{-t}dt\,.
Gantt chart:

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

Generation:

Mon 06 Mon 13 已完成 进行中 计划中 现有任务 Adding GANTT diagram functionality to mermaid

UML sequence diagram:

sequenceDiagram
张三 ->> 李四: 你好!李四, 最近怎么样?
李四-->>王五: 你最近怎么样,王五?
李四--x 张三: 我很好,谢谢!
李四-x 王五: 我很好,谢谢!
Note right of 王五: 李四想了很长时间, 文字太长了<br/>不适合放在一行.

李四-->>张三: 打量着王五...
张三->>王五: 很好... 王五, 你怎么样?
张三 李四 王五 你好!李四, 最近怎么样? 你最近怎么样,王五? 我很好,谢谢! 我很好,谢谢! 李四想了很长时间, 文字太长了 不适合放在一行. 打量着王五... 很好... 王五, 你怎么样? 张三 李四 王五

flow chart:

graph LR
A[长方形] -- 链接 --> B(())
A --> C(圆角长方形)
B --> D{菱形}
C --> D

Generation:

链接
长方形
圆角长方形
菱形

Note: This requires mathematical chart on the following mark to appear in the chart:
Here Insert Picture Description

to sum up

Markdown entry threshold is very low, in the case of using the online editor, and almost written in plain text does not make any difference (if your document does not flow chart and the like). If you want to write a blog post each blog platform, then Markdown is one of the basic skills necessary for you; if you want to write a good README.md for their github project documentation, then please be sure to draw a few hours to understand about Markdown.

If you need to learn Markdown tutorial, there are two options:
rookie Tutorial - Markdown tutorial
MDN Chinese documents - Markdown

If you are now looking for an online editor, practice your hand, then here are a good recommendation:
MdEditor

In fact, when you are reading this article, you should already have written a simple Markdown documents in an online editor capabilities (if not available, the novice online editor of the guide also enough to use, contains most of the examples you You might use Markdown syntax). So I quickly started to try it.

Published 37 original articles · won praise 90 · views 10000 +

Guess you like

Origin blog.csdn.net/qq_41694291/article/details/103223082