Sometimes I think I can't Markdown

foreword

In "An article that takes you to build a blog with VuePress + Github Pages" , we used VuePress to build a blog, check the final effect: TypeScript Chinese document .

In the process of optimizing the blog, because I needed to write the markdown-it plug-in, I flipped through the CommonMark Spec of markdown, and suddenly found that I didn't know enough about Markdown:

Soft line breaks

Line breaks that are not within inline code or HTML tags, and are not preceded by two or more spaces, are parsed as Soft line breaks . line terminator or space when rendered to HTML.

enter:

foo
baz

output:

<p>foo
baz</p>

Performance:

Hard line breaks

Line breaks that are not inside inline code or HTML tags, are preceded by two or more spaces, and are not at the end of a block, are parsed as , which are one when rendered to HTML
<br /> label.

Enter (note the two spaces after foo

foo  
baz

output:

<p>foo

baz</p>

Performance:

backslash

Except for escaping, a backslash at the end of a line is equivalent to a hard line break:

enter:

foo\
bar

output:

<p>foo

bar</p>

code (code span)

We usually wrap the string with a pair of backticks to represent the inline code span :

enter:

`foo`

output:

<p><code>foo</code></p>

Performance:

But inline code only requires that the inline code starts with a backtick string and ends with a backtick string of the same length.

So it's okay to use multiple backticks:

```foo```

output:

<p><code>foo</code></p>

Fenced code blocks

If you use at least three consecutive backticks and add a newline, it becomes a fenced block:

```
foo
```

output:

<pre><code>foo
</code></pre>

Performance:

For example, in-line code, it is not required to have three backticks, as long as there are at least three and the same before and after, so when we want to use three backticks in a code block, you can use four backticks to wrap:

````
```markdown
foo
```
````

Appears as:

Instead of using backticks, tildes are fine, but not mixed:

~~~
foo
~~~

output:

<pre><code>foo
</code></pre>

Indented code blocks

An indented code block consists of several indented blocks separated by blank lines.

Indent blocks are several non-blank lines, Indent each line by four or more spaces .

Example of an indented block:

    a simple
      indented code block

output:

<pre><code>a simple
  indented code block
</code></pre>

Performance:

Example of several indented blocks separated by blank lines:

    chunk1

    chunk2




    chunk3

output:

<pre><code>chunk1

chunk2



chunk3
</code></pre>

Three indented blocks together form an indented code block.

Performance:

Link reference definitions

A link reference definition consists of a link label, colon (:), optional whitespace, link target, optional whitespace, and optional link title. for example:

[foo]: /url "title"

But it's just a definition, it doesn't show anything, just like we declare a variable in JavaScript, if we want to use it:

[foo]

output:

<p><a href="/url" title="title">foo</a></p>

The link reference definition does not correspond to a structure element. It actually defines a tag to be used for reference links and reference type images elsewhere in the document. It can appear before or after the reference link.

When using a link reference definition in an image:

![foo][bar]

[bar]: /url

output:

<p><img src="/url" alt="foo" /></p>

Autolinks

Autolinks are absolute URIs and email addresses enclosed in angle brackets (<...>). It will resolve to a link, with the URL or email address as the link label.

<http://foo.bar.baz>

is equivalent to:

[http://foo.bar.baz](http://foo.bar.baz)

The output is:

<p><a href="http://foo.bar.baz">http://foo.bar.baz</a></p>

Setext headings

Setext is a lightweight markup language for formatting plain text documents such as e-newsletters, Usenet posts and emails. Compared to some other markup languages, the markup is easy to read without any parsing or special software.

Markdown also provides a similar syntax:

Foo *bar*
=========

Foo *bar*
---------

output:

<h1>Foo <em>bar</em></h1>
<h2>Foo <em>bar</em></h2>

Using = is the first-level heading, and using the - characters is the second-level heading. The bottom line can be of any length.

Horizontal line (Thematic breaks)

A line consisting of 0-3 spaces indented and three or more - , _ , * characters to form a horizontal line.

enter:

***
---
___

output:

<hr />
<hr />
<hr />

Performance:

series of articles

The blog building series is the only series of practical tutorials I have written so far. It is expected to be about 20 articles, explaining how to use VuePress to build and optimize blogs, and deploy them to GitHub, Gitee, private servers and other platforms. This article is the 19th article, the address of the full series of articles: https://github.com/mqyqingfeng/Blog

WeChat: "mqyqingfeng", add me to the only readership of Xianyu.

If there are any mistakes or inaccuracies, please be sure to correct me, thank you very much. If you like or have inspiration, welcome to star, which is also an encouragement to the author.