Chiloh Wei

Markdown is a markup language that uses simple syntax to give plain text content a certain format. Since getting to know it, I have found it useful in many places, such as the article you are currently reading, which is written in Markdown. Its syntax is extremely simple and easy to learn, except for the slightly more difficult table writing method. Therefore, I wrote this article specifically to record it.

Overview of Markdown:#

Reference article: Markdown Chinese Documentation

Design Philosophy:#

Markdown is committed to making reading and writing documents easy.
Markdown considers readability as the highest criterion. Markdown files should be published in plain text form without markup tags and formatting instructions. Although Markdown's syntax is influenced by the following text-to-HTML filters -- including Setext, atx, Textile, reStructuredText, Grutatext, and EtText -- the biggest inspiration for Markdown syntax still comes from the format of plain text emails.
Based on the above background, Markdown is composed entirely of punctuation marks, which have been carefully selected to look the same as their intended meaning. For example, words marked with asterisks look like emphasis. Lists look like lists. If you have used email, even block quotes look like quoted paragraphs of text.

Inline HTML:#

Markdown is used to create web documents.
Markdown was never intended to replace HTML. Its syntax is very small and corresponds to only a small part of HTML tags. Its purpose is not to create a new syntax to make inserting HTML tags easier. In my opinion, inserting HTML tags is already easy enough. Markdown aims to make reading, writing, and editing articles easy. HTML is a publishing format; Markdown is a writing format. Therefore, Markdown deals with plain text.
For tags not included in Markdown, HTML can be used directly. There is no need to use delimiters or identifiers to indicate a switch from Markdown to HTML; just use the tags directly.
The only limitation is for HTML block-level elements: such as <div>, <table>, <pre>, <p>, etc. They must be placed on a separate line, and there should be no indentation before the start and end tags. Markdown will automatically recognize these block-level elements without adding additional <p> tags around them.
For example, the following is how to add an HTML table to a Markdown file:

This is a regular paragraph.

<table>
    <tr>
        <td>Foo</td>
    </tr>
</table>

This is another regular paragraph.

Note that Markdown syntax is not processed within HTML block-level elements. For example, you should not use Markdown-style syntax like emphasis within HTML block-level elements.
Markdown syntax can be parsed within inline HTML elements such as <span>, <cite>, and <del>.

Markdown Table Writing (Applicable to Github):#

From the above Markdown Chinese Documentation, it can be seen that there should be two ways to write tables: one is the HTML-Table tag method, and the other is the Markdown-based method. Please refer to the following for details:

1. HTML-Table method:#

For details, please refer to HTML-Table tags, which will not be repeated here.

2. Markdown method:#

Reference article: Organizing information with tables

Markdown uses | and - to create tables. - is used to create the header of each column, and | is used to separate each column. A blank line must be added before creating the table to display it correctly.

Code:

| First Header  | Second Header |
| ------------- | ------------- |
| Content Cell  | Content Cell  |
| Content Cell  | Content Cell  |

Result:

The width of the cells can be different, and perfect alignment within columns is not required. Each column in the header row must have at least three hyphens.

Code:

| Command | Description |
| --- | --- |
| git status | List all new or modified files |
| git diff | Show file differences that haven't been staged |

Result:

Format links, inline code blocks, and text styles in the table.

Code:

| Command | Description |
| --- | --- |
| `git status` | List all *new or modified* files |
| `git diff` | Show file differences that **haven't been** staged |
| `Blog Link` | <https://www.chiloh.cn> |

Result:

Use : on the left, right, or both sides of the - in the header row to adjust the text alignment to left, center, or right.

Code:

| Left-aligned | Center-aligned | Right-aligned |
| :---         |     :---:      |          ---: |
| git status   | git status     | git status    |
| git diff     | git diff       | git diff      |

Result:

To use | within a cell, add \ before the | to escape it. It seems that it cannot be used in Typecho, so use the ASCII code &#124 of | to achieve it.

Code:

| Name     | Character |
| ---      | ---       |
| Backtick | 、        |
| Pipe     | &#124     |

Result:

3. Advanced Tables#

If you want to optimize the table, you can consider using CSS. Some Markdown parsers support mixed syntax, but Typecho does not, so pure HTML is used to write the table.

Code:

<style type="text/css">
.bg table, td, th
{
    border:1px solid grey; //Set the table border color
}
.bg table th:nth-of-type(1) {
    width: 12%; //Set the column width, (1) represents the first column
}
.bg table th:nth-of-type(2) {
    width: 24%; //Set the column width, (2) represents the second column
}
.bg table td:nth-of-type(1) {
	color: red; //Set the column color, (1) represents the first column
}
.bg table td:nth-of-type(2) {
	color: green; //Set the column color, (2) represents the second column
}
</style>

<div class="bg">

<table>
    <tr>
        <td>编号</td>
        <td>名称</td>
        <td>简介</td>
    </tr>
    <tr>
        <td>1</td>
        <td>Apple</td>
        <td>苹果</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Banana</td>
        <td>香蕉</td>
    </tr>
    <tr>
        <td>3</td>
        <td>Lemon</td>
        <td>柠檬</td>
    </tr>
</table>

</div>

Result:

!!!