Xiao Zhang, a student at school, sent CSDN for the first time, water phase I markdown!
title
# Primary title ## Secondary title ### Tertiary title #### Four level title ##### Five level title ###### Six level title
typeface
*tilt* **Bold** ***Italic bold*** _Italic text_ __Bold text__ ___Bold italic text___ ~~Delete line~~ ==Highlight == I am^Superscript^ I am~subscript~(Pay attention to English characters)
<span style='color:Text color;background:background color ;font-size:Text size;font-family:typeface;'>written words</span>. Colors can be used RGB,English#hexadecimal
<font size=6 color="violet">The font color is violet and the size is 6</font>
<p align="left/right/center">Align left</p>
Split line
+++ --- ***
footnote
Create a footnote format similar to this [^RUNOOB]. [^RUNOOB]: Rookie tutorial -- Learn not only technology, but also dream!!!
Create a footnote format similar to this 1
Intra page Jump
You need to press and hold ctrl to click
[content](#(title)
<a href="#The second jump "> content</a> <a name="Second jump">content</a>
Page link address
Webpage
[Baidu](www.baidu.com) <www.baidu.com>
Local file
[Get started markdown](./LinkTest.md) Absolute and relative addresses are OK
picture
<img src="img/1.jpg" width="" height="" style="float:left/right/center"/>
Local pictures can be copied directly
![Network picture](http://static.runoob.com/images/runoob-logo.png ("remarks")
Right click the page to view the picture link
mathematical formula
The first inline formula: $mathematical formula $
The second outreach formula(Line feed in formula\\):
$$
mathematical formula
$$
I am^Superscript^
I am~subscript~(Pay attention to English characters)
Root sign\sqrt{} \sqrt[]{}
$Launching horizontal line:\underline{a+b}$
$Upper horizontal line:\overline{a+b}$
Upper and lower horizontal braces:
\overbrace{} \underbrace{}
Add a description in parentheses:
$\overbrace{x_1+x_2+x_3}^{3 Elements}$
$\underbrace{x_1+x_2+x_3}_{3 Elements}$
other Typora mathematical formula summary (Markdown) - Zhihu (zhihu.com)
list
Unordered list + one two three four five + Go up the mountain to fight the tiger + The tiger didn't reach + Hit the little squirrel Ordered list 1.one two three four five 2.Go up the mountain to fight the tiger 3.The tiger didn't reach 4.Hit the little squirrel
form
| ------ | ------ | ------ | ------ | :----: | | Up the mountain | Up the mountain | Up the mountain | Up the mountain | Up the mountain | | Fight the tiger | Fight the tiger | Fight the tiger | Fight the tiger | Fight the tiger |``` When not in code mode, press enter ``` :-Indicates left alignment -:Indicates right alignment :-:Indicates middle alignment
quote
>>Mountain tiger >> >>>The tiger didn't reach > >>>>Hit the little squirrel
Code block
code
`code`
Code box
``` I'm a code box ```
Insert expression
We can use:emoji:To insert expressions, such as: :happy:The syntax of is:happy: 🦀The syntax of is:crab: 🐴The syntax of is:horse:
Insert directory
After we have divided the text into chapters for using the title, you can enter[toc]Command automatically generates a directory based on the title
HTML
Currently supported HTML The elements are:<kbd> bold<b> Italics<i> or <em> Upper corner mark<sup> Line feed<br> Block element<div> Inline element<span> paragraph<p> Custom text<font> picture<img>
<kbd>Alt</kbd>
Alt
task
Task list - [space]
task list - []
chart
##Vertical flow chart
graph TD;
A-->B;
A-->C;
B-->D;
Horizontal flow chart
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]
Standard flow chart vertical
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
Standard flow chart horizontal
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
Sequence diagram
sequenceDiagram
Alice->>John: Hello John, how are you?
John-->>Alice: Great!
UML sequence diagram source code example
object A->object B: object B how are you?((request) Note right of object B: object B Description of Note left of object A: object A Description of(Tips) object B-->object A: I'm fine(response) object A->object B: Are you really okay?
UML sequence diagram source code complex example
Title: Title: complex usage object A->object B: object B how are you?((request) Note right of object B: object B Description of Note left of object A: object A Description of(Tips) object B-->object A: I'm fine(response) object B->the other woman: how are you the other woman-->>object A: object B It's me object A->object B: Are you really okay? Note over the other woman,object B: We are friends participant C Note right of C: No one plays with me
UML standard sequence diagram example
%% Sequence diagram example,-> Straight line,-->Dotted line,->>Solid arrow
sequenceDiagram
participant Zhang San
participant Li Si
Zhang San->Wang Wu: Wang Wu, how are you?
loop health examination
Wang Wu->Wang Wu: Fighting disease
end
Note right of Wang Wu: Reasonable food <br/>see a doctor...
Li Si-->>Zhang San: very good!
Wang Wu->Li Si: How are you doing??
Li Si-->Wang Wu: very good!
state diagram
stateDiagram
[*] --> s1
s1 --> [*]
Class diagram
Syntax explanation: < | -- for inheritance, + for public, - for private. Anyone who has studied Java should know.
classDiagram
Animal <|-- Duck
Animal <|-- Fish
Animal <|-- Zebra
Animal : +int age
Animal : +String gender
Animal: +isMammal()
Animal: +mate()
class Duck{
+String beakColor
+swim()
+quack()
}
class Fish{
-int sizeInFeet
-canEat()
}
class Zebra{
+bool is_wild
+run()
}
Gantt chart
Gantt chart is generally used to represent the project schedule, which is often used in work at present.
The syntax is also very simple. From top to bottom, there are picture title, date format, item and item segmentation tasks.
crit means to add a red box, done, active, not after
gantt
title Work plan
dateFormat YYYY-MM-DD
section Section
A task :a1, 2020-01-01, 30d
Another task :after a1 , 20d
section Another
Task in sec :2020-01-12 , 12d
another task : 24d
%% Syntax example
gantt
dateFormat YYYY-MM-DD
title Gantt chart of software development
section Design
demand :done, des1, 2014-01-06,2014-01-08
prototype :active, des2, 2014-01-09, 3d
UI Design : des3, after des2, 5d
Future tasks : des4, after des3, 5d
section development
Learning preparation and understanding needs :crit, done, 2014-01-06,24h
design framework :crit, done, after des2, 2d
development :crit, active, 3d
Future tasks :crit, 5d
Play :2d
section test
functional testing :active, a1, after des3, 3d
Pressure test :after a1 , 20h
Test report : 48h
Pie chart
Pie chart is represented by pie, and below the title are the area name and its percentage.
pie
title Key elements in Product X
"Calcium" : 42.96
"Potassium" : 50.05
"Magnesium" : 10.01
"Iron" : 5
Shortcut key
ctrl + increase Title Level
-ctrl+shift + plus / minus sign can zoom in / out the whole page
-On the right side of the keyboard, locate home to the first line and end to the end of the article
-ctrl+shift + [ordered list, ctrl+shift +] mark paragraphs as small dots (unordered list)
-ctrl + horizontal numeric key n to set the font to N-level title
Select the corresponding language and shift+tab to sort out the code
Pandoc
Use the plug-in to transfer out PDF, word, picture, HTML, EPUB and other formats
Link: https://pan.baidu.com/s/1XKQJsqFm5j43L8udV9KhTw
Extraction code: 2580
Install software
1) First, open the downloaded installation package pandoc-2.0.1.1-windows.msi
2) Do not change the settings, fool operation, the next step is completed
3) Software installed successfully
Test for successful installation
1) Open CMD command prompt
2) Enter the pandoc --version command
3) The pandoc version information will be displayed, indicating that the installation is successful
Then configure the pandon file path in typera. This is my default path (C:\Users158\AppData\Local\Pandoc\pandoc.exe)
sium" : 50.05
"Magnesium" : 10.01
"Iron" : 5
# Shortcut key ctrl+ Increase Title Level \- ctrl+shift+plus/The minus sign can enlarge the whole page/narrow \- Right side of keyboard home Go to the first line, end Go to the end of the article \- ctrl+shift+[ Ordered list, ctrl+shift+]Punctuate paragraphs (unordered list) \- ctrl+Horizontal numeric key n，You can set the font to n Level title Select the corresponding language, shift+tab Sorting code # Pandoc Transfer out using plug-ins PDF,word,Pictures HTML,EPUB Equal format Link: https://pan.baidu.com/s/1XKQJsqFm5j43L8udV9KhTw Extraction code: 2580 Install software 1)First, open the downloaded installation package pandoc-2.0.1.1-windows.msi 2)Do not change the settings, fool operation, the next step is completed 3)Software installed successfully Test for successful installation 1)open CMD command prompt 2)input pandoc --version command 3)Will show pandoc The installation is successful Later in typora to configure pandon File path,This is my default path(C:\Users\86158\AppData\Local\Pandoc\pandoc.exe)
122 ↩︎