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.