What is a markdown?

  • Markdown is a lightweight markup language that allows you to add Markdown format elements to plain text files through a text editor application;
  • Markdown files are typically converted to HTML and PDF files for preview and delivery;

Why use Markdown instead of a WYSIWYG (what you see is what you get) editor (such as an application like Microsoft Word)?

  • Markdown can be used for everything. People use it to create websites, documents, notes, books, presentations, emails and technical documents.
  • Markdown is portable. Markdown refers to the fact that ordinary applications can open Markdown files (e.g. Code development tools such as vsCode, Atom, sublimetext), unlike Word processing applications such as Microsoft Word, which lock text content into proprietary file formats;
  • Markdown is platform-independent and you can create files in Markdown format on any operating system;
  • Markdown is widely used, supported by popular sites like GitHub;

Try Markdown

  • Use online editor Dillinger. Online editor is convenient because you don’t have to download anything.
  • Create a.md (or.markdown) ending file (such as readme.md) on your local file system and use the appropriate editor (vscode is recommended). Open to try and preview Markdown syntax.

Markdown basic syntax

Note: If you prefer HTML tags in contrast, you can use HTML tags in Markdown. Try 😎.

Markdown title

The number of # symbols represents the level of headings (h1 to H6 headings).

# I am level 1 title equivalent to < H1 > I am level 1 title </ H1 > ## I am level 2 title equivalent to <h2> I am level 2 title </h2> ### I am level 3 title equivalent to <h3> I am level 3 title equivalent to </h3> #### I am level 4 title equivalent < h4 > I am cet 4 title < / h4 > # # # # # I'm a primary title Equivalent to < h5 > I'm five title < / h5 > # # # # # # I am six levels of headings Six levels of headings is equivalent to the < h6 > I < / h6 >Copy the code

Alternative syntax for title level one (#) and title level two (##)

Note: any number of = signs below the text indicates a level 1 heading, and any number of – signs below the text indicates a level 2 heading

# level 1 headings are equivalent to level 1 headings ======= # level 2 headings are equivalent to level 2 headings ------Copy the code

The paragraph

Equivalent to the P tag. Use blank lines to separate one or more lines of text (make sure the line is blank or it won’t form a paragraph).

I'm paragraph one. I'm paragraph twoCopy the code

A newline

Equivalent to the BR tag, add two or more Spaces after the first line of text and then enter to complete the line feed.

I'm the first row and I'm the second rowCopy the code

The bold

Equivalent to the strong tag. Place bold text between two asterisks or underscores.

Are you Daniel Wu? Strong > </strong> My preference for using the __VUE__ framework is equivalent to my preference for using the <strong>VUE</strong> frameworkCopy the code

italics

Equivalent to EM label. Add bold text between an asterisk or underscore.

Are you Daniel Wu? Are you Daniel Wu (Daniel Wu)? My preference for using the _VUE_ framework is equivalent to my preference for using the <em>VUE</em> frameworkCopy the code

Bold and italic

It is a combination of strong and EM labels. Add bold text between three asterisks or underscores.

Are you Daniel Wu ****? Strong ></ em></strong> My preference for using the ___VUE___ framework is equivalent to my preference for using the <strong><em>VUE</em></strong> frameworkCopy the code

Piece of reference

> I'm a quote > I'm a quoteCopy the code

I’m a quote I’m a quote

Nested references

> Books are the ladder of human progressCopy the code

study hard and make progress every day

Books are the ladder of human progress

Block references can contain other elements

> #### what front-end frameworks have you learned? > + vue > + react > + angularCopy the code

What front-end frameworks have you learned?

  • vue
  • react
  • angular

An ordered list

Note: The list item must start with a digit (which can be random) with a dotted point (e.g. 1.xxxxxx), but the digit may not increase as the list item increases. Equivalent to a combination of OL and LI labels.

Vue 1. React 1. JqueryCopy the code
  1. A brief
  2. Daniel wu
  3. Peng also makes sense
  4. vue
  5. react
  6. jquery

Unordered list

It’s ul and LI. Create unordered items with dashes (-), asterisks (*), plus (+)

- html
- css
* react
* vue
+ javascript
+ typescript
Copy the code
  • html
  • css
  • react
  • vue
  • javascript
  • typescript

code

Equivalent to code tag

Example: Enter 'NPM run start' as promptedCopy the code
  • Example: Enter information as promptednpm run start

A horizontal line

Three or more asterisks (*), dashes (–), underscores (______)

*** 
--- 
___ 
Copy the code

link

Add links and hover titles for keywords.

[Click me to Baidu](http://baidu.com "I am title - Baidu ")Copy the code

Click me to Baidu

Website and email address

<http://baidu.com>
<[email protected]>
Copy the code

baidu.com [email protected]

The picture

Picture display and set caption

![θ‘¨ζƒ…εŒ…](./3.jpg "要人老命")
Copy the code

Reference style link

Adding a reference link to the text is equivalent to the link described above. A reference style link contains two parts denoted by two brackets: [vue][n]; Where n is equivalent to a parameter that accepts externally defined variable n;

Good good study [vue] [2], πŸ˜„ [2] : < https://vue3js.cn/docs/zh > 'vue3. Js'Copy the code

Learn vUE well.

Extended syntax

Because the basic syntax above does not meet people’s needs, many needed elements are added.

form

  • Basic form
| name | age |
| ---- | --- |
| jack | 18  |
Copy the code
name age
jack 18
  • Text alignment
| in the | title2 | title3 | | : -- -- -- -- -- -- -- - | - : | : - : | | | right aligned left align | | centerCopy the code
title title2 title3
The left Align right Align center

The code block

  • Create a code block by indenting four Spaces or a TAB character;
    var a = 996;
    var b = 666;
Copy the code
var a = 996;
var b = 666;
Copy the code
  • Use three scale lines (‘ ‘) to solve indenting to create code blocks inconvenient and structure is not distinct; Or three wavy lines (~~~)
I am a code block containing three ticksCopy the code
I am a code block containing three ticksCopy the code

Syntax highlighting within code blocks

Specifying a language in a code block does not result in syntax highlighting without specifying a language

Json {"name":"vue", "dec":" a frame "}Copy the code
{
    "name":"vue"."dec":"A framework"
}
Copy the code

footnotes

Add comments and references to the body syntax. 1. Create a footnote with [^value], where value is a parameter corresponding to the jump link; 2. Define jump link ([^value]: I am a segment explanation)

This is a footnote,[^footnote] hahaha [^footnote]: I'm a footnoteCopy the code

This is a footnote,footnote hahaha

Delete the line

Place the words you want to delete in two wavy lines (~~)

I'm rich. No, I'm poorCopy the code

I’m rich. No, I’m poor

Checkbox list

(-) with brackets [] represents a checkbox item, (x) represents selected;

- [x] Learn JavaScript - [] Learn Vue - [] Learn ReactCopy the code
  • Learning JavaScript
  • Learning Vue
  • Learning the React

link

  • Converts urls to links by default (urls are undecorated)
http://baidu.com
Copy the code

baidu.com

  • Disallow URL jumps (disallow with code)
`http://baidu.com`
Copy the code

http://baidu.com

  1. I’m a footnote ↩