The use of Markdown | Markdown syntax

Tag

markdown
Copy the code

0.1. Markdown grammar basics

😀 Help website:

Latex formulas generate websites
The word rich text generated HTML | reference site

While the title

Headings are HTML head tags

Understand: similar to the word of the title, outline (outline) or directory role: reveal the article, the main content of the paragraph, point, corresponding to the HTML tag < h1 > ~ < h6 >, so it is 6 title Tips: Typora can be generated by Ctrl/ Command + numeric shortcut keys

grammar

# titlesCopy the code

example

# I'm a primary title # # # # # I am a secondary title I is 3 title # # # # I am 3 headlines # # # # # I am cet 4 # # # # I'm five titles # # # # # # I am six levels of headingsCopy the code

The effect

0.1.2. Text styles

1, the bold

** I'm bold ** or __ I'm bold __Copy the code

The effect

I’ve been bolded or I’ve been bolded

2. Delete the line

~~ I was deleted ~~Copy the code

The effect

~~I was deleted~~

3. Quote text

> I'm quoted >> I'm level 2 embedded reference >>> I'm level 3 embedded referenceCopy the code

The effect

I was quoted

I’m a secondary inline reference

I’m level 3 inline reference

4, italics

* I'm italicized *Copy the code

The effect

I’m italicized

List of 0.1.3.

1. Unordered lists

grammar

- project1+ project2* project3
Copy the code

The effect

Project 1

Project 2

Project 3

Minus plus star will do

2. Ordered lists

grammar

1.project1
2.project2
3.project3
Copy the code

The effect

Project 1
Project 2
Project 3

Note: there are Spaces between. And project text

3. Matters to be handled

grammar

- [] Mission - [x] Complete missionCopy the code

The effect

Task agents
To complete the task

0.1.4. Hyperlinks

1. Common links

Normal link or automatic link

Markdown supports shorter autolinks for web addresses and E-mail addresses, as long as they are wrapped in <>

<链接资源地址>
<https://www.bing.com>
Copy the code

www.bing.com

2. Text hyperlinks

Links: [link] (HTTP://www.bing.com)
Copy the code

Links: link

3. Hyperlinks with title prompt text

[Display text] (URL title)/ / instance
[google](https://www.google.com "This is a 404 not open website, hahaha ")
Copy the code

The effect

google

PS: When the mouse hovers over the link, a prompt will appear

Just put “write the title content here” after the () link

4. Reference links

Function:

Used for citation in academic papers
Such as a link repeatedly referenced in the article, can be unified management

grammar

[bing][1]

[1]: https:www.bing.com
Copy the code

The effect

bing

PS: Not all Markdown editors are supported

Schematic diagram:

Clicking on ‘Show text’ or ‘bing’ will take you to the link [1] that follows

5, footnotes

Explain the content (keyword, paragraph)

grammar

Keyword (^1]

[^1[: The footnote explains the textCopy the code

1 keyword

PS: In Typora, Ctrl + mouse click the footnote to jump to the explanatory text

For other editors that support markdown syntax, footnotes are automatically moved to the end of the article, and the links behind the footnotes jump straight back to where they were added.

Click the icon to return to the article content area

Picture 0.1.5.

grammar

! [Icon description text](Image resource address)/ / instanceImages:! [This is a description of a picture](HTTPS://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6fb241d52f784a5f8f75e2b74e840aa3~tplv-k3u1fbpfcp-zoom-1.image)    
Copy the code

Effect: A picture that can be displayed normally

Image Alt

When a picture link fails, it indicates that the area is a picture

! [image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6c85195b0d69432bb4ea50355db5e880)
Copy the code

Effect: An image that does not display properly

If no description is written, it will not be displayedTypora, whether he wrote a description or not, was saying here’s a picture

0.1.6. The code block

1. Inline code blocks

Markdown is based on the Markdown renderer to render the page to achieve layout, page beautification effect

Line code block, can be highlighted text prompt

2. Code interval

Programming language/ / code` ` `Copy the code

The instance

		```java
		    class codeBlock{
		        public static void main(Strings args[]){
		            System.out.println("Hello world!"); }} ` ` `Copy the code

The effect

// A block of Java code with syntax highlighting
class codeBlock{
   public static void main(Strings args[]){
       System.out.println("Hello world!"); }}Copy the code

// A block of javascript code with syntax highlighting
var foo = 'bar';
Copy the code

0.1.7. Table

1. Markdown grammar

grammar

Head | | form form head | | -- - | -- - | | | | values// ------ example ------Project Value | | | | -- - | -- - | | computer | $%1600| | | $phone12| | | $catheters1 | 
Copy the code

The effect

project	Value
The computer	$% 1600
Mobile phone	$12
The catheter	The $1

Markdown has different extension syntax for renderers based on different platforms

Use: to set the alignment

grammar

| column1| column2| column3: | | -- - | : - : | - | | | center aligned right left aligned | |Copy the code

Column 1	Column 2	Column 3
Align right	Align center	The left

2. Use HTML syntax

Markdown essentially renders text to HTML format using the Markdown renderer, although you can generate tables using native HTML syntax

<table>
    <tr>
        <th rowspan="2">The personnel on duty</th>
        <th>Monday</th>
        <th>Tuesday</th>
        <th>Wednesday</th>
    </tr>
    <tr>
        <td>Li Qiang</td>
        <td>Zhang Ming</td>
        <td>Wang ping</td>
    </tr>
</table>
Copy the code

The effect

The personnel on duty	Monday	Tuesday	Wednesday
The personnel on duty	Li Qiang	Zhang Ming	Wang ping

0.1.8. —- Advanced —-

0.1.9. LaTex mathematical formula

Reference documentation

Latex has many uses and can also be used in typography to introduce common mathematical formula functions

grammar

$Latex formula $or $$Latex formula $$// ---- example ----
$\Gamma(n) = (n-1)! \quad\forall n\in\mathbb n $is obtained by Euler integral $$\Gamma(z) = \int_0^\infty t^{z-1}e^{-t}dt\,.
$$
Copy the code

The effect

$\Gamma(n) = (n-1)! \quad\forall n\in\mathbb N$

It’s Euler Integral

\Gamma(z) = \int_0^\infty t^{z-1}e^{-t}dt\,.

Insert a chart

1. Gantt chart

S03e01 s03E01 dateFormat YYYY-MM-DD Title Adding Gantt Diagram Functionality to S03E01 Section s03E012014-01-06.2014-01-08 Ongoing :active, DES2,2014-01- 09,3dPlanned: DES3, after Des2,5d` ` `Copy the code

The effect

Gantt dateFormat YYYY-MM-DD Title Adding Gantt Diagram Functionality to S03E01 Section existing task completed: Done, DES1, 2014-01-06,2014-01-08 Ongoing :active, DES2, 2014-01-09, 3D planning: DES3, after DES2, 5D

Reference documentation

2. Sequence diagram

S03e04 How do you do? How are you doing, Li Si? Wang Wu: How are you doing, Wang Wu? Tom: I'm fine, thank you! Wang Wu: I'm fine, thanks! Li Si thought for a long time. The text was too long to fit on one line. Li Si -->> Zhang SAN: Looking at Wang Wu... Zhang SAN ->> Wang Wu: Good... How are you, Wang Wu? ` ` `Copy the code

The effect

Li Si: Hello! How are you doing, Li Si? Wang Wu: How are you doing, Wang Wu? Tom: I'm fine, thank you! Wang Wu: I'm fine, thanks! Li Si thought for a long time. The text was too long to fit on one line. Li Si -->> Zhang SAN: Looking at Wang Wu... Zhang SAN ->> Wang Wu: Good... How are you, Wang Wu?

Reference documentation

3. Flow chart

` ` ` mermaid graph LR [rectangle] - link - - > B ((round)) -- -- > C (rounded rectangle) B > D {A} diamond C -- - > D ` ` `Copy the code

The effect

Graph LR [rectangle] - link - - > B ((round)) -- -- > C (rounded rectangle) B > D {A} diamond C -- - > D

Reference documentation

4, the class diagram

     ```mermaid
        classDiagram
            Class01 <|-- AveryLongClass : Cool
            <<interface>> Class01
            Class09 --> C2 : Where am i?
            Class09 --* C3
            Class09 --|> Class07
            Class07 : equals(a)Class07 : Object[] elementData
            Class01 : size(a)Class01 : int chimp
            Class01 : int gorilla
            class Class10 {
                >>service>>
                int id
                size(a)} ` ` `Copy the code

The effect

   classDiagram
       Class01 <|-- AveryLongClass : Cool
       <<interface>> Class01
       Class09 --> C2 : Where am i?
       Class09 --* C3
       Class09 --|> Class07
       Class07 : equals()
       Class07 : Object[] elementData
       Class01 : size()
       Class01 : int chimp
       Class01 : int gorilla
       class Class10 {
           >>service>>
           int id
           size()
       }

Reference documentation

I am a footnote to explain the text ↩

The use of Markdown | Markdown syntax

0.1. Markdown grammar basics

While the title

0.1.2. Text styles

List of 0.1.3.

0.1.4. Hyperlinks

Picture 0.1.5.

0.1.6. The code block

0.1.7. Table

0.1.8. —- Advanced —-

0.1.9. LaTex mathematical formula

Related Posts

Microservice Architecture (Examples and Diagram)

Python crawler exercises small composition download! Tutoring son composition has material!

LeetCode everyday Tree: 108 Turns an ordered array into a binary tree