Reprinted from: http://whuhan2013.github.io/blog/2015/09/19/markdown-simple-grammar/
reprint
Markdown overview
Markdown is a lightweight markup language that allows people to write documents in a plain text format that is easy to read and write, which is then converted into richly formatted HTML pages. - Wikipedia
Markdown syntax is an enhancement to plain text formatting that makes text appear clearer and more organized. But it's still fairly simple text, easy to modify and extend, and is often used for quick writing.
What you see is what you get. Many MD editors have strong real-time preview rendering, which allows writers to see the display effect of their writing content and make adjustments in time.
The concise features of the Markdown format, compatibility and scalability are quite good, so that it can be quickly converted to various common formats on the Internet, such as HTML, Word, PDF and so on. At present, more and more people begin to accept and use it.
Markdown editor
There are many common and commonly used Markdown editors, such as:
In addition (mainly charged):
And a premium online editor that supports Markdown:
The first series of MacDown is recommended for entry-level editors. Other editors can explore on their own after they are familiar with Markdown.
Markdown syntax
The basic syntax of Markdown will be explained here one by one. For some tables and code displays that are generally not commonly used (not easy to use) in writing, there is not much explanation.
Basically all the punctuation involved below are subject to the state of English input. Otherwise, the syntax will be invalid.
Let's start with an example that contains quite a few basic syntaxes.
Regarding grammar, let's start with the title that distinguishes blocks and sorts out logical relationships in the text:
title
# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题 The display effect is as follows:
This is the first level title
me, secondary title
I am a tertiary title
It's just a fourth-level title...
Smaller me, level 5 title XD
The smallest supported by Github can be me (where did it come out)
newline
In Markdown syntax, line breaks are as follows:
- Line breaks. Hit the "Return" key twice in a row to start writing the next paragraph;
- Add two spaces at the end of the line, then "Return" (for clarity) to start the next paragraph.
emphasis mark
*斜体* 斜体
_斜体_
**加粗** 加粗
__粗体_
For emphasis symbols, it is necessary to pay attention to what starts and ends with the same number, so that the corresponding grammar can take effect.
The display effect is as follows:
this is italic
This is to emphasize
Partition Line
*** 加分割线
* * * 加分割线
***** 或者这样？
--- 还有另外的方式
___ 其实，还可以这样 Here is a dividing line:
list
Lists are divided into two categories: unordered lists and ordered lists. The former begins with "*", "-", and "+", and the latter begins with the Arabic numeral "1".
Three notes:
- If there is content in front, a blank line should be used before entering characters;
- A space character must be separated between the symbol and the content for the list mode to take effect;
- After the input of the first line is completed, the newline will automatically complete the beginning symbol of the next line (the number of the ordered list increases, and the symbol of the unordered list remains unchanged), then just continue to enter the content of the next line, and so on;
- Multi-level list, for the sake of beauty and to reduce errors, pay attention to the unity and top-bottom alignment of list symbols at the same level.
Unordered list:
Unordered List:
* English
* Japanese
* Chinese
* ……
Unordered List:
- English - Japanese - Chinese - …… The display effects are as follows:
Country List：
- English
- Japanese
- Chinese
- ……
Ordered list:
Ordered List:
1. Orange
2. Apple
3. Banana
My Favorite Fruit List:
- Orange
- Apple
- Banana
Multi-level list:
两都名胜
- 南京
+ 玄武湖
+ 中山陵
+ 鸡鸣寺
- 杭州
+ 西湖
* 苏堤
* 湖心亭
* 太子湾 + 九溪 + 灵隐 Note: The functions of several symbols here are the same, and the symbols at different levels are different only for appearance. For daily use, please use the same symbol for each level.
The display effect is as follows:
two places of interest
- Nanjing
- Xuanwu Lake
- Sun Yat-sen Mausoleum
- Jiming Temple
- Hangzhou
- West Lake
- Su Causeway
- Huxin Pavilion
- Prince's Bay
- nine streams
- Lingyin
- West Lake
Quote
Quote. Use ">" to add at the beginning of each line.
Two notes:
- The previous line of ">" must be a blank line;
- Whether or not there is a space between the ">" and the first character immediately following it does not affect the effect (but it is recommended to add one).
The display effect is as follows:
James March, March on Management:
Don Quixote reminds us that if we trust only when we are not betrayed, love only when we are rewarded, and learn only when we are useful, then we give up the characteristic of being a human being - willing to be in the self. Act in the name of an idea, regardless of the outcome.
Or, you want to quote a poem, a song:
> 五月天《天使》
> 像孩子依赖着肩膀
> 像眼泪依赖着脸庞
> 你就像天使一样
> 给我依赖 给我力量 Here, you also need to pay attention to the line break: each line is broken at the end, and two spaces are added, otherwise the content will be squeezed together and become one line. Or between lines, a blank line. In the following example, although the lyrics are entered separately, the lyrics are actually displayed in one sentence.
Mayday "Angel"
Like a child leaning on your shoulders like tears on your face You lean on me like an angel Give me strength
After two spaces at the end of each line of lyrics, the effect is as follows:
Mayday "Angel"
Like a child leaning on your shoulders
like tears on your face
You lean on me like an angel
Give me strength
If you want to nest references, like this:
Zhejiang
Hangzhou
West Lake
Huxin Pavilion
There is a problem with the default Markdown tool of the blog. The effect is as follows:
The syntax is as follows, add one more ">" symbol to each line, and then enter the text content (remember to add two spaces at the end of each line):
> 浙江
>> 杭州
>>> 西湖
>>>> 湖心亭
code area
Also known as Blockquotes.
If there is no space at the end of the line, is there any other solution? if so--
风吹柳絮
《麦兜当当伴我心》插曲
风吹柳絮 茫茫难聚
随着风吹 飘来飘去
我若能够携你随风去
我愿像一块扣肉
我愿像一块扣肉
我愿像一块扣肉
扣住你梅菜扣住你手
我愿像一块扣肉
我愿像一块扣肉
我是你一块扣肉
你是那梅菜扣住你手
The method here is to indent the first line with four spaces, or hit the tab key (tab key).
There is another way. The two lines before and after three consecutive backticks "`" wrap the content.
The display effect is as follows:
这是另一个代码区块
In the code block, Markdown syntax will not be converted, which is why many of the previous examples of Markdown syntax can be displayed in the code area. Otherwise, there is no way to talk about such an explanation of Markdown syntax in Markdown syntax.
Uh-huh?
Input of backticks: In English input mode, click the "~" key in the upper left corner of the keyboard.
mark
Marks small pieces of code (text). Add a dark background frame for the highlighted content, add a backticks "`" before and after the content, and sandwich the code snippet or text in between.
The display effect is as follows:
- Use the
printf()function. - This is to darken the background color box
字符.
website link
auto link
Using sharp-angled symbols such as "<" and ">", url/email can automatically achieve the effect of clickable links under Markdown.
<http://www.google.com>
The display effect is as follows:
website link
As for the basic format of the URL link, it should be like this:
[Link Name](Link)
It consists of:
- A square bracket to add the description text of the image
- a bracket to add the image URL
The following is the chestnut of a URL:
[Welcome to my blog](http://azeril.me)
The display effect is as follows:
index link
Add a definition link (mainly numbers/English/symbols) after the content description, and associate specific URLs outside the text paragraphs to achieve a jump effect.
[Click Google Search][Tags]
[Tags]: http://www.google.com "Google"
The display effect is as follows:
add pictures
The syntax for inserting a picture:
- An exclamation mark "!" under an English input;
- A square bracket to add the description text of the picture;
- A bracket to add the image URL.
Compared to inserting a URL link, there is an extra exclamation mark at the beginning.
The display effect is as follows:
Add form
|Title |Title 1|Title 2|Title 3| |---|---:|:---:|---:| | A|B|C|D| The display effect is as follows:
| Province | ZJ Zhejiang Province | FJ Fujian Province | YN Yunnan Province |
|---|---|---|---|
| provincial capital | Hangzhou | Xiamen | Kunming |
A general table consists of two symbols, "|" and "-" (English half-width characters). The first, third and subsequent lines are all composed of "|". Determine the number according to the number of columns of data (column data volume + 1).
The second line is a partition composed of continuous "-" in the middle, the number is not limited, and it is more to make the text look beautiful (not related to the preview).
The colon that appears in the second line is used to set the alignment of the data in the table, and it is not required. The specific meaning is as follows:
:–--Colon on the left, left justified--–：Colon on the right, right justified：--–：Colons appear on both left and right, center aligned
Escapes
How do I output the symbols themselves that are used to convert the format in the MD document? Here you need the escape character, that is, the backslash "\" to assist.
If you want to display "*", you can use the following way:
表示强调的符号这样用： \*Emphasize\*
The display effect is as follows:
Emphasize symbols are used like this: *Emphasize*
MD symbols that support escaping include:
\ 反斜线
` 反引号
\* 星号
\_ 下划线
{} 花括号
[] 方括号
() 圆括号
# 井号
+ 加号
- 减号（连字符）
. 句点
! 感叹号
Extended reading
HTML language based on Markdown.
HTML can conform to MD grammar, and by using the former, some functions and page display effects that cannot be realized temporarily by relying solely on MD grammar can be realized.
website link
Jump links within the page. Use HTML syntax to create a jumpable table of contents for long Markdown texts. It is divided into two parts, the former is the specific entry information, and the latter points to the location of the content (where the code segment is placed on the page, and where the index entry will jump to after clicking).
Example syntax is as follows:
[Line](#A)
<a name="A"></a> Add picture (advanced version)
In a page, it is necessary to insert multiple pictures side by side (two or three side by side) or display the inserted pictures in the center, or similar to fix the width and height of the pictures, which is currently not possible with Markdown syntax. At this point, calling the HTML syntax can be done easily.
Below, you can only look at the part where the picture bed is added to reduce cognitive load.
Picture and picture bed
Picture bed is a third-party service that hosts personal uploaded pictures and provides external links to pictures, which we use when writing blog articles.
Commonly used picture beds:
The image bed will provide an external link to the image after uploading the image. We can use external links to add pictures to our blog posts. Pictures can also be stored in Github's own blog repository, but pictures take up a lot of space (the Github project space is 200 M). Therefore, it is best to choose a picture bed to host pictures.
If it is simply inserting the picture external link from the picture bed:
The leaflet is centered:
<center>
<img src="http://dreamofbook.qiniudn.com/Zero.png"> </center> OR <figure> <img src="http://xxx.jpg"> </figure> The effect is as follows:
Fixed image width/height:
<img src="http://xxx.jpg" title="Logo" width="100" /> The width is Width and the height is High. Title is the picture description.
The effect is as follows:
Two are shown side by side:
<figure class="half">
<img src="http://xxx.jpg"> <img src="http://yyy.jpg"> </figure> Three are shown side by side:
<figure class="third">
<img src="http://xxx.jpg"> <img src="http://yyy.jpg"> <img src="http://zzz.jpg"> </figure> When using, copy and paste the corresponding code, and then replace the link in "" (the quotation marks under English input), that is, the "http://xxx.jpg" link in the example to upload pictures for yourself (usually only uploaded in the picture bed) The picture has such a link) of the external link.
Tips: Regarding jpg/png, it is a common file format. The jpg format has high compression efficiency, relatively small file quality, takes up less network space, and loads faster when displayed on the page. Images in png format are clearer.
Add Github image
If you use the pictures in the Github project folder, the basic syntax remains the same, just replace the picture external link (URL) in the "" mentioned above with:
「自定义的域名 + 图片在 Github 项目的位置」
http://jjx/images/xxx.jpg
The quoted code is automatically deformed. The code block composed of two curly braces and "site.url" in the blog post will be automatically completed as my personal domain name, so the demo in the code area of this blog post is also affected (the reference in the previous paragraph is affected. Later The same is true for the examples cited in the text). If you copied the code block just now, you need to modify "azeril.me//" as shown in the figure below (two curly braces, with site.url in the middle). which is:
When using, copy and modify the corresponding code, and replace the link such as "/images/xxx.jpg" with the path where you put the image.
If there is an images folder under the Github project, put the image directly in it, which is the code replacement as above. If it is a folder in the images directory, such as Instagram, the path is: "images/Instagram/xxx.jpg". So on and so forth.
Mode for additional browsing windows
A little more complicated, click on the picture to jump out of a preview window, you can see the larger picture and switch pictures.
The effect is as follows:
Two codes shown side by side (single and triple codes are similar to the previous ones):
<figure class="half">
<a href="http://jjx/images/xxx.jpg"><img src="http://jjx/images/ xxx.jpg"></a> <a href="http://jjx/images/yyy.jpg"><img src="http://jjx/images/ yyy.jpg"></a> </figure> The above method is available in github, but not displayed in jekelly. The correct method is as follows
<div style="float:left;border:solid 1px 000;margin:2px;"><img src="http://img.blog.csdn.net/20160616131539493" alt="screenshot" title="screenshot" width="250" height="436" ></div> <div style="float:left;border:solid 1px 000;margin:2px;"><img src="http://img.blog.csdn.net/20160616131603337" alt="screenshot" title="screenshot" width="250" height="436" ></div> <div style="clear:both;"></div> Add image code to share
Because there is a problem with some of the HTML codes quoted when the blog is displayed, an md version of the document is also sent for reference.
download link:
百度云 - Dl from BaiduYun
box.com - Dl from Box.com
dropbox - Dl from Dropbox
joy.