This is the sixth day of my participation in the First Challenge 2022. For details: First Challenge 2022.

preface

In “A blog with VuePress + Github Pages”, we build a blog with VuePress and see what the final TypeScript Chinese document looks like.

In the process of optimizing the blog, I need to write markdown-IT plug-in. I checked the CommonMark Spec of Markdown and suddenly found that I didn’t know enough about Markdown:

Soft line breaks

A line break that is not inside the line code or HTML tag and does not contain two or more Spaces in front of it is resolved as a Soft line break. Renders to HTML as a line terminator or space.

Input:

foo
baz
Copy the code

Output:

<p>foo
baz</p>
Copy the code

Performance:

Hard line breaks

Line breaks that are not in inline code or HTML tags, are preceded by two or more Spaces, and are not at the end of a block, are resolved as Hard line breaks, and rendered as HTML as a

tag.

Enter (note that foo is followed by two Spaces) :

foo  
baz
Copy the code

Output:

<p>foo

baz</p>
Copy the code

Performance:

Backslash

A backslash at the end of a line is equivalent to a hard newline, except for escaping:

Input:

foo\
bar
Copy the code

Output:

<p>foo

bar</p>
Copy the code

Code span

We usually wrap a string around a pair of backquotes to represent the code span:

Input:

`foo`
Copy the code

Output:

<p><code>foo</code></p>
Copy the code

Performance:

But inline code only requires that the inline code begin with a backquote string and end with a backquote string of the same length.

So it’s ok to use multiple backquotes:

```foo```
Copy the code

Output:

<p><code>foo</code></p>
Copy the code

Fenced code blocks

If you use at least three consecutive backquotes and add a line break, it becomes a fenced code block:

```
foo
```
Copy the code

Output:

<pre><code>foo
</code></pre>
Copy the code

Performance:

As in inline code, there is no requirement for three backquotes, just at least three that are the same, so when we want to use three backquotes in a block of code, you can use four:

````
```markdown
foo
```
````
Copy the code

Characterized by:

Use tilde instead of backquotes, but do not mix:

~~~
foo
~~~
Copy the code

Output:

<pre><code>foo
</code></pre>
Copy the code

Indented code blocks (Indented code blocks)

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

An indent block is a number of non-blank lines, each indented with four or more Spaces.

Example of an indent block:

a simple indented code blockCopy the code

Output:

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

Performance:

Example of indented blocks separated by a blank line:

    chunk1

    chunk2




    chunk3
Copy the code

Output:

<pre><code>chunk1

chunk2



chunk3
</code></pre>
Copy the code

The three indent blocks together make up the indent code block.

Performance:

Link Reference Definitions

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

[foo] :/url "title"
Copy the code

But this is just a definition and doesn’t show anything, just as we declare a variable in JavaScript if we want to use it:

[foo]
Copy the code

Output:

<p><a href="/url" title="title">foo</a></p>
Copy the code

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

When using a link reference definition in an image:

! [foo] [bar]

[bar] :/url
Copy the code

Output:

<p><img src="/url" alt="foo" /></p>
Copy the code

Automatic linking (Autolinks)

Automatic links are made by Angle brackets (<… > the absolute URI and email address of the package. It parses into links, with urls or email addresses as link labels.

<http://foo.bar.baz>
Copy the code

Is equivalent to:

[http://foo.bar.baz] (http://foo.bar.baz)
Copy the code

The output is:

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

Setext headings

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

Markdown also provides a similar syntax:

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

Foo *bar*
---------
Copy the code

Output:

<h1>Foo <em>bar</em></h1>
<h2>Foo <em>bar</em></h2>
Copy the code

The use of = is the first level heading, and the use of the – character is the second level heading. The bottom line length is arbitrary.

Thematic breaks

A line consisting of 0-3 Spaces indented and three or more -,_, and * characters, forming a horizontal line.

Input:

*** -- -- --___ Copy the code

Output:

<hr />
<hr />
<hr />
Copy the code

Performance:

series

Blog building series is the only practical series I have written so far. It is estimated to be about 20 articles, explaining how to use VuePress to build and optimize a blog and deploy it to GitHub, Gitee, private server and other platforms. This is the 19th article in a series at github.com/mqyqingfeng…

Wechat: “MQyqingfeng”, add me Into Hu Yu’s only readership group.

If there is any mistake or not precise place, please be sure to give correction, thank you very much. If you like or are inspired by it, welcome star and encourage the author.