Markdown grammar learning

Time:2020-6-28

Markdown grammar learning

Reading instructions

  • This note is inMark flying elephantOn the basis of the introduction of, we have rearranged and improved the introduction of basic grammar. If it is helpful for you to watch, you can use mark Feixiang to support the original author.

  • Organize in a hurry. If you find something missing and you are reading it, please correct it. I will make changes as soon as possible to help more people who can see it later.

Content supplement

  • Last modified time of current version:2015.12.12

  • Reverse meaning with \, such as \ > reference, * *, etc

  • New flowchart syntax and explanation


catalog

  • Markdown grammar learning

    • Grammatical supplement

    • About markdown

    • Basic grammar

      -[title] (ාtitle)
      -[separator line] (ා separator line)
      -[emphasis] ((emphasis)
      -[link] (ා link)
      -[picture] (ාpicture)
      -[list] (ාlist)
      -[form] (ාform)
      -[reference] (ා reference)
      -[code block] (ා code block)
    • Extended syntax

      • check box

      • Latex formula

        • flow chart

        • Flowchart syntax and explanation

        • Sequence diagram


About markdown

Markdown is a lightweight markup language that allows people to write documents in plain text format that is easy to read and write, and then convert them into rich HTML pages. ——Wikipedia

What you are reading now is to use simple symbols to identify different titles and mark some texts asboldperhapsItalics, create a link


Basic grammar

title

`\#The number indicates the title size,
\#Title One
\##Title Two
\###Title Three
\####Title 4
\#####Title 5
\######Title 6`

The style shown

Title One

Title Two

Title Three

Title 4

Title 5
Title 6

Separator line

By using the separation line, the content can be kept at a distance, making it easier for readers to read.
The syntax is***
be careful: use * * *, or — (three minus signs), or___ (three underscores) can achieve this effect.
The effect is as follows


emphasize

Use*Bold emphasis*To achieve the effect of including content emphasis
The effect isBold emphasis
Use * italicized emphasis * to achieve the effect of including content emphasis
The effect isItalicized emphasis


link

Syntax \ [Baidu]( www.baidu.com )To achieve the effect of linking
The effect is Baidu
In addition, the link part can be changed to the title in the article to realize the anchor link in the article
Syntax \ [basic syntax] (ා basic syntax)
Effect as basic grammar


picture

The syntax is very similar to the link, but add one in front!
Syntax \! [picture name] (picture link)
Note that some markdown does not support the upload of local files, and the images need to have a network address. However, screenshots can be uploaded directly or dragged to upload directly on the “brief book”, which is very convenient.


list

The list includes sequence list and unordered list
It’s very simple
\1. Orderly 1
\2. Orderly 2
The effect is

  1. Order 1

  2. Order 2

And the unordered syntax is
\- disorder
\* disorder
\+ disorder

be careful: use -, *, + to realize disordered arrangement, and there is no order. But disorder has an inclusive relationship. In markdown’s syntax, the highest level disorder is the entity black center circle, the next level is the hollow circle, and the second level is the entity square.
In addition, the sequence list and the unordered list need to be separated. Otherwise, there will be some typographical errors. You can experience them and understand what I mean.

Normal effect display


form

The grammar of the table is a little troublesome in the basic grammar, but according to the actual use of porridge, you can master it in two or three times. Here you will also introduce it as carefully as possible for other readers to check it.
Syntax:
First column \ | header 1| header 2| header 3|
Second column\|—-|——|——|be careful: there must be a list of contents in the second column \ vertical line to display. For example, we add the following table information.

|Item | price | quantity|
| :--- | -----:| :---: |
|Computer ¥ 5600 | 5|
|Cell phone | 4300 | 12|
|Refrigerator ¥ 3100 | 234|

The effect is as follows

project Price number
computer ¥5600 5
mobile phone ¥4300 12
iPad ¥3100 234

supplement: you may notice that in the second column, \, the goods are used for alignment. The syntax is as follows:
Align left:—-
Right: —:
Center: ——:

It’s easy for you to understand it in practice by trying it once or twice.


quote

The syntax is \ > reference content
Nested syntax is \ > > reference can also be nested
The effect is

References

References can also be nested


Code block

Here’s a bunch of code
If it’s one line, you can use code content`

The effect is as follows
Code content
If it’s too much, direct`Code block content`
The effect is as follows

@requires_authorization
def somefunc(param1='', param2=0):
    '''A docstring'''
    if param1 > param2: # interesting
        print 'Greater'
    return (param2 - param1 + 1) or None
class SomeClass:
    pass
>>> message = '''interpreter
... prompt'''

Extended syntax


check box

use- [ ]and- [x]Syntax can create check boxes to implement todo list and other functions. The effect is as follows:

  • [x] Completed items

  • [] to do 1

  • [] to do 2


Latex formula

You can create inline formulas, such as $\ gamma (n) = (n-1)! \ Quad \ forall n \ in \ mathbb n $. Or block level formula:

The effect is as follows
$$ x = \dfrac{-b \pm \sqrt{b^2 – 4ac}}{2a} $$


flow chart

Flowchart and timing belong to the extended syntax in markdown, so it may not display the effect in some pages that only support the basic syntax editor. You can try something else, but if it is too troublesome, it will be better to use other more professional flowchart tools. After all, MD is more suitable for marking text information. If you want to see the actual effect, you cancopyThe following code to mark Feixiang’s online editor to try.
Here is mainly to add some knowledge collected from porridge.

st=>start: Start|past:>http://www.google.com[]
e=>end: End:>http://www.google.com
op1=>operation: My Operation|past
op2=>operation: Stuff|current
sub1=>subroutine: My Subroutine|invalid
cond=>condition: Yes 
or No?|approved:>http://www.baidu.com
c2=>condition: Good idea|rejected
io=>inputoutput: catch something...|request

st->op1(right)->cond
cond(yes, right)->c2
cond(no)->sub1(left)->op1
c2(yes)->io->e
c2(no)->op2->e

Flowchart syntax and explanation

The syntax is as follows

flow
st=>start: Start|past:>http://www.google.com[blank]
e=>end: End:>http://www.google.com
op1=>operation: My Operation|past
op2=>operation: Stuff|current
sub1=>subroutine: My Subroutine|invalid
cond=>condition: Yes 
or No?|approved:>http://www.baidu.com
c2=>condition: Good idea|rejected
io=>inputoutput: catch something...|request

st->op1(right)->cond
cond(yes, right)->c2
cond(no)->sub1(left)->op1
c2(yes)->io->e
c2(no)->op2->e

The syntax of flowchart can be roughly divided into two parts. The first part is used to define elements, and the second part is used to connect elements
For example, tag = > type: content: > URL

  • Defining elements
    Tag is a label, which is used in the second section of connecting elements

Type is the type of this tag. Common types are

- start
- end
- operation
- subroutine
- condition
-inputoutput

Condition is the content to be written in the box of flow chart, both in Chinese and English. However, there must be a space between the colon after type and the text. Otherwise, there will be a problem. The URL points to a connection and is bound to the text in the box.
  • Connecting elements

    Directly use - > to connect two elements. Condition has two branches: Yes and No. therefore, it should be written as cond (yes) cond (no)

Sequence diagram:

Alice->Bob: Hello Bob, how are you?
Note right of Bob: Bob thinks
Bob–>Alice: I am fine, thanks!

The effect is as follows

Alice->Bob: Hello Bob, how are you?
Note right of Bob: Bob thinks
Bob–>Alice: I am fine, thanks!

>* * Note: * * to learn more, please see * * flowchart * * [syntax] [3] and * * sequence diagram * * [syntax] [4].







  [1]: http://maxiang.info/client_zh
  [2]: https://chrome.google.com/webstore/detail/kidnkfckhbdkfgbicccmdggmpgogehop
  [3]: http://adrai.github.io/flowchart.js/
  [4]: http://bramp.github.io/js-sequence-diagrams/
  [5]: https://dev.yinxiang.com/doc/articles/enml.php