Markdown concise tutorial 2-Markdown basic use, markdown2-markdown

Markdown concise tutorial 2-Markdown basic use, markdown2-markdown

1. Preface

Markdown is a lightweight markup language that frees the author from the complicated typographical work.Easy to read and writeHas gradually become the de facto industry standard. The support for Markdown in CSDN blogs allows many bloggers to focus more on Blog content. However, many bloggers may be unfamiliar with Markdown. This blog will use a series of articles "Markdown concise tutorial" to briefly introduce Markdown, hoping to help you.

Series tutorial Directories

• About Markdown
• Markdown basic usage
• Markdown Extension
• Common Markdown tools
• CSDN Markdown Quick Start
• Markdown Reference Manual

This article describes the basic usage of Markdown in the 2nd series of Markdown tutorials. Learn the basic syntax of Markdown and learn about formatting text, formatting code, list, pictures, links, and escape characters, in the next article, we will study the extended use of Markdown.

2. Basic syntax 2.1 Text Formatting 2.1.1 emphasize text

We use* Italic text *Text,** Bold text **To use* ** Bold italics ***Bold and skewed text at the same time.

The following Markdown code:

* Italic text ** bold italic text ***

Translate the editor into html:

<Em> italic text </em> <strong> bold text </strong> <em> bold italic text </em> </strong>

The result displayed on the webpage is:
Italic text
Bold Text
Bold italic text

2.1.2 add strikethrough

You can use markdown to add strikethrough to text:

~~ Add strikethrough text ~~

After compilation into html:

<Del> Add strikethrough text </del>

The result displayed on the webpage is:
Add strikethrough text

2.1.3 title

Markdown supports the syntax of two titles, in the form of Setext and atx.

The Setext form adopts the bottom line form. 1st title ================= 2nd title ------------- class Atx format is insert 1 to 6 at the beginning of the line #, corresponding to Title 1 to Title 6. # Heading 1 ## Heading 2 ### heading 3 #### heading 4 ##### heading 5 ###### heading 6

Parse to html:

<H1> Title 1 

The result displayed on the webpage is:

2.1.4 reference

Markdown adds the ">" mark before the referenced text to achieve the reference effect. When referencing a paragraph, You Can Be lazy by adding> at the beginning of the first line of the entire paragraph. Other syntaxes such as emphasis and link can be used in references.

> Here is a reference> You can also be lazy and reference only one paragraph in the first line> reference paragraph: Markdown is a lightweight markup language that frees the author from the complicated typographical work, the ** easy-to-read and easy-to-write ** article writing has gradually become a de facto industry standard.> ** End the reference and use a blank line **

After compilation into html:

<Blockquote> <p> here is a reference. You can also refer to only one paragraph in the first line. </p> <p> reference section: Markdown is a lightweight markup language, this frees the author from the complicated typographical work and gradually becomes the de facto industry standard for writing <strong> easy-to-read </strong> articles. </P> <strong> end the reference with a blank line </strong> </blockquote>

The result displayed on the webpage is:

Here is a reference
You can also just reference a paragraph in the first line.

Reference section: Markdown is a lightweight markup language that frees the author from complicated typographical work.Easy to read and writeHas gradually become the de facto industry standard.

End the reference with empty rows

References can be nested and different numbers of ">" are used to represent layers.

> Here is a reference> nested reference> here is a reference

After compilation into html:

<Blockquote> <p> here is a reference </p> <blockquote> <p> nested reference </p> </blockquote> <p> here is a reference </p> </blockquote>

The result displayed on the webpage is:

Here is a reference

Nested reference

Here is a reference

2.2 code formatting 2.2.1 intra-row code

Use the quotation mark (') to include in-line code.

We can use '<br>' or '<p> </p>. 'Highlight 'text

After compilation into html:

We can use <code> & lt; br & gt; </code> or <code> & lt; p & gt; & lt;/p & gt; </code>. <Code> highlight </code> text.

The result displayed on the webpage is:
We can use<br>Line feed, or use<p></p>.
HighlightText

2.2.1 Block Code

If you need to insert backquotes in the code, you need to start and end a piece of code with multiple backquotes.
If you need code blocks and syntax highlighting, you can use three anti-quotation marks and specify the language type.

 ```ruby require 'redcarpet' markdown = Redcarpet.new("Hello World!") puts markdown.to_html ```

2.3 list 2.3.1 unordered list

Unordered Lists are marked with asterisks, plus signs, or minus signs. If the list is not displayed, add an empty row.

- Red- Green- Blue

Resolved

<ul>    <li>Red</li>    <li>Green</li>    <li>Blue</li></ul>

The result displayed on the webpage is:

• Red
• Green
• Blue

2.3.2 ordered list

Use a number followed by an English sentence to represent an ordered list. Note that the preceding number does not affect the list.

1. Text 2. Image 4. Table

Parse to html:

<Ol> <li> text </li> <li> picture </li> <li> table </li> </ol>

The result displayed on the webpage is:

2.3.3 list nesting

The list can be nested, and tab indentation is added to indicate layers. For example, the following Markdown code:

1. Text 1. Emphasis-bold-italic-bold and italic 2. Reference 2. Image 3. Table

Convert to html:

<Ol> <li> text <ol> <li> emphasize <ul> <li> bold </li> <li> italic </li> <li> bold and italic </li> </ul> </li> <li> reference </li> </ol> </li> <li> picture </li> <li> table </li> </ol>

The result displayed on the webpage is:

Image

Table

2.3.4 multi-part list

The list item can contain multiple paragraphs. Each section under each project must be indented with four spaces or one tab:

1. To learn about Markdown, refer to the learning resources, documents, cases, and tutorials at the end of the article. It's easy to learn. 2. You can use the client and online editor to use Markdown.

The result displayed on the webpage is:

2.4 Link

Markdown supports two forms of link Syntax: Intra-row and reference.

2.4.1 intra-row Link

First, let's look at the line style. You only need to insert the URL link after the square brackets followed by the parentheses. If you want to add the title Text of the link, you only need to follow the URL, enclose the title text with double quotation marks.

Please visit my [blog] (http://blog.csdn.net/whqet/ "blog "). You can also leave the [LINK] (http://blog.csdn.net) title unspecified.

Parse to html:

Welcome to my <a href = "http://blog.csdn.net/whqet/" title = "blog"> blog </a>. You can also leave the title of the <a href = "http://blog.csdn.net"> link </a> unspecified.

The result is displayed on the webpage:

Welcome to my blog.
You can also choose not to specify the link title.

2.4.2 Reference Links

The reference link must define the link content and then reference the definition setting link.
The link content is defined in the following format:

[Link name]: link address "link title" [Link name]: space (or tab) link address space "link address" (can be omitted)

Set the URL format

[Link text] [Link name]

As the following code says:

Please visit my [blog] [blog] for more information. [Blog]: http://blog.csdn.net/whqet "My CSDN blog"

Parse to html:

Please visit my <a href = "http://blog.csdn.net/whqet" title = "My CSDN blog"> blog </a> for more information.

The result displayed on the webpage is:
Please visit my blog for more information.

2.4.3 navigation

You can also use markdown to implement on-page navigation. The steps are as follows:

Jump to the starting position of the link

2.5 Images

Markdown uses a syntax similar to the link to mark an image. It also allows two styles: inline style and reference style.
The line style image is as follows:

![Alt text](/path/to/img.jpg)![Alt text](/path/to/img.jpg "Optional title")

The reference image is as follows:

![Alt text][id][id]: url/to/image  "Optional title attribute"

So far, Markdown has no way to specify the image width and height. If you need it, you can use common labels.
Note:: If a CSDN image is larger than the display area, the image width is adaptive. If the image is smaller, the image size is displayed in the original size.

2.6 split line

You can use more than three asterisks, minus signs, and bottom lines in a row to create a separator. There is no other line. You can also insert spaces between asterisks or minus signs. You can create a separation line for each of the following writing methods:

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

2.7 escape

Markdown can be escaped using a backslash. You can add a backslash before the following symbols to help insert common symbols:

\ Backslash 'quotation marks * asterisks _ bottom line {} brackets [] square brackets () arc # Well font size + plus sign-minus sign. English sentence! Exclamation point

Practice

This article describes the basic usage of Markdown in the 2nd series of Markdown tutorials and describes the basic syntax of Markdown. The next article describes how to use Markdown extension.

Statement

Front-end development whqet, focus on front-end development, and share related resources. Wang haiqing, A csdn Expert Blog, hopes to help you. Limited by the author's limited level, it is inevitable to make mistakes. Thank you!
You are welcome to reprint it in any form. Please note the loading and retain the text in this section.
The original Article, http://blog.csdn.net/whqet/article/details/44274999
Welcome to independent blog http://whqet.github.io.