What is a Markdown

Markdown is a software tool developed in Perl by John Gruber in 2004 to help users convert plain text content into HTML. When the user writes, Markdown converts the plain text content into HTML as long as it follows standard Markdown syntax. So, strictly speaking, a Markdown is:

  • A software tool
  • A grammar


Ii. Markdown design concept

Markdown software is designed to help Web creators transform plain text content into HTML. The Markdown syntax is designed to keep the plain text readable and the converted content consistent with the source content, except that the original content has more tags.


3. Markdown grammar
PARAGRAPHS (paragraph)

In Markdown, user-written paragraphs are printed as source text.

Markdown:

When tomorrow turns in today, yesterday, and someday that no more important in your memory, 
we suddenly realize that we are pushed forward by time. 
This is not a train in still in which you may feel forward when another train goes by. 
It is the truth that we've all grown up. And we become different.
Copy the code

Output(Html):

When tomorrow turns in today, yesterday, and someday that no more important in your memory, 
we suddenly realize that we are pushed forward by time. 
This is not a train in still in which you may feel forward when another train goes by. 
It is the truth that we've all grown up. And we become different.
Copy the code

The Output (Actual) :

When tomorrow turns in today, yesterday, and someday that no more important in your memory,

we suddenly realize that we are pushed forward by time.

This is not a train in still in which you may feel forward when another train goes by.

It is the truth that we’ve all grown up. And we become different.


HEADERS (title)

In Markdown, there are three methods to implement headings:

  1. Three equals signs (=== =)
  2. Three connectives (–)
  3. One to six hash signs (#), where the number of hash signs is positively related to the size of the headline.

Markdown:

MARKDOWN
===
Copy the code

Output(Html):

<h1>MARKDOWN</h1>
Copy the code

The Output (Actual) :

MARKDOWN

Markdown:

MARKDOWN
---
Copy the code

Output(Html):

<h2>MARKDOWN</h2>
Copy the code

The Output (Actual) :

MARKDOWN

Markdown:

###MARKDOWN###
Copy the code

Output(Html):

<h3>MARKDOWN</h3>
Copy the code

The Output (Actual) :

MARKDOWN


BLOCKQUOTES (reference)

In Markdown, use the right arrow to highlight something.

Markdown:

> MARKDOWN
Copy the code

Output(Html):

<blockquote>
    <p>MARKDOWN</p>
</blockquote>
Copy the code

The Output (Actual) :

MARKDOWN


PHRASE EMPHASIS/EMPHASIS

In Markdown, wrap the content for emphasis with either an asterisk (*, one italic asterisk, two bold asterisk) or an underscore (_, one italic asterisk, two bold asterisk).

Markdown:

*MARKDOWN*
Copy the code

Output(Html):

<em>MARKDOWN</em>
Copy the code

The Output (Actual) :

MARKDOWN

Markdown:

**MARKDOWN**
Copy the code

Output(Html):

<strong>MARKDOWN</strong>
Copy the code

The Output (Actual) :

MARKDOWN

The effect of underline modifier is the same as above, so there is no demonstration here, interested partners can try by themselves.


LISTS (list)

In Markdown, lists are divided into two types. The first type is unordered list, which is led by asterisk (*), plus (+) and hyphen (-). The second is an ordered list, using Arabic numerals and English comma (.). Draw out.

Markdown:

* RED
* GREEN
* BLUE
Copy the code

Output(Html):

<ul>
    <li>RED</li>
    <li>GREEN</li>
    <li>BLUE</li>
</ul>
Copy the code

The Output (Actual) :

  • RED
  • GREEN
  • BLUE

The effect of the plus sign and the hyphen is the same as above, so there is no demonstration here, interested partners can try by themselves.

Markdown:

1. RED
2. GREEN
3. BLUE
Copy the code

Output(Html):

<ol>
    <li>RED</li>
    <li>GREEN</li>
    <li>BLUE</li>
</ol>
Copy the code

The Output (Actual) :

  1. RED
  2. GREEN
  3. BLUE


The LINKS (link)

In Markdown, links are represented in two ways:

1. [alt text](link)
2. [alt text][id]   
   [id]: link
Copy the code

Markdown:

[WIKIPEDIA](https://www.wikipedia.org)
Copy the code

Output(Html):

<a href="https://www.wikipedia.org">WIKIPEDIA</a>
Copy the code

The Output (Actual) :

WIKIPEDIA

Markdown:

[WIKIPEDIA][1]
[1]: https://www.wikipedia.org
Copy the code

Output(Html):

<a href="https://www.wikipedia.org">WIKIPEDIA</a>
Copy the code

The Output (Actual) :

WIKIPEDIA

In addition, you can add a title to each of the above links. After this processing, when the mouse pointer is placed over the content of the link, there will be a text prompt. Add method as follows:

1. [alt text](link "title")
2. [alt text][id]
   [id]: link "title"
Copy the code

Markdown:

[WIKIPEDIA](https://www.wikipedia.org "WIKIPEDIA")
Copy the code

Output(Html):

<a href="https://www.wikipedia.org" title="WIKIPEDIA">WIKIPEDIA</a>
Copy the code

The Output (Actual) :

WIKIPEDIA


IMAGES (image)

In Markdown, images are represented in the following format:

! [alt text](image_path)Copy the code

Markdown:

! [WIKIPEDIA](https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2018/4/12/162ba796dc36c5fc~tplv-t2oaga2asx-im age.image)Copy the code

Output(Html):

<img src="https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2018/4/12/162ba796dc36c5fc~tplv-t2oaga2asx-image.ima ge" alt="WIKIPEDIA" />Copy the code

The Output (Actual) :

As with text links, you can also add a caption to an image, using the following method:

! [Alt text] (image_path "title")Copy the code

Markdown:

! [WIKIPEDIA](https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2018/4/12/162ba796dc36c5fc~tplv-t2oaga2asx-im age.image "WIKIPEDIA")Copy the code

Output(Html):

<img src="https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2018/4/12/162ba796dc36c5fc~tplv-t2oaga2asx-image.ima ge" alt="WIKIPEDIA" title="WIKIPEDIA"/>Copy the code

The Output (Actual) :

WIKIPEDIA


CODE(CODE block)

In Markdown, to output text in a fixed format, you simply add four Spaces or a Tab to each line of text.

Markdown:

public class HelloWorld {
    public static void main(String []args) {
        System.out.println("Hello World!");
    }
}
Copy the code

Output(Html):

<pre> public class HelloWorld { public static void main(String []args) { System.out.println("Hello World!" ); } } </pre>Copy the code

The Output (Actual) :

public class HelloWorld {
    public static void main(String []args) {
        System.out.println("Hello World!");
    }
}
Copy the code

In Markdown, in addition to the entire code block, there is also the case of nested code in paragraphs, where references to code in paragraphs simply enclose the text content of the code in backquotes (‘).

Markdown:

`Hello World! `Copy the code

Output(Html):

<code>Hello World! </code>Copy the code

The Output (Actual) :

Hello World!


4. Markdown tools are commonly used

Windows:

  • Typora
  • WriteMonkey

Mac:

  • Typora
  • WriteMonkey
  • Mou


5. References
  1. Markdown – Wikipedia
  2. Daring Fireball: Markdown Syntax Documentation