Markdown Basic Syntax description

Overview Brief Introduction Markdown

Markdown is a lightweight markup language that allows people to write documents in easy-to-read, easy-to-write, plain text format and then convert them into rich HTML pages. --from [Wikipedia]

Simply put, markdown means "formatting" with a "marker symbol". The markdown syntax tag corresponds to the HTML syntax tag one by one , such as Markdown's two level header tag corresponds to the ## markup in the HTML, and Markdown is compatible with HTML syntax , If you prefer HTML <a> or tags, you can use these tags directly in the Markdown document instead of Markdown the links provided or the image tag syntax. CSDN markdown Feature Support

The CSDN markdown Editor was modified using Stackedit, but some details were optimized on the basis of stackedit, making the experience more friendly and the CSDN Markdown supported many features:

• Live effects Preview and Auto-scroll to edit (WYSIWYG)
• Support Markdown extra/github flavored Markdown extension syntax
• Support Code Syntax highlighting
• Support LaTeX Math formula (based on Mathjax)
• Support UML sequence diagrams and flowcharts
• Manage multiple copies of MarkDown documents online or offline
• Support Offline editing
• Support for importing online and local markdown documents for editing
• You can export edits to a markdown,html file
• Manage published documents

In this article, I first introduce csdn markdown Basic grammar, I will from the markdown syntax description, examples, and its corresponding HTML syntax, examples of effects, attention to the aspects of the detailed introduction. You'll continue to learn how to insert a picture, CSDN Markdown's extended syntax, how to write math formulas, paint, and more. Title

Markdown supports two forms of title syntax: The Setext form and the ATX form. Setext form

markdown Syntax Description:

The Setext form is done using a bottom-line approach, using several = (highest-order headings) and - (second-order headings).

Example:

这是标题1=============这是标题2-------------

The corresponding HTML syntax:

Effect: This is Heading 1 which is heading 2

Precautions:

Here # or - the number is arbitrary, both can write one can also write multiple.

ATX Form

Markdown Syntax Description:

The ATX form is to insert 1 to 6 at the beginning of the line # , respectively, corresponding to the heading 1 to the 6 order.

Example:

# 这是标题1## 这是标题2### 这是标题3#### 这是标题4##### 这是标题5###### 这是标题6

These 6 tags correspond to HTML after conversion .

Effect: This is Heading 1 which is Heading 2 which is heading 3 which is heading 4 which is heading 5 which is heading 6

Precautions:

• The headings in setext form can only represent the two orders of Title 1 and Heading 2, and the title of the ATX form may represent the title 1~ title 6 total 6 orders.
• The space between the above # and the text is not required, but it is a good habit to add.
• You can selectively "close the title of the"atx style, which is purely aesthetic, and if you feel comfortable, you can add it at the end # of the line, and the number of lines at the end is # not the same as the beginning (the number of the beginning of the # header determines the order of the title).

Chunk reference

Markdown Syntax Description:

Markdown tag block references are > tokens, and a paragraph can be either a single > marker (at the beginning of a paragraph, a lazy one), or it can be preceded by each line of a paragraph > .

Example:

> 这是一个区块引用。与上面文本属于一个段落，因此这一行前面可以不加`>`标记。> 由于上面空了一行，因此这是另一个不同的段落，前面的 `>`必须添加。>虽然这也是另一个不同的段落，但上面空行加了 `>`，因此这里段落之前的 `>`也可以省略，相当于上面空行的 `>`属于这个段落。

The corresponding HTML syntax:

<blockquote>    <p>这是一个区块引用。    与上面文本属于一个段落，因此这一行前面可以不加`>`标记。</p>    <p>由于上面空了一行，因此这是另一个不同的段落，前面的 `>`必须   添加。</p>    <p>虽然这也是另一个不同的段落，但上面空行加了 `>`，因此这里段落之前的 `>`也可以省略，相当于上面空行的 `>`属于这个段落。</p></blockquote>

Effect:

This is a chunk reference.
The above text belongs to a paragraph, so this line can be preceded without > markup.

Because there is a row empty, this is another different paragraph, which > must be added earlier.

Although this is also a different paragraph, but the above blank line added > , so the paragraph before the passage > can also be omitted, the equivalent of the above blank line > belongs to this paragraph.

Precautions:

Block references can be nested , that is, references within the reference, as long as the level with a different number of > can, such as two layers need two > :

> 这是区块引用的第一层。>> > 这是嵌套引用，属于第二层，因此需要再加一个`>`，两个`>`之间的空格不是必需的。>> 回到区块引用的第一层。

The effect is:

This is the first level of a chunk reference.

This is a nested reference and belongs to the second layer, so you need to add one more > , and a > space between two is not required.

Back to the first layer of the block reference.

Other markdown grammars can also be used within the referenced chunks, including headings, lists, blocks of code, and so on:

> ## 这是一个标题。> > 1. 这是第一个列表项。> 2. 这是第二个列表项。> > 这是一个代码例子：> >     printf("Hello, Minmin!\n"); return 0;

The effect is:

this is a title.

1. This is the first list item.
2. This is the second list item.

Here is a code example:

printf("Hello, Minmin!\n"); return 0;

Divider Line

Markdown Syntax Description:

You can create a divider line with three or more asterisks, * minus signs - , and bottom lines in one line _ , and there's nothing else in the row. You can also insert a space between an asterisk or a minus sign. Each of the following can be used to create a separator line.

Example:

* * *********- - ----------------------------------------

The corresponding HTML syntax:

Effect:

Precautions:

As you can see from the above example, there are spaces between more than three tags, and these three kinds of tags can be mixed, as long as three of the number is added up to or equal to 3, such as the following:

**---*_***--_

Emphasize

We know there are two tags that play an important role in HTML: <em> and <strong> , the difference between the two can be Google or read this article "em and strong difference",markdown also have these two emphasis effect, using the asterisk * and the bottom line _these two kinds of tags.

Markdown Syntax Description:

• The use * of one or the _ surrounding words, the equivalent <em> of a label surrounded (this is the transformation of the internal);
• *If you use two or _ wrap, it is equivalent to use <strong> .

Example:

*使用一个星号的强调*_使用一个 底线 的强调_**使用两个星号的强调**__使用两个底线 的强调__

The corresponding HTML syntax:

<em>使用一个星号的强调</em><em>使用一个底线的强调</em><strong>使用两个星号的强调</strong><strong>使用两个底线的强调</strong>

Effect:

Use an asterisk to emphasize
Use a bottom line of emphasis

Emphasis with two asterisks
Use two bottom-line emphasis

Precautions:

• There is ** __ no blank space between the two and the same symbols, otherwise they will only be treated as normal symbols .
• The <em> emphasis of attention in different editors or browsers may show the effect is not the same, some through italic to emphasize, and some through the next line to emphasize.

List

Markdown supports both sequential and unordered tables, and lists can be nested. unordered List

Markdown Syntax Description:

Unordered lists use asterisks, plus signs, or minus signs as list markers, using the following methods:

一个星号 / 一个加号 / 一个减号 + 若干个空格 + 列表项内容

Example:

*   条目1*   条目2*   条目3

This is equivalent to:

+   条目1+   条目2+   条目3

is also equivalent to:

-   条目1-   条目2-   条目3

The corresponding HTML syntax:

<ul>  <li>条目1</li>  <li>条目2</li>  <li>条目3</li></ul>

Effect:

• Entry 1
• Entry 2
• Entry 3

Ordered list

Markdown Syntax Description:

There are sequential tables that use numbers directly as list markers, using the following methods:

一个数字 + 一个英文句点 + 若干个空格 + 列表项内容

Example:
1.1th description
2.2nd description
3.3rd Description

The corresponding HTML syntax:

<ol>  <li>第1点描述</li>  <li>第2点描述</li>  <li>第3点描述</li></ol>

Effect:

1. 1th description
2. 2nd description
3. 3rd Description

Precautions

(1) from the HTML syntax format of the sequence list, you can see that the numbers you use on the ordered listing tags do not affect the final sequential output , that is, if your list tag is written as:

1.  第1点描述1.  第2点描述1.  第3点描述

or even:

4.  第1点描述2.  第2点描述9.  第3点描述

Will get exactly the same output as above, you can completely ignore the correctness of the numbers.

(2) After the list tag must be followed by at least one space or tab , otherwise it is normal text instead of the list, that is, the following wording is not supported by the list:

*条目1*条目2*条目3

(3) If the list entries are separated by a blank line, then there will be a blank line between the two entries in the output, and if there are multiple entries, if there is a blank line in it, the output will appear blank lines between all entries, maintaining consistency. For example:

*   条目1*   条目2*   条目3

The output effect is:

• Entry 1

• Entry 2

• Entry 3

(4) Each list entry can contain more than one paragraph, but these paragraphs must be indented with 4 spaces or 1 tabs:

1.  这是一个有两个段落的列表项，这是第一段。    这是第二段，段首已经缩进 4 个空格或 1 个制表符，否则就处在列表之外，自成一个普通段落，下面的列表条目也将自成另一个不同的列表，序号从1开始。2.  这是列表的第二个条目。

The effect is:

1. This is a list entry with two paragraphs, which is the first paragraph.

   This is the second paragraph, the beginning of the paragraph has been indented 4 spaces or 1 tabs, otherwise in the list, as a normal paragraph, the following list entry will also be a different list, the sequence number starting from 1.

2. This is the second entry in the list.

(5) If you want to put a reference within a list entry, you > need to indent:

*   含有引用的列表项，下面是引用元素：     > 这是一条引用。     > 前面需要缩进4个空格或1个制表符，跟段落一样。

The effect is:

• The list entry containing the reference, the following is the reference element:

  This is a reference.
  You need to indent 4 spaces or 1 tabs in front, just like a paragraph.

(6) If you want to place a block of code within a list item, the chunk needs to be indented two times , which is 8 spaces or 2 tabs:

*   含有代码块的列表项：        #include <stdio.h>            int main(void) {                printf("Hello, Minmin!\n");                return 0;             }         }

The effect is:

• List items that contain code blocks:

  #include <stdio.h>    int main(void) {        printf("Hello, Minmin!\n");        return 0;    }}

(7) Avoid creating unnecessary list items.
Sometimes the list is likely to be accidentally generated, such as the following:

1986. 这不是一个列表项。

A list of the following is also generated:

1. This is not a list item.

In other words, the number-period-blank appears at the beginning of the line, and to avoid this, you can precede the period with a backslash, and see the "Use of backslashes" section later.

1986\. 这不是一个列表项。

That's right:

1986. This is not a list item. Link

Markdown links can be divided into automatic links and two types of plain text links . Auto link (clickable URL and email)

Markdown supports the processing of URLs and e-mail boxes in a relatively short form of automatic linking.

Markdown Syntax Description:

For the text itself is a URL and email, as long as it is wrapped in angle brackets, markdown will automatically turn it into a link.

Example:

这是一个可点击的URL：

The corresponding HTML syntax:

For the above normal Url,markdown will be converted to the following HTML syntax:

<a href="http://www.csdn.net/">http://www.csdn.net/</a>

The automatic link to email is very similar, but Markdown will do a code conversion process, the text character into a 16-digit HTML entity, this format can fool some bad mail collection robot, for example, the above Email,markdown will be converted to:

<a href="&#x6D;&#x61;i&#x6C;&#x74;&#x6F;:&#x61;&#x64;&#x64;&#x72;&#x65; &#115;&#115;&#64;&#101;&#120;&#x61;&#109;&#x70;&#x6C;e&#x2E;&#99;&#111;&#109;">&#x61;&#x64;&#x64;&#x72;&#x65;&#115;&#115;&#64;&#101;&#120;&#x61;&#109;&#x70;&#x6C;e&#x2E;&#99;&#111;&#109;</a>

In the browser, this string will eventually turn into the following HTML syntax:
[Email protected]

Effect:

This is a clickable URL:
http://www.csdn.net/

This is a clickable email:
[Email protected]

Precautions:

For the automatic link of mail, use markdown syntax although can deceive a lot of robots, but not all stop, but always better than nothing. In any case, open your mailbox will eventually attract advertising letters.

Plain text Links

Markdown supports two forms of normal text link syntax: inline and reference two forms. Inline links

Markdown Syntax Description:

The following three forms of syntax are allowed:

[链接文字](链接URL ‘可选的链接title‘)[链接文字](链接URL "可选的链接title")[链接文字](链接URL (可选的链接title))

The detailed description is:

• A square bracket in which the link text is entered;
• Then a round parenthesis, which can contain two parts, separated by a space :
  • The URL of the "must" link;
  • "Optional" link title text, as long as single quotation marks, double quotation marks or brackets to wrap the title text, plus title, you use the mouse to move to the link text will display the title text, you can use it as a hint of information, Of course you can also use the title attribute.

Example:

更多精彩的内容，可以访问[敏敏的CSDN博客](http://blog.csdn.net/lanxuezaipiao/ "敏敏的博客")（有title属性） 。想更多的了解敏敏，可以访问[敏敏的新浪微博](http://weibo.com/lanxuezaipiao/) （无title属性）。

The corresponding HTML syntax:

<p>更多精彩的内容，可以访问 <a href="http://blog.csdn.net/lanxuezaipiao/" title="敏敏的博客">敏敏的CSDN博客</a>（有title属性） 。</p><p>想更多的了解敏敏，可以访问<a href="http://weibo.com/lanxuezaipiao/">敏敏的新浪微博</a> （无title属性）。</p>

* Effect: *

For more exciting content, you can access the sensitive Sensitive CSDN blog (with the title attribute).

To learn more about sensitive sensitive, you can access sensitive sensitive's Sina Weibo (without the title attribute).

Precautions:

If you are a resource to be linked to the same host, you can use a relative path , for example:

想要进一步了解，请访问 [About](/about/) 页。

Reference links

Markdown Syntax Description:

[链接文字][链接id][链接id]: 真正的链接URL "可选的title"

You can find that the link text in the reference link is not a parenthesis but another square bracket, in which you fill in the markup to identify the link , note that there are spaces between the two square brackets, and then, anywhere in the document , You can define the link content of this tag.

The link content definition is in the form of:

• A square bracket (which can optionally be indented with up to three spaces), enter the link ID above
• Then a colon
• followed by more than one space or tab
• Then the URL of the link
• Optionally, the title content can be enclosed in single quotes, double quotes, or parentheses, as above

Example:

想知道敏敏都读过哪些书、看过哪些电影吗？请进入[敏敏的豆瓣][id]来了解下吧。[id]: http://www.douban.com/people/44971294/  "敏敏的豆瓣"  

The corresponding HTML syntax:

<p>想知道敏敏都读过哪些书、看过哪些电影吗？请进入<a href="http://blog.csdn.net/lanxuezaipiao/" title="敏敏的豆瓣">敏敏的豆瓣</a>来了解下吧。</p>

Effect:

Want to know what books sensitive sensitive have read and what movies they have seen? Please enter the sensitivity of the watercress to understand it.

Precautions:

(1) One known problem is that markdown.pl 1.0.1 ignores the single-quote-wrapped link title, so you can use double quotes or parentheses whenever possible to avoid errors.

(2) Link URLs can also be wrapped in angle brackets, such as:

[id]: 

(3) You can also put the title attribute on the next line, you can also add some indentation, if the URL is too long, this will be more beautiful:

[id]: http://blog.csdn.net/lanxuezaipiao/article/details/42554035 "敏敏的2014年总结"

(4) The URL definition is only used when the link is generated, and does not appear directly in the file, as the above effect does not appear in the [id]: definition of such a URL.

(5) Link discrimination tags can have letters, numbers, blanks, and punctuation, but not case-sensitive , so the following two links are the same:

[链接文本][a][链接文本][A]

(6) There is also an implicit link tagging feature, which allows you to omit the specified link tag, in which case the link tag will be treated as equivalent to the linked text, with an implicit link tag as long as the link text is appended with an empty square bracket, if you want to "Google" link to Google.com, you can simplify it into:

[Google][]

Then define the link content:

[Google]: http://google.com/

(7) The definition of a link can be placed anywhere in the file, I prefer to place the link directly behind the paragraph, you can also put it on the last side of the file, like a note.

A comprehensive example is given below to compare the differences in these links:

How to use inline chaining:

我经常逛的网站或社区有： [CSDN](http://www.csdn.net/ "CSDN")、[知乎] (http://www.zhihu.com/ "知乎")还有[豆瓣](http://www.douban.com/ "豆瓣")。

How to use a reference link:

我经常逛的网站或社区有： [CSDN] [1]、[知乎] [2] 还有[豆瓣] [3]。 [1]: http://www.csdn.net/ "CSDN" [2]: http://www.zhihu.com/ "知乎" [3]: http://www.douban.com/ "豆瓣"

How to use the link name:

 我经常逛的网站或社区有： [CSDN] []、[知乎] [] 还有[豆瓣] []。 [csdn]: http://www.csdn.net/ "CSDN" [知乎]: http://www.zhihu.com/ "知乎" [豆瓣]: http://www.douban.com/ "豆瓣"

The above three formulations produce the same effect:

I often visit the site or the community has: CSDN, know there are also watercress.

So here's a question: How do you choose these three types of writing? Which is the best way to do it?

I personally think this is the problem of their own preferences, you see which write comfortable choice which method? However, from the official point of view, more recommended reference to the wording of the link. reference links actually focus not on it is better to write, but it is better to read, compared to the above example, the use of reference to read the article itself is very concise (because the link tag is separate into a paragraph), but in the form of the inside of the look is very bloated, but also easy to read wrong.

Using the Markdown reference link, you can make the file more like the final result of the browser, allowing you to move some tag-related metadata outside the paragraph, and you can add links without interrupting the reading sensation of the article. Code

The code syntax for Markdown is described in two categories: inline code and code block . In-line code

Markdown Syntax Description:

If you want to mark a short line of code, you can ~ wrap it up () with an inverted quotation mark (that is, the button that is followed) ` :

`你要标记的行内代码`

Example:

让我们看看`printf()` 函数有哪些参数。

The corresponding HTML syntax:

<p>让我们看看<code>printf()</code> 函数有哪些参数。</p>

Effect:

Let's take a look at the parameters of the printf() function.

Precautions:

• If you want to insert anti-quotes within a line snippet, you can use multiple anti-quotes to open and close the code snippet:

  这是一个反引号 (`)。

  You can output the inverted quote normally:

  这是一个反引号 (`)。

• If you want to insert a normal anti-quote at the beginning or end of the snippet, there will be three consecutive quotes in a single block, and the desired effect is not achieved. At this point, you need to put a blank at the beginning and end of the code snippet, one after the beginning, and one at the end, for example:

  这是代码片段中的反引号：`

  This will produce the desired effect:

  这是代码片段中的反引号：`

code block

Program-related writing usually has a well-written code block, usually these chunks we do not want it to the general paragraph of the way to the layout of the document (if the general paragraph of the way all the blanks are eliminated), but according to the original appearance, Markdown will use <pre> and <code> tags to wrap the code blocks together.

Markdown Syntax Description:

It is easy to create chunks of code in Markdown, simply by indenting 4 spaces or 1 tab characters.

Example:

这是一个普通段落：    这是一个代码区块。

The corresponding HTML syntax:

<p>这是一个普通段落：</p><pre><code>这是一个代码区块。</code></pre>

This first-order indent (4 spaces or 1 tabs) will be removed to give a specific code example.

Example:

下面是一个简单的Java实例：    public class Test{          public static void main (String[] args){              System.out.println("欢迎访问lanxuezaipiao！");         }

Effect:

The following is a simple Java instance:

public class Test{      public static void main (String[] args){          System.out.println("欢迎访问lanxuezaipiao！");     }

Precautions:

In the code block, the general Markdown syntax will not be converted, such as an asterisk is just an asterisk, that is, with two asterisks to surround a sentence will not be translated into emphasis, which means you can easily write in the Markdown syntax Markdown grammar-related files, Don't worry, the code contains some special markdown syntax tags.

The use of backslashes

Markdown can use backslashes to insert symbols that have other meanings in the syntax, such as: if you want to emphasize the effect by adding asterisks to the text, you can precede the asterisk with backslashes:

\*重点描述文本\*

The effect is: * Key Description text *

Markdown supports the following symbols preceded by a backslash to help insert a normal symbol rather than a markdown syntax tag:

\   反斜线`   反引号*   星号_   底线{}  花括号[]  方括号()  括弧#   井号+   加号-   减号.   英文句点!   惊叹号

Problems

Question 1:markdown How do I add multiple empty lines?

We know that the markdown paragraph is formed by a blank line before and after, the artificial addition of a number of empty rows is markdown syntax automatically ignore only one empty line, this is more humane, because there is no need to manually delete some extra empty line. However, there are two paragraphs between the need for multiple empty lines, such as the above to give some puzzles, the answer is generally placed at the bottom, the middle of the need for most of the white, This is what you need to do with HTML wrapping tags (previously mentioned markdown syntax is compatible with HTML): that is, to insert a label or label where a blank line is required <br /> <p> .

If you have any other questions, you can leave a message below, I will put all the questions we have to organize here.

Markdown Basic Syntax description