preface

Markdown is a very useful markup language that can be learned quickly if you have basic HTML.

The demo is all from Typora, why use it, because it is a mature MD editor!

  • What you see is what you get with Markdown, some of which also add human interaction (such as code highlighting)
  • Support formula
  • Support for most extended syntax
  • Support mainstream flowchart rendering

Tips:

The purpose of the article is to give our r & D group of friends quickly start.

Because the front-end part of the document is basically switched to MD maintenance, took some time to record a wave of GIF demo

Basic grammar

The base syntax is the most supported, and most of the major Markdown parsers on the market support it.

Extended syntax needs to be implemented by different plug-ins or libraries, which is not so universal.

Note: all marks support English mode only (half corner)!!

The title

# H1
## H2
### H3
#### H4
##### H5
###### H6
Copy the code

Text emphasize

The bold

** I'm bold **
Copy the code

The bold

_ I'm italic _
* I'm also italic *
Copy the code

Emphasize (Bold + italic)

*** I emphasize, and then beep beep I suck you ***
Copy the code

The list of

An ordered list

The format of an ordered list is: number decimal point + space + text

1. afdslf
2. fsadfae
3. Ewarewr
Copy the code

Unordered list

Format: line (asterisk) + space + text

- asdklfjsaf 
- fasdfsadf 


* Water and electricity Lucas* Sf Express pissed me offCopy the code

List mixing and nesting

Both ordered and unordered lists support multi-level nesting and mixing of ordered and unordered lists.

Todo creep is also supported if some external extensions are added

- A test. - A real test. - You don't believe me1. I'm a level 3 ordered list
2. Ha ha da- alasCopy the code

External links

Format: Square brackets Small brackets (link)

[Click and I jump to Baidu] (https://www.baidu.com) 
Copy the code

Picture reference display

Format: Exclamation mark + external link format. Links support relative references!

! [closeup photo of computer code screengrab] (https://images.unsplash.com/photo-1524666643752-b381eb00effb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=cr op&w=1000&q=80)
Copy the code


Horizontal dividing line

Format: blank line —

Call Dibi -- Dibi answered youCopy the code

reference

Usually when you’re quoting something from somewhere else, you can use this

Format: greater than (>) + space + content

> < p style = "max-width: 100%; clear: both> > I thought it was frost on the ground
> > - This is a poem by ** Li Bai
Copy the code

The inline code

Inline code is generally gray and cannot be highlighted for syntax

Format: back quotes + content + back quotes

`module.exports= ()=>{}`
Copy the code

Expand the grammar

form

The syntax of a table is very simple, just write more, because the more columns you have, the more you write.

Columns are left aligned by default, center and right aligned are also supported, bars are greater than or equal to 3, columns must be closed to represent a column!

  • Default alignment (left alignment) :: -
  • Center aligned::---:
  • Right alignment:- :
The default left-aligned | | center alignment | right-aligned | | : - | : -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- : | -- -- -- -- -- - : Thad the utilities o | | | aston six-pack abs aston send utilities | | | 1321 | 432 | 654645 | | o utilities thad | aston six-pack abs aston send utilities | | | 1321 | | 432 | 654645Copy the code

Code highlighting

The code is highlighted to see which library is used, such as the front end which uses HighlightJS or PRISM. So the highlight support language also depends on whether the highlight library support!!

Copy the code

I’m plain text because I didn’t specify the language

Javascript // I am JS highlight import vue from'vue';
Copy the code
# I'm bash highlight
ls -l | grep 'haha'
Copy the code

The task list

This is very practical, is to show the effect of the to-do list, a variation of the list, can be mixed

  • - [ ] text: Space inside square brackets refers to to-do items
  • -  [x] text: X inside square brackets indicates that the item has been completed
- V1 - [x] User interface through - [] User interface merge- [] Merges duplicate fields
- [] Hehe

Copy the code

Text highlighted

Format: double equal sign + text + double equal sign

=== HEARD I want to bai highlight === == yes == == bright blind ==Copy the code

footnotes

This is the most used thing in literature

Format:

  • Statement:[^text]: description
  • Reference:hello[^text]
[^ li bai] :A drinking poetBright moonlight before my bed [^ Li Bai]Copy the code

Delete the line

You read that right, this is not part of the first version of the draft, and it will come later

Format: two wavy lines + text + wavy lines

~~ I gave delete, you see ~~Copy the code

The subscript

Scale the word so that it can be used to represent the formula class

H~2~o
Copy the code

mermaid

Mermaid is not just a flowchart, you can see how mermaid started


conclusion

Markdown’s standard scheme has never been updated, and most enhancements now rely on third-party implementations. For example, richer table functions, mathematical formulas and so on! But that doesn’t stop MD from being popular, always visible, in the code community, built-in implementation of programming tools, etc. If there is something wrong, please leave a message. Thanks for reading