Markdown grammar collection 2017

Time:2020-3-12

Markdown grammar collection 2017

Short tutorial: https://ouweiya.gitbooks.io/m


1. title

Code

Note: space after ×

# h1
## h2
### h3
#### h4
##### h5
###### h6
#######H7 // error code
########H8 // error code
#########H9 // error code
##########H10 // error code

Demonstration

h1

h2

h3

h4

h5
h6
h7
h8
h9
h10

2. Classification title

Code
Note:= -At least one can be written

First level title

======================
Two level title

---------------------

Demonstration

Markdown grammar collection 2017


3.TOC

Note: the table of contents is generated according to the title, with general compatibility

Code

[TOC]

Demonstration

Markdown grammar collection 2017


4. Quotes

Code 1 (single line)

> hello world!

Demonstration

hello world!

Code 2 (multiline)

> hello world!
hello world!
hello world!    

perhaps

> hello world!
> hello world!
> hello world!

Demonstration

Same result

hello world!
hello world!
hello world!

Code 3 (multiple nesting)

> aaaaaaaaa
>> bbbbbbbbb
>>> cccccccccc

Demonstration

aaaaaaaaa

bbbbbbbbb

cccccccccc


5. In line mark

Note: mark withThe code block will be one line
Code

Outside the 'hello world' tag

Demonstration

Beyond markhello worldBeyond mark

error code
Note: errors of different platforms are slightly different

Beyond the mark` 
< div>   
    < div></div>
    < div></div>
    < div></div>
< /div>
`Beyond the mark

Demonstration

Markdown grammar collection 2017


6. code block

Code 1 (“)”

Note: use ` ` to generate blocks

Markdown grammar collection 2017

Demonstration
Note: keep one empty line from the upstream

<div>   
    <div></div>
    <div></div>
    <div></div>
</div>

Code 2 (Tab)

Note: tab indent

I am the text

    <div>   
        <div></div>
        <div></div>
        <div></div>
    </div>

Demonstration

<div>   
    <div></div>
    <div></div>
    <div></div>
</div>

Code 3 (custom syntax)
Note: configure different code coloring according to different languages

Markdown grammar collection 2017

Demonstration

var num = 0;
for (var i = 0; i < 5; i++) {
    num+=i;
}
console.log(num);

7. Insert link

Code 1 (internal chain)
Note:{:target="_blank"} Jump mode is generally compatible. Most third-party platforms do not support jump

[Baidu 1] (http://www.baidu.com/ "Baidu below") {: target = "_blank"}

Demonstration

Baidu 1

Code 2 (quoted)

[Baidu 2] [3] {: target = "[u blank"}
[2] : http://www.baidu.com/ "Baidu II"

Demonstration

Baidu 2


8. Insert picture

Code 1 (internal chain)

! [name] (. / 01. PNG 'description')

Demonstration

Markdown grammar collection 2017

Code 2 (quoted)

![name][01]
[01]:. / 01. PNG 'description'

Demonstration

Markdown grammar collection 2017


9. Insert picture with link

Code

[! [name] (. / 01. PNG 'Baidu')] (http://www.baidu.com) {: target = "_blank"} // internal chain

[! [name] (. / 01. PNG 'Baidu')] [5] {: target = "_blank"} // referential
[5]: http://www.baidu.com

Demonstration

Markdown grammar collection 2017

Markdown grammar collection 2017


10. Video insertion

Note: markdown syntax does not support direct video insertion
The common way is to insert iframe framework of HTML and get it through the sharing function provided by the website. If you don’t have the second method, you can try it
The second is to forge the playback interface, which is essentially to insert the video image, and then click to jump to the relevant page

Code 1
Note: most third-party platforms do not support insertion<iframe>video

Markdown grammar collection 2017

<iframe height=498 width=510 src='http://player.youku.com/embed/XMjgzNzM0NTYxNg==' frameborder=0 'allowfullscreen'></iframe>

Demonstration

Markdown grammar collection 2017

Code 2

[![youku2](./youku2.png)](http://v.youku.com/v_show/id_XMjgzNzM0NTYxNg==.html?spm=a2htv.20009910.contentHolderUnit2.A&from=y1.3-tv-grid-1007-9910.86804.1-2#paction){:target="_blank"}

Demonstration

Markdown grammar collection 2017


11. order table

Code 1 (ordered)

Note: sequence.Space after

1. one
2. two
3. three

Demonstration

  1. one
  2. two
  3. three

Code 2 (unordered)

* one
* two
* three

Demonstration

  • one
  • two
  • three

Code 3 (sequence table nesting)

1. one
    1. one-1
    2. two-2
2. two 
    * two-1
    * two-2

Demonstration

  1. one

    1. one-1
    2. two-2
  2. two

    • two-1
    • two-2

Code 4 (sequence table nested code block)
Note: line feed + two tabs

* one

    Var a = 10; // keep the line blank and indent with the up line

Demonstration:

  • one

    var a = 10;


12. Task list

Note: compatibility is generally separated by one line

Code

This is the text

-[x] option 1
-[] option 2  
-[] [option 3]

Demonstration

Markdown grammar collection 2017


13. expression

:+1: :-1:

Expression code address


14. form

Note::Represents alignment, :And|No space between, otherwise alignment will be somewhat incompatible

Code 1

|    a    |       b       |      c     |
|:-------:|:------------- | ----------:|
|Center align left align right|
|=========|===============|============|

Demonstration

a b c
Centered Left alignment Right alignment
========= =============== ============

Code 2 (Simplified)

a  | b | c  
:-:|:- |-:
    Center align left align right    
============|=================|=============

Demonstration

a b c
Centered Left alignment Right alignment
========= =============== ============

Code 3 (special form)

Note: Generally speaking, markdown is powerless for merging cells and other special format tables
So the normal way is to use HTML tags, but the writing efficiency is very low.
But with this tool, all problems can be solved.

Generate HTML code online tables generator

Markdown grammar collection 2017

Overseas stations

Demonstration

AAA BBB CCC EEE
SS GGGG
FHHH
ŤT FFFF

15. Support embedded CSS Style

Code

< P style = "color:" ad5d0f; font size: 30px; font family: 'Tahoma'; "> inline style</p>

Demonstration

Markdown grammar collection 2017


16. Semantic mark

describe Effect Code
Italics Italics * Italic *
Italics Italics Italics
Thickening Thickening * * bold * * *
Bold + italics Bold + italics ***Bold + italics***
Bold + italics Bold + italics **_Bold + italics_**
Delete line Delete line ~~Strikeout~~

17. Semantic label

describe Effect Code
Italics Italics <i> Italics < / I >
Thickening Thickening <b>Bold</b>
Emphasize Emphasize <em>Emphasis</em>
Superscript Za Z<sup>a</sup>
subscript Za Z<sub>a</sub>
Keyboard text Ctrl <kbd>Ctrl</kbd>
Line feed <br />

18. Format text

Keep input layout unchanged
Note: the built-in label needs to be damaged to display

Code

<pre>
hello world 
         hi
  hello world 
</pre>

Demonstration

Markdown grammar collection 2017

Error resolution
Note: add a space inside the label orDirectly use the ` ` tag to process

Code 1 (insert space)

<pre>
    < div>   
        < div>< /div>
        < div>< /div>
        < div>< /div>
    < /div>
</pre>

Demonstration

Markdown grammar collection 2017

Code 2 (` ` ` code block mark)

Markdown grammar collection 2017

Demonstration

<div>   
    <div></div>
    <div></div>
    <div></div>
</div>

19. Formula {× 1}

Note: 1 $left aligned, 2 centered

Code

$$ x \href{why-equal.html}{=} y^2 + 1 $$
$ x = {-b \pm \sqrt{b^2-4ac} \over 2a}. $

Demonstration

$$ x \href{why-equal.html}{=} y^2 + 1 $$
$ x = {-b \pm \sqrt{b^2-4ac} \over 2a}. $


20. separator

Note: at least three---or*** or* * *

Code

***
---
* * *

Demonstration




21. footnotes

Code

Markdown[^1]
[^ 1]: markdown is a plain text markup language // display footnotes at the end of the article

Demonstration

Markdown1


22. anchor points

Code
Note: onlyTitleSupport the anchor to jump to the directory and keep the space after square brackets

[Formula Title anchor point] (ා1)

###[directory to jump] {ා1} // space after square brackets

Demonstration

Formula Title anchor


23. Definition list

Note: interpretive definition
Code

Markdown 
: lightweight text markup language, which can be converted to HTML, PDF and other formats // the first `: '+ ` tab' or four spaces

Code block definition
:    Code block definition……

        Var a = 10; // keep a blank line and indent progressively

Demonstration

Markdown grammar collection 2017


24. Automatic mailbox link

Code

<[email protected]>

Demonstration

Markdown grammar collection 2017


25. flow chart

Code 1

St = > Start: start | past: > http://www.baidu.com // start
E = > end: end // end
C1 = > condition: condition 1: > http://www.baidu.com [_parent] // judge condition
C2 = > condition: condition 2 // judgment condition
C3 = > condition: condition 3 // judgment condition
IO = > inputoutput: output // output
//----------------The above are defined parameters-------------------------

//----------------The following are the connection parameters-------------------------
//Start - > judgment condition 1 is no - > judgment condition 2 is no - > judgment condition 3 is no - > output - > end
st->c1(yes,right)->c2(yes,right)->c3(yes,right)->io->e
C1 (no) - > e // condition 1 not met - > end
C2 (no) - > e // condition 2 not met - > end
C3 (no) - > e // condition 3 not met - > end

Demonstration

St = > Start: Start: > http://www.baidu.com [blank]                
E = > end: end    
C1 = > condition: condition 1: > http://www.baidu.com [_parent]
C2 = > condition: condition 2
C3 = > condition: condition 3
IO = > Input Output: output
u=>type: content:>

st->c1(yes,right)->c2(yes,right)->c3(yes,right)->io->e
c1(no)->e
c2(no)->e
c3(no)->e

Code details

The flow chart is divided into two parts:Defining parametersThen?Connection parameter

Definition example:

Tag = > type: content: > URL // parameter format    
St = > Start: Start: > http://www.baidu.com [blank] // parameter format

Note: St = > Start: startOfSpace after

Formal parameter Real reference Meaning
tag st Label (customizable)
=> => assignment
type start Type (6 types)
content start Description content (customizable)
:>url http://www.baidu.com[blank] Link and jumpPoor compatibility
6 types Meaning
start start-up
end End
operation program
subroutine subroutine
condition condition
inputoutput output

Connection example:

st->c1(yes,right)->c2(yes,right)->c3(yes,right)->io->e
Start - > judgment condition 1 is no - > judgment condition 2 is no - > judgment condition 3 is no - > output - > end
Formal parameter Real reference Meaning
-> -> Connect
condition c1 condition
(Boolean, direction) (yes,right) If the connection to the right is satisfied, the four directions are: right, left, up, down. The default value is: down

Note: for operation, subroutine and condition, the connection direction can be added in brackets.

operation(right) 
subroutine(left)
Condition (yes, right) // only condition can add Boolean value

Code 2

Note: adding styles and URL jumps requires adding third-party scripts,
The actual effect is very poor, which is troublesome and of little significance

St = > Start: start | past: > http://www.baidu.com [blank] // start
E = > end: end // end
OP1 = > operation: scheme 1 // operation 1
Sub2 = > subroutine: scheme 2 | approved: > http://www.baidu.com [| parent] // operation 2
Sub3 = > subroutine: reformulate scheme // operation 2
Cond1 = > condition: OK? |Request // judgment condition 1
Cond2 = > condition: OK? //Judgment condition 2
IO = > Input Output: satisfied result // output

//Start - > scheme 1 - > judgment condition - >
st->op1->cond1
//Judgment condition 1 is no - > scheme 2 - > judgment condition 2 is no - > reformulate scheme - > scheme 1
cond1(no,right)->sub2->cond2(no,right)->sub3(right)->op1
Cond1 (yes) - > IO - > e // judgment conditions are met - > output - > end
Cond2 (yes) - > IO - > e // judgment conditions are met - > output - > end

Demonstration

Markdown grammar collection 2017

Author address: flowchart.js

Effect of general support

St = > Start: start | past: > http://www.baidu.com [blank]         
E = > end: end          
OP1 = > operation: scheme I     
Sub2 = > subroutine: scheme 2 | approved: > http://www.baidu.com [| parent]   
Sub3 = > subroutine: make a new plan
Cond1 = > condition: OK? |request   
Cond2 = > condition: OK?    
IO = > Input Output: satisfactory result   

st->op1->cond1
cond1(no,right)->sub2->cond2(no,right)->sub3(right)->op1
cond1(yes)->io->e
cond2(yes)->io->e

26. sequence diagram

Code 1

A - > > b: Hello
Note left of a: I'm on the left // Note direction, only left and right, not up and down
Note right of B: I'm on the right
B -- > A: nice to meet you

Demonstration

Markdown grammar collection 2017

Code details

Note:A - > > b: HelloYou can leave the text behind, butMake sure to add at the end
Note left of a means that the note is on the left of a

Symbol Meaning
- Solid line
> Solid arrow
-- Dotted line
>> Hollow arrow

Code 2

Get up - > eat: porridge and fried dough sticks
Eat - > go to work: don't be late
Go to work - > lunch: full of food
On duty - > off duty:
Note right of off duty: off duty
After work - > Home:
Note right of home: Home
Go home and get up:
Note left of getting up: a new day

Demonstration

Markdown grammar collection 2017

27. Generate sidebar extension

Note: to generate sidebar, insert JS, and then template,
Generally speaking, it’s very troublesome, the effect is general, and we won’t explain it in detail.

Author’s warehouse: i5ting ﹣ ztree ﹣ TOC

Markdown grammar collection 2017

Streamlined: author blog haleypku


END


  1. Markdown is a plain text markup language A kind of

Recommended Today

Large scale distributed storage system: Principle Analysis and architecture practice.pdf

Focus on “Java back end technology stack” Reply to “interview” for full interview information Distributed storage system, which stores data in multiple independent devices. Traditional network storage system uses centralized storage server to store all data. Storage server becomes the bottleneck of system performance and the focus of reliability and security, which can not meet […]