In the past, writing articles and recording were all direct code words. Although the code words were convenient, it was very painful for Dan to meet the code part, especially the code formatting was troublesome. After I started to use Markdown, I found it very convenient and simply recorded the basic grammar.

A, the title,

Headings are done by adding different numbers of # to the front of the text

# 1 title # # 2 headlines # # # # # # # 3 4 headlines # # # # # # # 5 # # # # six levels of headingsCopy the code




Sample header diagram

Second, the content of the text

The text can be typed directly, but it is important to note that if you want to start another paragraph, you need to press enter twice, that is, you need to leave a line between two paragraphs

Code block

The code block content can be placed directly in the middle of the two, and the language type can be added to the top and the bottom, highlighting the syntax

```javascript
this is javascript language
function name(){}
.```
Copy the code




Example code block diagram

Iv. Inline code

In-line code is written in the middle of the line

Inline code can be written directly in the 'this is inline code' styleCopy the code




Diagram of an in-line code sample

Ordered and unordered lists

The ordered list can be preceded by 1.2.3.4, etc., and the secondary structure can be preceded by a space or TAB

Unordered lists can be preceded by * or -, the same as secondary structures

Ordered list: 1. First 2. Second 3. Third 1. Third point two 4. fourth unordered list: * first - second - second point one - second point two - thirdCopy the code




Example diagrams of ordered and unordered lists

Text bold, slanted and strikeout

The special format of text is relatively simple, bold is to add ** on both sides of the text, oblique is to add ** on both sides of the text, bold and oblique together is to add *** on both sides of the text, delete line is to add ~~ on both sides of the text

** bold *** tilt * *** bold and tilt *** ~~ delete line ~~Copy the code




Example diagram of a special text format

7. Quote text

To reference text, you simply add a > symbol to the front of the text, and the result is text with a background color and a left border.

> references text contentCopy the code




Reference text sample diagrams

Eight, secant line

Secant writing is very simple, only need to use three or more *** or -.

* * * * * * * * -- -- -- -- -- -- -- -- --Copy the code




Dividing line example diagram

Nine, pictures,

The basic syntax for quoting an image is as follows: [Alt](URL title), Alt is the text below the image, title is the description of the image, that is, the text will be displayed after the mouse is placed on it, and URL is the path of the image.

! [landscape] (HTTP: / / https://gimg2.baidu.com/image_search/src=http%3A%2F%2F1812.img.pp.sohu.com.cn%2Fimages%2Fblog%2F2009%2F11%2F18%2F1 8 %2f8%2f125b6560a6ag214.jpg&refer=http%3a%2f%2f1812.img.pp.sohu.com.cn&app=2002&size=f9999, 10000 & q = a80 & n = 0 & g = 0 n & FMT = jpeg ? The SEC = 1621561120 & t = d99b987e1a68ed50f149aa611e2ab62a "landscape image")Copy the code



The default image is the sample image to the left

The image is left by default. If you want to center the image and change the size of the image, you can write it in HTML + CSS.

<div align=center><img width=400 src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2F1812.img.pp.sohu.com.cn%2Fimages%2Fblog%2F2009%2F11%2F18%2F18 % 2 f8%2f125b6560a6ag214.jpg&refer=http%3a%2f%2f1812.img.pp.sohu.com.cn&app=2002&size=f9999, 10000 & q = a80 & n = 0 & g = 0 n & FMT = jpeg? sec=1621561120&t=d99b987e1a68ed50f149aa611e2ab62a" /></div>Copy the code




Sample image in center

Hyperlinks

The format of the hyperlink is basically the same as the image structure, [hyperlink name](URL title)

[Programmer learning mecca :](https://juejin.cn/ "Digging gold ")Copy the code




Hyperlink sample diagram

Xi. Forms

The formatting of the table looks very interesting. The first line allows you to write the title, and then the second line uses a special identifier to separate the header from the table content. By default, the table text is left aligned, and if you want to center the text, you can use the second line identifier to control it.

The default form: name - | | | | age class performance: - | : - | : - | threes | | | 90 class 20 threes | | | 80 class 20 threes | | | 70 class 20 threes | | | 99 class 20 form text center: (note that the second line change name | | | age class grade: - : | : - : | : - : | : - : | threes | | | 90 class 20 threes | | | 80 class 20 threes | | | 70 class 20 threes | | | class 20, 99Copy the code




Sample diagrams of two tables

Xii. Flow chart

Flow chart is I think the most interesting and the most powerful place, a few lines of code can express the whole process, is very convenient and fast, the last simple example, a look at the understanding, then you can expand their own.

' 'flow st=>start: start the flow op=>operation: op1=>operation: second cond=>condition: yes or no? cond1=>condition: once again? E => End ST ->op-> OP1 ->cond->cond1 cond(yes)-> E cond1 cond1(yes)-> OP1 cond1(no)-> E. (Note: the full stop before the last line should be removed, and a full stop should be added here to avoid formatting errors due to editing.)Copy the code




Sample flowchart diagram