02 Markdown Introduction

Preface#

Markdown syntax is a lightweight markup language that allows for easier writing of HTML documents. Learning to use Markdown can help you create articles with simple syntax, allowing you to create visually appealing articles in the least amount of time. Many static page websites, such as Hexo, support writing articles in Markdown.

Basic Syntax#

Headings#

Corresponds to HTML tags <h1>~<h6>

# Heading 1
## Heading 2
### Heading 3
#### Heading 4
##### Heading 5

Links#

This page

[Text](Link)

<!-- Corresponding HTML -->
<a href="Link" >Text</a>

There is another type of link in the following form

<https://kyleten.top/markdown-greeting>

<!-- Corresponding HTML -->
<a href="https://kyleten.top/markdown-greeting">https://kyleten.top/markdown-greeting</a>

Emphasis#

Italic Bold

*Italic* **Bold**

<!-- Corresponding HTML -->
<i>Italic</i><strong>Bold</strong>

Images#

markdownIcon

![Text](Link)

<!-- Corresponding HTML -->
<img src="Link" alt="Text" />

Tables#

Name	Class	Score
John	A	119
Jane	B	140

|Name|Class|Score|
|:--:|:--|:--|
|John|A|119|
|Jane|B|140|

<!-- Corresponding HTML -->
<table>
  <thead>
    <tr>
      <th align="center">Name</th>
      <th align="center">Class</th>
      <th align="center">Score</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td align="center">John</td>
      <td align="center">A</td>
      <td align="center">119</td>
    </tr>
    <tr>
      <td align="center">Jane</td>
      <td align="center">B</td>
      <td align="center">140</td>
    </tr>
  </tbody>
</table>

Blockquotes#

> Quote

<!-- Corresponding HTML -->
<blockquote>
  <p>Quote</p>
</blockquote>

Ordered and Unordered Lists#

Ordered Lists#

Hello
Goodbye

1. Hello
2. Goodbye

<!-- Corresponding HTML -->
<ol>
  <li>Hello</li>
  <li>Goodbye</li>
</ol>

Unordered Lists#

Hello
- Good morning
Goodbye

* Hello
  * Good morning
* Goodbye

<!-- Corresponding HTML -->
<ul>
  <li>Hello</li>
  <ul>
      <li>Good morning</li>
  </ul>
  <li>Goodbye</li>
</ul>

Code Blocks#

```javascript
const root = document.getElementById("root")
```

<!-- Corresponding HTML -->
<pre class="language-javascript">
  const root = document.getElementById("root")
</pre>

Markdown Tips#

Comments#

Hello [git][git] la.....
<!-- Omit the content in the second tag to use the displayed characters as the link reference name -->
Later [git][] 

[git]: http://example.com "title"

Anchor Links#

 ## Start

[Jump to start](#start)

<!-- The principle of ## Start is not exactly equal to <h2>Start</h2>
    It is actually
-->
<h2 id="start">Start</h2>
<!-- The link in HTML is -->
<a href="#start">Jump to start</a>

Conclusion#

This article is a bit messy, and if there is an opportunity in the future, it will be further refined. Thank you for reading.