> Introduction: Add some official Markdown examples to facilitate oneself and others.
Headings#
Heading 1 ##
Heading 2 ###
Heading 3 ####
Heading 4 #####
Heading 5 ######
Heading 6 ######
Tables#
Table Processing#
Table 1#
| Title | Item |
|---|---|
| Content | Content |
| Content2 | Content2 |
| Title | Item |
| ---- | ---- |
| Content1 | Content1 |
| Content2 | Content2 |
Table 2#
| Title | Item | Item |
|---|---|---|
| Content | Content | Content |
| Title | Item | Item |
| ---- | ---- |---- |
| Content | Content | Content |
Table 3#
| Item | Price | Quantity |
|---|---|---|
| Computer | $1600 | 5 |
| Phone | $12 | 12 |
| Pipeline | $1 | 234 |
<table>
<tr>
<th>Item</th>
<th>Price</th>
<th>Quantity</th>
</tr>
<tr>
<td>Computer</td>
<td>$1600</td>
<td>5</td>
</tr>
<tr>
<td>Phone</td>
<td>$12</td>
<td>12</td>
</tr>
<tr>
<td>Pipeline</td>
<td>$1</td>
<td>234</td>
</tr>
</table>
Table 4#
| Item | Price | Quantity |
|---|---|---|
| Computer | $1600 | 5 |
| Phone | $12 | 12 |
| Pipeline | $1 | 234 |
You can use colons to control the alignment of table headers. For example, to center-align the table headers, you can add colons on both sides of the header. The :---: represents the alignment of the column, with colons on both sides indicating center alignment. In other rows of the table, if you want certain columns to be left-aligned or right-aligned, you can use a colon and a hyphen, for example, :--- indicates left alignment, ---: indicates right alignment.
| Item | Price | Quantity |
| :------- | :----: | ---:|
| Computer | $1600 | 5 |
| Phone | $12 | 12 |
| Pipeline | $1 | 234 |
Images#
Image Layout#
Image aligned to the left#
<!--Left aligned-->
<p align="left">
<img src="ipfs://bafkreihvehxsruluqmcd2fgz2kpaklvfltxjvdlja5q5ytaxvvh2ipafbm" alt="Image description">
</p>
Image aligned to the center#
<!--Center aligned-->
<p align="center">
<img src="ipfs://bafkreihvehxsruluqmcd2fgz2kpaklvfltxjvdlja5q5ytaxvvh2ipafbm" alt="Image description">
</p>
Image aligned to the right#
<!--Right aligned-->
<p align="right">
<img src="ipfs://bafkreihvehxsruluqmcd2fgz2kpaklvfltxjvdlja5q5ytaxvvh2ipafbm" alt="Image description">
</p>
Image displayed as 100*100#
|
<img src="ipfs://bafkreihvehxsruluqmcd2fgz2kpaklvfltxjvdlja5q5ytaxvvh2ipafbm" alt="Image description" width="100" height="100" /> |
Images displayed side by side 1#
| Image description 1 | Image description 2 |
| <img src="ipfs://bafkreihvehxsruluqmcd2fgz2kpaklvfltxjvdlja5q5ytaxvvh2ipafbm" alt="Image description" width="100" height="100" /> | <img src="ipfs://bafkreihvehxsruluqmcd2fgz2kpaklvfltxjvdlja5q5ytaxvvh2ipafbm" alt="Image description" width="100" height="100" /> | | :--: | :--: | | Image description 1 | Image description 2 |
Images displayed side by side 2#
|
|
|
<table>
<tr>
<td style="width:50%;">
<img src="ipfs://bafkreifuurbsvy4b3nr5yflendz5jkbvbvijjtegeuqogmhy3ccfpl252a" style="width:100%">
</td>
<td style="width:50%;">
<img src="ipfs://bafkreifuurbsvy4b3nr5yflendz5jkbvbvijjtegeuqogmhy3ccfpl252a" style="width:100%">
</td>
</tr>
</table>
Images displayed side by side 3 (without background)#
<p class="flex">
<img src="ipfs://bafkreihvehxsruluqmcd2fgz2kpaklvfltxjvdlja5q5ytaxvvh2ipafbm" alt="Image description" width="100" height="100" />
<img src="ipfs://bafkreihvehxsruluqmcd2fgz2kpaklvfltxjvdlja5q5ytaxvvh2ipafbm" alt="Image description" width="100" height="100" />
</p>
Text Processing#
Text Layout Processing#
Displaying hyperlinks side by side#
| [**Github**](https://github.com/) | [**xLog**](https://xlog.app/) | [**Geek**](https://x.geekbb.ml/) |
| :---: | :---: | :---: |
Center-aligned Heading 3#
<h3 align="center">Center-aligned Heading 3</h3>
Right-aligned Heading 3#
<h3 align="right">Right-aligned Heading 3</h3>
Text color processing#
Red
Orange
Yellow
Green
Blue
Purple
Pink
<span style="color:red">Red</span>
<span style="color:orange">Orange</span>
<span style="color:yellow">Yellow</span>
<span style="color:green">Green</span>
<span style="color:blue">Blue</span>
<span style="color:purple">Purple</span>
<span style="color:pink">Pink</span>