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
- First item
- Item 2
- 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)

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 ~ ❤️ |