The second brother of this article leads you to learn about the high-end operations of Markdown document editing.

• Recommended MD editor: Typora

Note: except the last figure, it can be used for CSDN Markdown!
Note: the writing format is given in the code block, and the effect is shown below.

Don't hesitate! Collect it first!

1, Title

In order to make the paragraph more clearly displayed, the expression form of multi-level titles is set in Markdown. The level is expressed by # and several # represent several levels of titles. The code form is as follows:

Note that # there should be a space after it

# Primary title
## Secondary title
### Tertiary title

Examples are as follows:

Primary title

Secondary title

Tertiary title

2, Typeface

Markdown provides the following common font formats.

Italics

*Italics*
_Italics_

Italics
Italics

bold

**bold**
__bold__

bold
bold

Bold Italic

***Bold Italic***
___Bold Italic___

Bold Italic
Bold Italic

Delete line

~~Delete line~~

Delete line

Split line

***
---

footnote

[^footnote]

Typora is shown as follows:

In addition to several font formats in markdown, we can also change the font with HTML code.

text color

<font color="red">Red font</font>
<font color="green">Green font</font>
<font color="blue">Blue font</font>

Red font
Green font
Blue font

Font format

<font face="Blackbody">Boldface</font>

Boldface

Text size

<font size=5>5 Number word</font>

No. 5 character

Combined use

<font color="red" face="Blackbody" size=5>Don't hesitate! Like it!</font>

Don't hesitate! Like it!

Text highlighting

<mark>Highlight</mark>

Highlight

Add background color

<table><tr><td bgcolor="yellow">Get some color</td></tr></table>

Get some color

Text phonetics

When we encounter rare words or in order to highlight a word, we can use phonetic notation.

<ruby>feastful <rt>tāo tiè</rt></ruby>

Gluttonous t ā o tiè

Underline

<u>Underline</u>

Underline

3, Lists and sections

In order to make the layout clearer, Markdown provides a variety of formats of lists and layout blocks for our combined use.

Unordered list

Note that there should be a space after the symbol

- Unordered list
* Unordered list
+ Unordered list

• Unordered list

• Unordered list

• Unordered list

Ordered list

1. First item
2. Item 2
3. Item 3

1. First item
2. Item 2
3. Item 3

Nested list

When using nested lists, you need to add 4 spaces in front of the sub list.

- first stage
    - Second stage

• first stage
  • Second stage

block quotations

> Outer block
> > First floor block
> > > Second floor block

Outer block

First floor block

Second floor block

Fragment code block

Markdown provides a way to add snippets of code blocks to text at any time. The character is the key in the upper left corner of the keyboard.

`hello World`

hello World

Code block

Code blocks in Markdown can match almost all types of code styles. When using, we can choose to specify (or not specify) the corresponding language.

​```python
print('Hello World')
​```

print('Hello World')

Formula block

For mathematics related scholars, they usually need to write mathematical formulas. In Markdown, $$can be used as a formula block to input Latex type formulas.

$y=x^2+1$

$$y=x^2+1$$

y = x 2 + 1 y=x^2+1 y=x2+1

y = x 2 + 1 y=x^2+1 y=x2+1

4, Pictures and tables

Markdown provides methods to control the size and position of pictures.

MD add picture (traditional way)

![alt Attribute text](Picture address)

Add pictures using img

When using img to add pictures, width is used to control the width, height is used to control the height, and div align is used to control the position (left, center, right)

<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic2.zhimg.com%2Fv2-368d046160c27ec17d8c056fc09c8a78_400x224.jpg&refer=http%3A%2F%2Fpic2.zhimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1632973921&t=872b97242d5c462dcb2061f20556eb6b" width="400" height="192" div align=center>

Add table

The method of adding tables in MD is relatively simple. When adding tables, you can control the text alignment:

• -: set the right alignment of content and title bar.
• : - align the content and title bar to the left.
• : -: center the content and title block.

| Align left | Right align | Center alignment |
| :-----| ----: | :----: |
| Cell | Cell | Cell |
| Cell | Cell | Cell |

Align left	Right align	Center alignment
Cell	Cell	Cell
Cell	Cell	Cell

Add link

This is the second brother's homepage: [The second brother is not like a programmer](https://blog.csdn.net/qq_35164554?spm=1000.2115.3001.5343)

This is the second brother's homepage: The second brother is not like a programmer

5, Flow chart

Many people think that the drawback of Markdown is that it is unable to draw. In fact, we can draw multiple flow charts using a combination of multiple codes. Examples are as follows:

Horizontal flow chart

​```mermaid
graph LR
A[square] -->B(fillet)
B --> C{condition a}
C -->|a=1| D[Result 1]
C -->|a=2| E[Result 2]
F[Horizontal flow chart]
​```

Vertical flow chart

​```mermaid
graph TD
A[square] --> B(fillet)
B --> C{condition a}
C --> |a=1| D[Result 1]
C --> |a=2| E[Result 2]
F[Vertical flow chart]
​```

Vertical standard flow chart

​```mermaid
flowchat
st=>start: Start box
op=>operation: Processing box
cond=>condition: Judgment box(Yes or no?)
sub1=>subroutine: Subprocess
io=>inputoutput: Input / output box
e=>end: End box
st->op->cond
cond(yes)->io->e
cond(no)->sub1(right)->op
​```

Horizontal standard flow chart

​```mermaid
flowchat
st=>start: Start box
op=>operation: Processing box
cond=>condition: Judgment box(Yes or no?)
sub1=>subroutine: Subprocess
io=>inputoutput: Input / output box
e=>end: End box
st(right)->op(right)->cond
cond(yes)->io(bottom)->e
cond(no)->sub1(right)->op
​```

UML sequence diagram

​```mermaid
sequenceDiagram
 second elder brother->>goddess: how are you?((request)
Note right of goddess: Goddess's reply
Note left of second elder brother: The second brother is waiting for a reply
 goddess-->>second elder brother: I'm fine. What's up?(response)
second elder brother->>goddess: it's a nice day today
 goddess-->>second elder brother:It's raining. Get out!
​```

UML sequence diagram

​```mermaid
%% Sequence diagram example,-> Straight line,-->Dotted line,->>Solid arrow
sequenceDiagram
participant second elder brother
participant Third brother
 second elder brother->>Fourth brother: What do you have for lunch?
loop What are you eating?
		Third brother->Third brother: *****
end
Note right of 
    second elder brother: Barbecue hotpot <br/>Spicy Hot Pot...
    Third brother->>second elder brother: What did you say to eat!
    second elder brother-->>Third brother:Would you
    Fourth brother->>Third brother: What does the third brother eat?
    Third brother-->>Fourth brother: I don't know!
​```

Gantt chart

​```mermaid
%% Syntax example
gantt
dateFormat  YYYY-MM-DD
title Gantt chart of software development
section Design
 demand:done, des1, 2021-09-01,2021-09-03
 prototype:active, des2, 2021-09-05, 2d
UI Design:des3, after des2, 5d
 Future tasks:des4, after des3, 5d
section development
 prepare:crit, done, 2021-09-01,24h
 design framework :crit, done, after des2, 2d
 development:crit, active, 3d
 supplement:crit, 5d
section test
 functional testing:active, a1, after des3, 3d
 Pressure test:after a1  , 20h
 Test report: 48h
​```

The display in Typora is as follows:

❤️ It's not easy to sort it out. Give it a compliment ~ ❤️