Markdown: from introduction to use

Time:2020-10-17

Markdown is a very easy to use lightweight markup language. At present, many websites widely use markdown to write help documents or publish messages on forums (this article is written with markdown). There’s only dry goods here. There’s no nonsense. Just do it!

Introduction to markdown

  • Markdown is a lightweight markup language that allows people to write documents in plain text format that is easy to read and write.
  • The documents written by markdown can be exported to HTML, word, image, PDF, ePub and other formats.
  • The suffix of the document written by markdown is. MD,. Markdown.

Markdown application

Markdown can be used to write e-books, such as gitbook.
Markdown is widely used by many websites to write help documents or to post messages on forums. For example: GitHub, brief book, reddit, diaspora, stack exchange, OpenStreetMap, SourceForge, etc.

editor

Use the typora editor to learn the syntax of markdown. Typora supports MacOS, windows and Linux platforms, and contains a variety of topics. After editing, the effect is directly rendered.
Support the export of HTML, PDF, word, pictures and other types of files.
Typora website:Typora official website

Markdown title

There are two formats for the markdown title.

Use = and – to mark the first and second level headings

=The syntax format of the and tag is as follows:

First level title
=================

Secondary title
-----------------

Mark with ා

The use of ාාාාාාාාාාාාාාාාාාාාාාා񖓿.

#First level title
##Secondary title
###Three level title
####Four level title
#####Five level titles
######Six level title

Markdown paragraph

There is no special format for markdown paragraph. It is good to write text directly. The line break of paragraph is to use more than two spaces and carriage return.
You can also start a paragraph with a blank line after it.

typeface

Markdown can use the following fonts:

*Italicized text*
A kind of Italicized text_
**Bold text**
Wei Bold text__
***Text in bold italics***
A kind of Text in bold italics___

Dividing line

Use more than three asterisks, minus signs, and bottom lines in a line to create a separator line. There can be no other things in the line. You can also insert a space between an asterisk or a minus sign.

***
* * *
*****
- - -
----------

Strikethrough

If you want to add a strikeout to a paragraph, just add two wavy lines to both ends of the text.

~~baidu.com~~

Underline

Underline through HTML Tags:

<u> Underlined text < / u >

footnote

Footnotes are supplementary notes to the text.
The format of the markdown footnotes is as follows:

Create footnotes in a format similar to this [^ 1].

[^ 1]: learning has a bright future!!!

Markdown list

Markdown supports ordered and unordered lists.

Unordered list

Unordered lists are marked with asterisks (*), plus (+), or minus (-):

*Item 1`
*The second item`
*The third item`
+Item 1
+The second item
+The third item
-Item 1
-The second item
-The third item

Ordered list

An ordered list is represented by a number followed by a. Sign.

1. Item 1
2. The second item
3. The third item

List nesting

List nesting simply adds four spaces before the options in the sublist:

1. Item 1:
    -The first element nested by the first item
    -The second element nested by the first item
2. Item 2:
    -The first element nested by the second item
    -The second item of the nested element

Markdown block

The markdown block reference uses the > symbol at the beginning of the paragraph, followed by a space:

>Block reference
study hard
make progress every day

Block nesting

Blocks can be nested, with one > symbol representing the outermost layer, two > symbols representing the first nesting level, and so on

>Outermost layer
Or the outermost layer
>> first level nesting
Or the first level of nesting
>> > second level nesting
Or the second level of nesting

Use list in block

>Use list in block
>1. Item 1
>2. The second item
>+ first item
>+ second item
>+ item 3

Use blocks in list

If you want to put a block in a list item, you need to add four space indents before the >.

*Item 1
    >Rookie course
    >Learning is not only technology, but also dream
*The second item

Markdown code

If it is the code of a function or fragment in a paragraph, you can wrap it in back quotation marks (‘), for example:

`Printf() 'function

Code block

Code blocks use four spaces or a tab (TAB key).

function(){
     console.log Study hard and make progress every day! )
     }

You can also wrap a piece of code with (” ‘), and specify a language (or not to specify it):

\```javascript
$(document).ready(function () {
  Study hard and make progress every day! ).
});
\```

Markdown link

Normal links

[link name] (link address)

perhaps

< link address >

For example:

This is a link [Baidu, you will know]( https://www.baidu.com/ )

Direct use of link address:

<https://www.baidu.com/>

Advanced links

You can set a link through a variable. The variable assignment is performed at the end of the document

This link uses 1 as the URL variable '[Google] [1]
This link uses Baidu as the URL variable '[Baidu] [Baidu]
Assign a variable at the end of the document (URL)

[1]: http://www.google.com/
[baidu]: http://www.baidu.com/

Markdown pictures

The syntax format of markdown image is as follows:

! [alt attribute text] (picture address)

! [alt attribute text] (picture address "optional title")
  • An exclamation mark at the beginning!
  • Then there is a square bracket, in which you put the alternate text of the picture
  • Then there is a parenthesis with the URL of the image. Finally, you can enclose it in quotation marks with the optional ‘title’ attribute.

For example:

! [small picture]( http://b-ssl.duitang.com/uploads/item/201809/09/20180909200211_ vikkq.thumb .700_ 0.jpeg)

! [small picture]( https://imgs.developpaper.com/imgs/20130527085528725.jpg  "Little picture")

You can also use variables:

This link uses 1 as the URL variable [small picture] [1]
Then assign a value to the variable at the end of the document (URL)

[1]: http://b-ssl.duitang.com/uploads/item/201809/09/20180909200211_vikkq.thumb.700_0.jpeg

Markdown cannot specify the height and width of an image. You can use the normal < img > tag to specify the width and height of the image.

<img width="50%">

Markdown table

Markdown makes tables using | to separate different cells, and – to separate headers and other rows.

The syntax format is as follows:

|Header | header|
|  ----  | ----  |
|Cell | cell|
|Cell | cell|

Alignment

  • -:Set the content and title bar to the right.
  • :-Set the content and title bar to the left.
  • :-:Set the content and title bar to center.
|Left | right | Center|
| :-----| ----: | :----: |
|Cell | cell | cell|
|Cell | cell | cell|