Play all Markdown features

Effect:

The picture

Markdown quotes the syntax of the picture:

! [alt](url title)Copy the code

Alt and title correspond to the Alt and title attributes of the IMG element in HTML (both can be omitted) :

• Alt – indicates the replacement text if the image display fails.
• Title – Represents the text that will be displayed when the mouse hovers over the image (note the quotation marks here)
• Url – that is, the URL of the image

Image links

You can mix images and links.

! [logo](https://dunwu.github.io/blog/)

The anchor

In fact, each title is an anchor point, similar to the HTML anchor point (#), such as: back to top

reference

Common quote:

Question: What is a Markdown

Markdown is a lightweight markup language created by John Gruber. It allows people to “write documents in plain text format that is easy to read and write, and then convert them into valid XHTML (or HTML) documents.” [[4]] (https://zh.wikipedia.org/wiki/Markdown#cite_note-md-4) which has absorbed many in [email] email (https://zh.wikipedia.org/wiki/) already in the plain text The characteristics of memory. From the Wiki

Nested references:

The data structure

> tree

>

> > Binary tree

> >

> > > Balanced binary tree

> > >

> > > > full binary tree

Code highlighting

The label

Grammar:

`Markdown` `Doc`Copy the code

Effect:

Markdown, Doc

The code block

Syntax 1: Use three back quotes around the text. 【✔️ recommend 】

This is a text block. This is a text block. This is a text block.Copy the code

Syntax 2: Add 1 Tab or 4 Spaces at the beginning of successive lines of text. 【❌ not recommended 】

This is a text block. This is a text block. This is a text block.Copy the code

grammar

Put the name of the programming language after the three backquotes, start the code on another line, and put three more backquotes on the last line.

public static void main(String[]args){} //JavaCopy the code

int main(int argc, char *argv[]) //CCopy the code

echo "hello GitHub" #BashCopy the code

document.getElementById('myH1').innerHTML = 'Welcome to my Homepage' //javasciptCopy the code

string &operator+(const string& A,const string& B) //cppCopy the code

form

General Form:

Tables can specify alignment:

Emoji face

Bulb note: Some Markdown engines support Emoji.

The proper use of Emoji can make the content of articles more colorful and vivid. Examples: : HeavyCheckmark: :x: : Bulb: : Bell: : HeavyexclamationMark: :question:

For more emojis, see:

– emojihomepage.com/

– www.emoji-cheat-sheet.com

footnote

Note: Some Markdown engines support footnotes.

A text with footnotes. [^ 1]

[^1]: Footnote interpretation

A mathematical formula

Note: Some Markdown engines support Latex.

In many documents, some mathematical symbols and special symbols need to be introduced, and the typesetting problem is quite troublesome. This problem can be solved with Latex, which is supported by most Markdown engines.

Latex can mark Latex expressions with the $sign. Here is an example of a mathematical formula:

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

List some common mathematical symbols:

For more mathematical notation support, see:

– Begin-Latex-in-minutes

– Markdown mathematical symbols and formulas

Diff

Note: Some Markdown engines support Diff.

The diff feature, which shows additions and deletions to a file, is ubiquitous in version control systems. GFM can display the diff effect. You can use a + to indicate additions and a – to indicate deletion.

+ New content - Delete contentCopy the code

UML diagrams

💡 Note: Some Markdown engines support Avi.

Mermaid provides a variety of UML diagrams. Please refer to the Documentation for details

The flow chart

graph LR
    A[Hard edge] -->|Link text| B(Round edge)
    B --> C{Decision}
    C -->|One| D[Result one]
    C -->|Two| E[Result two]Copy the code

Sequence diagram

sequenceDiagram
    Alice->>Bob: Hello Bob, how are you?
    alt is sick
        Bob->>Alice: Not so good :(
    else is well
        Bob->>Alice: Feeling fresh like a daisy
    end
    opt Extra response
        Bob->>Alice: Thanks for asking
    endCopy the code

Gantt chart

gantt dateFormat YYYY-MM-DD title Adding GANTT diagram functionality to mermaid section A section Completed task :done, Des1, 2014-01-06,2014-01-08 Active Task: Active, DES2, 2014-01-09, 3D Future Task: DES3, after DES2, 5D Future task2: des4, after des3, 5d section Critical tasks Completed task in the critical line :crit, done, 2014-01-06,24h Implement Parser and Jison: Crit, done, after des1, 2D Create tests for Parser :crit, active 3d Future task in critical line :crit, 5d Create tests for renderer :2d Add to mermaid :1d section Documentation Describe gantt syntax :active, a1, after des1, 3d Add gantt diagram to demo page :after a1 , 20h Add another diagram to demo page :doc1, after a1 , 48h section Last section Describe gantt syntax :after doc1, 3d Add gantt diagram to demo page :20h Add another diagram to demo page :48hCopy the code

HTML

Some Markdown engines support HTML elements embedded in documents.

Some features that Markdown syntax does not support can be supported using HTML elements.

folding

In the middle

Image size

The editor

The Markdown editor is recommended

• Typora – The most powerful Markdown editor in my opinion.
• Visual Studio Code – You can customize the Markdown editor by installing plug-ins.
• Marktext – a simple and elegant Markdown editor.
• StackEdit – Online Markdown editor.
• Editor.md – Online Markdown Editor.
• Marxico – A Markdown editor built for Evernote.

To learn more about Markdown editors, see: Major Markdown Editor recommendations

The resources

• https://zh.wikipedia.org/wiki/Markdown
• https://github.com/guodongxiaren/README
• markdown-cheatsheet
• Begin-Latex-in-minutes
• https://github.com/mermaid-js/mermaid