Programming skills │ amazing syntax of advanced markdown editor

Catalog

• • markdown Editor
  • Paragraph title
  • Font style
  • Paragraph references
  • Separation line
  • Insert a picture
  • Hyperlinks
  • Unordered list
  • Ordered list
  • Insert code
  • Insert table
  • Code diff
  • The mathematical formula
  • Footnotes
  • flow chart

markdown Editor

• markdown Editor is an easy to read and write plain text format to write documents
• Exclusive to programmers markdown Editor , You don't know how to use it yet
• Anyway, if you want to get rid of the stereotyped article layout, use it
• There are some markdown The editor also provides a variety of topics , Make your article look very cool
• And for the picture 、 Chart 、 The mathematical formula All have support.
• Now basically all technology websites support the use of Markdown To write help documents or to post messages and comments on forums

Paragraph title

• grammar

#  This is the first level title 
##  This is the secondary title 
###  This is a three-level title 
####  This is the fourth level title 
#####  This is a five level title 
######  This is a six level title 

• effect

Font style

• grammar

** This is bold text **

* This is slanted text *
_ This is slanted text _

*** It's in bold and italics ***
**_ It's in bold and italics _**

~~ This is the text with strikeout ~~

• effect

This is bold text
This is slanted text
This is slanted text
It's in bold and italics
It's in bold and italics
This is the text with strikeout

Paragraph references

• grammar

#  You can recurse infinitely 
> This is the quote 
>> This is the quote 
>>>>>>>>>> This is the quote 

• effect

This is the quote

This is the quote

This is the quote

Separation line

• grammar

---
----
***
*****

• effect

Insert a picture

• grammar

#  The first most common way to insert 
![ Picture title ](https://img-home.csdnimg.cn/images/20220524100510.png)

#  The second kind of picture with size 
![ Picture title ](https://img-home.csdnimg.cn/images/20220524100510.png =60x60)

#  The third kind of width determines the height of an equally proportional picture 
![ Picture title ](https://img-home.csdnimg.cn/images/20220524100510.png =60x)

#  The fourth height determines the width of the proportionate picture 
![ Picture title ](https://img-home.csdnimg.cn/images/20220524100510.png =x60)

#  The fifth kind of centered picture 
![ Picture title ](https://img-home.csdnimg.cn/images/20220524100510.png#pic_center)

#  The sixth kind is centered and sized pictures 
![ Picture title ](https://img-home.csdnimg.cn/images/20220524100510.png#pic_center =60x60)

#  The seventh picture on the right 
![Alt](https://img-home.csdnimg.cn/images/20220524100510.png#pic_right)

• effect

Hyperlinks

• grammar

[ Link name ]( Hyperlink address )
#  Example 
[ Flying rabbit blog homepage ](https://autofelix.blog.csdn.net/)

• effect

Flying rabbit blog homepage

Unordered list

• grammar

-  List content 
+  List content 
*  List content 

• effect
• List content

• List content

• List content

Ordered list

• grammar

#  Digital plus dot 
1.  List content 
2.  List content 
3.  List content 

• effect

1. List content
2. List content
3. List content

Insert code

• grammar

#  Single line code syntax 
` Code content `

#  Multi line code syntax ,\ Need to get rid of 
\```java ... Code content ... ... Code content ... ... Code content ... \```

• effect

public class _ {
    
    public static void main(String[] args) {
    
        System.out.println(" I'm brother flying rabbit ");
    }
}

Insert table

• grammar

|  full name  |  Age  |  grade  |
|-|-|-|
| Geek flying rabbit |23| Freshman |
| Flying rabbit |28| Senior |

• effect

Code diff

• grammar

#  among \ Need to get rid of 
​\```diff const unique = (arr) => {
      - return Array.from(new Set(arr)) + return [...new Set(arr)] } \```

• effect

const unique = (arr) => {
	- return Array.from(new Set(arr))
	+ return [...new Set(arr)]
}

The mathematical formula

• grammar

#  How to use in line formula 
$E=mc^2$

#  How to use block formula 
$$H(D_2) = -\left(\frac{
    2}{
    4}\log_2 \frac{
    2}{
    4} + \frac{
    2}{
    4}\log_2 \frac{
    2}{
    4}\right) = 1$$

#  matrix 
$$
  \begin{
    pmatrix}
  1 & a_1 & a_1^2 & \cdots & a_1^n \\
  1 & a_2 & a_2^2 & \cdots & a_2^n \\
  \vdots & \vdots & \vdots & \ddots & \vdots \\
  1 & a_m & a_m^2 & \cdots & a_m^n \\
  \end{
    pmatrix}
$$

• effect

$$H(D_2)=-\left(\frac{2}{4}{\log }_2\frac{2}{4}+\frac{2}{4}{\log }_2\frac{2}{4}\right)=1$$

$$\left(\begin{array}{ccccc}1& a_1& a_1^2& \cdots & a_1^n\\ 1& a_2& a_2^2& \cdots & a_2^n\\ ⋮& ⋮& ⋮& \ddots & ⋮\\ 1& a_m& a_m^2& \cdots & a_m^n\end{array}\right)$$

Footnotes

• grammar
• Please pull the footnotes to the bottom

 Geek flying rabbit  [^1]  Committed to taking you to do something interesting  [^2], I hope you can apply  Markdown[^Ty]  Editor to write 
[^1]:  Brother flying rabbit is a winner CSDN Field star 、 Alibaba cloud expert Blogger 、 Expert bloggers with various titles such as Huawei yunyun experts 
[^2]:  Of course, the interesting thing is to teach you how to roll yourself better 
[^Ty]:  Programmer specific editor , Don't tell me you can't use it yet 

• effect

Geek flying rabbit ¹ Committed to taking you to do something interesting ², I hope you can apply Markdown³ Editor to write

flow chart

• grammar

```mermaid flowchat st=>start:  Start  op=>operation:  Go to the homepage of brother flying rabbit's blog  cond=>condition:  yes / no ? e=>end st->op->cond cond(yes)->e cond(no)->op &```

• effect