Getting started markdown tutorial

Keywords: markdown

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 png picture](./img/Picturet.png)
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)

  1. 122 ↩︎

Posted by timclaason on Tue, 23 Nov 2021 23:33:08 -0800