Click here to see

Content in this paper,

This paper introduces the source and usage scenarios of Markdown, and introduces various syntax of Markdown in detail with rich examples to help you better use Markdown. If you find this useful, you are welcome to recommend it to your friends.

What is a Markdown

Markdown is a lightweight markup language that allows you to Write a document in plain text and convert it to HTML, PDF, images, etc., using tools like Write Once and Read Everywhere. See Wikipedia for a more detailed definition

Markdown schematic diagram:

What are the benefits of using Markdown

Markdown is a text-only markup language, so what are the benefits of text-only markup languages?

  1. Easy to edit. Any text editor can edit, even the familiar Windows Notepad. Let the writer focus on the content, not the format. Have you ever wasted a lot of time trying to format an unruly editor (ok, I’m talking Word)?
  2. You can put it in your version management system to track historical changes. This is very important to code farmers, so that documents can be placed in the version management system along with the program code. If you’re not familiar with a version management system, just think of it as a permanent change history that you can track (version management systems is a whole other article). In this way, you don’t have to worry about the document being corrupted when you have multiple collaborators editing it.

Spend your time creating great content, not formatting your documents. (Remembering my graduate thesis years ago…)

The history of the Markdown

Markdown was founded by John Gruber in 2004. A lot of it was in collaboration with Aaron Swartz on grammar.

Aaron Swartz, the programmer who committed suicide in 2013, had a troubled life. Wikipedia describes him as a software engineer, author, political organizer, Internet activist and Wikipedian.

He had a life story that would make you kneel:

  • Participated in the development of RSS 1.0 specification at age 14.
  • I started Stanford in 2004 and dropped out.
  • He founded Infogami in 2005 and later merged with Reddit to become a partner.
  • In 2010, he founded Demand Progress and campaigned for the Stop Online Piracy Act (SOPA), which was withdrawn.
  • On July 19, 2011, he was arrested on charges of downloading 4.8 million academic papers from MIT and JSTOR and uploading them to the Internet for free.
  • He committed suicide in January 2013.

Geniuses die young (another Jew).

The purpose of the Markdown

  • Forum or blog
  • gitbook
  • mail
  • Academic papers
  • , etc.

Where Markdown can be used

  • GitHub
  • Jane’s book
  • Stack Overflow
  • Apollo
  • Moodle
  • Reddit
  • , etc.

Markdown syntax

Title: Use # to mark the title

Use # signs to mark level 1-6 headings, with level 1 headings corresponding to 1 # sign, level 2 headings corresponding to 2 # signs, and so on.

# 1 title # # 2 headlines # # # # # # # 3 4 headlines # # # # # # # 5 # # # # six levels of headingsCopy the code

The following information is displayed:

Primary title

The secondary title

Level 3 title

Level 4 titles

Five titles
Six levels of headings

Paragraph format and font

In-paragraph newlines and between paragraphs

Newlines within paragraphs use more than 2 Spaces and carriage returns; You can also restart a paragraph with a blank line after it.

This is the first line of the first paragraph <-- add at least 2 Spaces to the end this is the second line of the first paragraph (blank line) this is the second paragraph (blank line) this is the third paragraphCopy the code

It looks like this: this is line 1 of the first paragraph and this is line 2 of the first paragraph

This is the second paragraph

This is the third paragraph

The font

* * _ _ * * italic text italic text bold text bold text (* * * * * * * * bold italic text ___ ___ bold italic textCopy the code

The following information is displayed:

Italic text Italic text Bold text Bold text italic text bold text

Size and color

<font size=1> Font size 1 </font> <font size=6> Font size 6 </font> <font color=gray size=4> </font> <font color=green </font> <font color=hotpink size=4> </font> <font color=LightCoral Size =4>LightCoral word </font> <font color=LightSlateGray size=4>LightSlateGray word </font> <font color=orangered Size =4> Orangered words </font> <font color=red size=4> Red words </font> <font color=springgreen size=4> Springgreen words </font> <font color=Turquoise size=4> </font>Copy the code

The Markdown implementation of this website does not support inserting HTML tags.

Font size: 1 Font size: 6 Gray word: green word: hotpink word: LightCoral word: LightSlateGray word: orangered word: red word: springgreen word Turquoise colored words

Dividing line

There are many ways to create a separator: more than 3 asterisks, more than 3 minus signs, more than 3 underscores, or you can insert a space between the asterisk, minus sign, and underscore.

****** ****** -- _ _ _Copy the code

The following information is displayed:

Delete the line

I don't have a delete line I don't have a delete line ~~ I have a delete line ~~Copy the code

The following information is displayed:

I don’t have a delete line and I don’t have a delete line and I have a delete line

The underline

There is no native syntax for underlining in Markdown, which can be implemented through the HTML <u> tag.

<u>I underline</u>
Copy the code

The following information is displayed:

I underline

footnotes

Footnotes are supplementary to the text.

[^ Text to be indicated]Copy the code

Example:

Create a footnote format like this [^Markdown]. [^Markdown]: This is a footnoteCopy the code

The following information is displayed:

Create a footnote format like this [1]

Markdown list

Unordered list

Unordered lists are marked with an asterisk, plus or minus sign.

* Item 1 * Item 2 + Item 1 + Item 2 - Item 1 - Item 2Copy the code

The following information is displayed:

  • List item 1
  • List item 2
  • List item 1
  • List item 2
  • List item 1
  • List item 2

An ordered list

An ordered list is represented by a number followed by a. Sign. Note that a space is required between the. Sign and the actual content.

1. Ordered list item 1 2. Ordered list item 2Copy the code

The following information is displayed:

  1. Ordered list item 1
  2. Ordered list item 2

Nested list

List nesting requires only four Spaces before the sublist option.

* Unordered list 1 1. ordered list 1.1 2. ordered list 1.2 * Unordered list 2 - Unordered list 2.1 - Unordered list 2.2Copy the code
  • Unordered list 1
    1. Ordered list 1.1
    2. Ordered list 1.2
  • Unordered list 2
    • Unordered list 2.1
    • Unordered list 2.2

Markdown block

Blocks use the > symbol followed by a space.

> block > Markdown > MarkdownCopy the code

The following information is displayed:

Block Markdown to write articles, cool!

Block nesting: Each layer is nested with a > symbol and a space

> Block > > nested 1 > > > nested 2Copy the code

The following information is displayed:

block

Nested 1

Nested 2

Markdown code

For inline functions or code snippets, use backquotes. Note that the backquotes are the key in the upper-left corner of the keyboard, usually below the ESC key.

` print (" hello, world ") ` functionCopy the code

The following information is displayed:

Print (” hello, world “) function

Code Block 1

Code blocks using 4 Spaces or 1 Tab

<? php function test() { echo 'hello, world'; } test() ? >Copy the code

The following information is displayed:

<? php function test() { echo 'hello, world'; } test() ? >Copy the code

Code Block 2

It is also possible to wrap a piece of code with a language specified (or not specified).

```java public class HelloWorld { public static void main(String[] args) { System.out.println("hello, world"); }} ` ` `Copy the code

The following information is displayed:

public class HelloWorld {
	public static void main(String[] args) {
		System.out.println("hello, world"); }}Copy the code

link

How to use links:

[link name][link address] or < link address >Copy the code

Such as:

[SanFeng's weblog](http://blog.kfzhang.cn) or <http://blog.kfzhang.cn>Copy the code

The following information is displayed:

SanFeng’s weblog

Or just use the link address:

blog.kfzhang.cn

Advanced usage

[home] [blog]: [home]: http://blog.kfzhang.cn [home]: http://www.kfzhang.cnCopy the code

Click to visit the blog. Click to visit the home page

The picture

Markdown image syntax format:

An exclamation mark at the beginning! Next, a square bracket with the image's replacement text, then a regular bracket with the image's address, and finally, enclosed in quotation marks with the optional 'title' attribute! [Alt attribute text](image address)! [Alt attribute text](Image address "optional title ")Copy the code

Ex. :

! [logo](https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2019/12/24/16f36a2574c9899c~tplv-t2oaga2asx-image. image) ! [logo](https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2019/12/24/16f36a2574c9899c~tplv-t2oaga2asx-image. image logo)Copy the code

logo

Advanced usage

Similar to the use of links, you can also use variables for image addresses like web sites.

Links can also be replaced with variables, with the variable address attached at the end of the document:! [logo][1] [1]: https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2019/12/24/16f36a2574c9899c~tplv-t2oaga2asx-image.imageCopy the code

Extend the usage

Native Markdown does not support adjusting the height, width, and other parameters of an image. The <img> tag can be used, but not all Markdown implementations support this.

<img src="https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2019/12/24/16f36a2574c9899c~tplv-t2oaga2asx-image.im age" width=10%>Copy the code

The Markdown implementation of this website does not support inserting HTML tags.

form

Markdown form using | to separate cell, use – to separate header and other lines.

| | header header | | -- - | -- - | | | cell cell | | | | cell cellCopy the code

The following information is displayed:

header header
The cell The cell
The cell The cell

alignment

You can set the alignment of the table:

-: Sets the right alignment between content and title bar. - Sets the left alignment between content and title bar. -: sets the center alignment between content and title barCopy the code

Example:

| left-aligned | | center aligned right | | : -- | -- - | : - : | | | | | cell cell cell | | | | cell cell cellCopy the code

The following information is displayed:

The left Align right Align center
The cell The cell The cell
The cell The cell The cell

Advanced Techniques – HTML elements

Support for HTML elements

Tags that are not covered by Markdown can be written in HTML directly within the document. Currently supported HTML elements are: < KBD > < I >

and so on. Example:

Using the < KBD > Ctrl < / KBD > + < KBD > Alt < / KBD > + < KBD > Del < / KBD > < b > to restart the computer bold font < / b > < I > italics < / I > < / em > < em > emphasize text this text contains < sup > superscript < / sup > text This text contains the <sub> subscript </sub> text using the br element <br> to wrap <br> lines in the textCopy the code

The following information is displayed: Use Ctrl + Alt + Del to restart the computer. Bold italics emphasize text. This text contains superscript text

Advanced technique – Escape

Markdown uses a number of special characters to indicate a particular meaning. If a particular symbol needs to be displayed, it needs to be escaped. Markdown uses backslashes to escape special characters. Markdown supports escaping the following special symbols:

\ Backslash 'backquote * asterisk _ underscore {} Curly braces [] square brackets () curly braces # hash + plus - minus. English period! Exclamation markCopy the code

Example:

** Text in bold ** ** ** * normally display asterisk ** ** *Copy the code

The text is displayed as follows: ** in bold is normally displayed as **

Advanced skills – Mathematical formulas

When you need to insert a mathematical formula in the editor, you can use two dollar signs, right? A mathematical formula wrapped in TeX or LaTeX format. Once submitted, the Q&A and article pages load Mathjax to render the math formula as needed. Example:

? \mathbf{V}_1 \times \mathbf{V}_2 = \begin{vmatrix} \mathbf{i} & \mathbf{j} & \mathbf{k} \\ \frac{\partial X}{\partial u}  & \frac{\partial Y}{\partial u} & 0 \\ \frac{\partial X}{\partial v} & \frac{\partial Y}{\partial v} & 0 \\ \end{vmatrix} ?Copy the code

The following information is displayed:


For more detailed mathematical formulas, please refer to the basic syntax of Latex mathematical formulas in Markdown

Common Markdown software

This article focuses on the use of Markdown. Common Markdown tools and software are not described in detail. If you are interested, please refer to the easy to Understand Markdown tool

In terms of personal preference and use experience, I strongly recommend Typora, which supports multiple platforms including Win, Mac and Linux. It is really very easy to use.

References:

The title address
Markdown tutorial www.runoob.com/markdown/md…
To get the document back to basics, why should Markdown be used Jolestar.com/markdown-to…
Markdown syntax full solution Blog.csdn.net/jk_chen_acm…
Basic syntax for Latex mathematical formulas in Markdown Blog.csdn.net/u014630987/…

  1. This is a footnote ↩︎