工具(2): 極簡MarkDown排版介紹（How to）

如何切換編輯器

切換博客園編輯器為MarkDown：MarkDown Editor
選擇一個在線編輯和預覽站點：StackEdit

如何排版章節

MarkDown：

大標題
==========

小標題
----------

# 一級標題

## 二級標題

### 三級標題

#### 四級標題

例如三級和四級發布后的效果：

三級標題

四級標題

如何插入列表：

MarkDown：

- 個人編程，寫一個命令行程序
    - 注冊Github賬號，建立項目倉庫
        - 添加ReadMe.md并編輯，描述項目的簡要介紹、功能、用例、下載、文檔等
        - 建立doc目錄存放文檔
        - 建立scripts目錄存放各種腳本
        - 建立config目錄存放可公開配置信息
        - 建立src目錄存放源碼
        - 建立test目錄存放測試腳本極其數據
        - 建立PSP表格，預估下述幾個過程的耗時估計
    - 分析程序的需求，并提交文檔到github
        - 基本需求
        - 擴展需求
        - 高級需求
    - 功能設計，并提交文檔到github

    ...

注意在-之后需要有一個空格，發布效果見:

個人編程，寫一個命令行程序
- 注冊Github賬號，建立項目倉庫
  - 添加ReadMe.md并編輯，描述項目的簡要介紹、功能、用例、下載、文檔等
  - 建立doc目錄存放文檔
  - 建立scripts目錄存放各種腳本
  - 建立config目錄存放可公開配置信息
  - 建立src目錄存放源碼
  - 建立test目錄存放測試腳本極其數據
  - 建立PSP表格，預估下述幾個過程的耗時估計
- 分析程序的需求，并提交文檔到github
  - 基本需求
  - 擴展需求
  - 高級需求
- 功能設計，并提交文檔到github

注意:

這是一個為了示意列表刻意全部使用list+item，正常情況下應區分：章節、段落、列表
不要把章節和段落都塞到列表里，語義上他們是有區分的。

如何插入超鏈接：

MarkDown：

[xinz](http://www.rzrgm.cn/xinz)

發布后的渲染效果：

xinz

進一步，我們可以把自己的博客連接做一個目錄菜單，例如下面的軟件工程（FZU2015）賽季得分榜)目錄

<hr/>
SE_FZU目錄：[1](http://www.rzrgm.cn/math/p/4820808.html)  [2](http://www.rzrgm.cn/math/p/4827832.html)   [3](http://www.rzrgm.cn/math/p/4833301.html)  [4](http://www.rzrgm.cn/math/p/4852995.html)  [5](http://www.rzrgm.cn/math/p/4870584.html)   [6](http://www.rzrgm.cn/math/p/4890133.html)  [7](http://www.rzrgm.cn/math/p/4916062.html)  [8](http://www.rzrgm.cn/math/p/4919227.html) [9](http://www.rzrgm.cn/math/p/4935697.html) [**10**](http://www.rzrgm.cn/math/p/4976461.html) [11](http://www.rzrgm.cn/math/p/5066939.html) [12](http://www.rzrgm.cn/math/p/5100034.html) [13](http://www.rzrgm.cn/math/p/5104644.html)
<hr/>

發布后的渲染效果：

SE_FZU目錄： 1 2 3 4 5 6 7 8 9 10 11 12 13

當然，如果你覺的這樣太密集，并且每次更新都要取把系列文章里的所有目錄都更新一遍太辛苦，那么你可以采用雙向鏈表模式。即，在每篇文章的開頭設置上一篇和下一篇的鏈接，參考：軟工+C(9): 助教指南

如何引用別人的文字

MarkDown：

>功利主義是一種在西方影響巨大的倫理學說，其原則是“最大多數人的最大幸福”，以行為的實際功效或利益為判斷行為正當與否的標準。本書系統地闡述了這一學說，分緒論、何謂功利主義、論功利主義最后制裁力、功利主義可以得到什么樣的證明、論公道與功利主義之關系。

-- 引用自《[功利主義](https://book.douban.com/subject/3072490/)》

發布后的渲染效果：

功利主義是一種在西方影響巨大的倫理學說，其原則是“最大多數人的最大幸福”，以行為的實際功效或利益為判斷行為正當與否的標準。本書系統地闡述了這一學說，分緒論、何謂功利主義、論功利主義最后制裁力、功利主義可以得到什么樣的證明、論公道與功利主義之關系。

-- 引用自《功利主義》

注意:

請區分引用和正文段落，不要用引用的方式排版正常的文章段落

如何在行內修飾文字:刪除、加粗、斜體、顏色

MarkDown：

[專業主義](https://book.douban.com/subject/1790456/)
- 描述：這本書著重闡釋了真正的專家必須具備的四種能力：**先見能力**、**構思能力**、**討論的能力**、**適應矛盾**的能力，以豐富的案例和深刻的洞見警示人們*重新思考專業*的內涵與效用，培養并吸納專業人才。
- 狀態：~~已讀完。~~
- 備注： <span style="color:red">分析、設計、實現、改進</span>.

發布后渲染的效果：

專業主義

描述：這本書著重闡釋了真正的專家必須具備的四種能力：先見能力、構思能力、討論的能力、適應矛盾的能力，以豐富的案例和深刻的洞見警示人們重新思考專業的內涵與效用，培養并吸納專業人才。
狀態：~~已讀完。~~
備注：分析、設計、實現、改進.

注意:

如果你可以配置CSS，則應該用帶語義的id、class，而不要直接用style屬性

如何插入代碼：

代碼前后各加鍵盤的Tab鍵上面的那個按鈕的符號三次：

例如，下面是MarkDown,ref:lua/lstring.c：

```

/*

** Create or reuse a zero-terminated string, first checking in the

** cache (using the string address as a key). The cache can contain

** only zero-terminated strings, so it is safe to use 'strcmp' to

** check hits.

*/

TString *luaS_new (lua_State *L, const char *str) {

  unsigned int i = point2uint(str) % STRCACHE_N;  /* hash */

  int j;

  TString **p = G(L)->strcache[i];

  for (j = 0; j < STRCACHE_M; j++) {

    if (strcmp(str, getstr(p[j])) == 0)  /* hit? */

      return p[j];  /* that is it */

  }

  /* normal route */

  for (j = STRCACHE_M - 1; j > 0; j--)

    p[j] = p[j - 1];  /* move out last element */

  /* new element is first in the list */

  p[0] = luaS_newlstr(L, str, strlen(str));

  return p[0];

}

```

發布后的效果：

/*
** Create or reuse a zero-terminated string, first checking in the
** cache (using the string address as a key). The cache can contain
** only zero-terminated strings, so it is safe to use 'strcmp' to
** check hits.
*/
TString *luaS_new (lua_State *L, const char *str) {
  unsigned int i = point2uint(str) % STRCACHE_N;  /* hash */
  int j;
  TString **p = G(L)->strcache[i];
  for (j = 0; j < STRCACHE_M; j++) {
    if (strcmp(str, getstr(p[j])) == 0)  /* hit? */
      return p[j];  /* that is it */
  }
  /* normal route */
  for (j = STRCACHE_M - 1; j > 0; j--)
    p[j] = p[j - 1];  /* move out last element */
  /* new element is first in the list */
  p[0] = luaS_newlstr(L, str, strlen(str));
  return p[0];
}

注意:

請不要用代碼段排版文章的正文段落，代碼段是為了排版諸如：公式、代碼等。
非MarkDown模式插入代碼請參考: http://www.rzrgm.cn/greyzeng/p/4370439.html

如何插入公式

博客后臺，選項里面打開啟用數學公式支持
博客輸入LaTeX數學公式：

行內公式$\sqrt{3x-1}+(1+x)^2$，
行公式:
$$
\sqrt{3x-1}+(1+x)^2
$$

渲染效果：
行內公式$\sqrt{3x-1}+(1+x)^2$，
行公式:$$\sqrt{3x-1}+(1+x)^2$$

如何插入圖片

博客后后臺MarkDown編輯器上只有一個按鈕，就是用來上傳圖片并自動插入MarkDown標記的，超級好用

MarkDown：

![](https://img3.doubanio.com/lpic/s4669554.jpg)

渲染后的效果：

如何插入表格，使用exceltk轉excel為MarkDown

開放源碼：https://github.com/fanfeilong/exceltk
二進制下載（Debug版）：https://files.cnblogs.com/files/math/exceltk0.0.8.7z
詳細用例：http://www.rzrgm.cn/math/p/exceltk.html
表格排版的時候，表頭前面最好空一行，否則渲染的時候可能會被當作文本。

如何添加段落

并沒有特別MarkDown符號標記一段文本是段落，然而，許多人在學習了MarkDown之后，會誤用列表、引用、代碼段去排版段落，所以這里特別提一下。在MarkDown里面，沒有任何修飾的文本就是段落，例如在標題下接著的文本：

#### MarkDown有什么好處？
MarkDown的好處是純文本排版，文本本身就有很強的結構化效果，即使只是在Notepad里寫MarkDown，不用任何渲染，你也能看出層次結構來。比如，在QQ、微信里，你發個MarkDown的文本，別人準能看的出其中的結構層次來，這就是文本結構本身的效果。當然，如果你需要高級一點的渲染效果，隨便找個支持MarkDown渲染的站點渲染下，再導出成HTML或者PDF都是很好的。博客類，像博客園都已經支持MarkDown渲染了。而臨時渲染工具，像這個站點：[stackeditor](http://stackedit.io/editor)就可以直接貼上你在本地Notepad里編輯好的文本，右側就可以看到渲染效果，你可以選擇導出成純文本、HTML、或者PDF。這個站點導出PDF是要注冊帳號的，但也有辦法繞過去，比如你導出帶樣式的HTML，然后用Chrome瀏覽器打開，右鍵打印，保存PDF，就能做到一樣的效果。

渲染效果：

MarkDown有什么好處？

MarkDown的好處是純文本排版，文本本身就有很強的結構化效果，即使只是在Notepad里寫MarkDown，不用任何渲染，你也能看出層次結構來。比如，在QQ、微信里，你發個MarkDown的文本，別人準能看的出其中的結構層次來，這就是文本結構本身的效果。當然，如果你需要高級一點的渲染效果，隨便找個支持MarkDown渲染的站點渲染下，再導出成HTML或者PDF都是很好的。博客類，像博客園都已經支持MarkDown渲染了。而臨時渲染工具，像這個站點：stackeditor 就可以直接貼上你在本地Notepad里編輯好的文本，右側就可以看到渲染效果，你可以選擇導出成純文本、HTML、或者PDF。這個站點導出PDF是要注冊帳號的，但也有辦法繞過去，比如你導出帶樣式的HTML，然后用Chrome瀏覽器打開，右鍵打印，保存PDF，就能做到一樣的效果。

如何畫流程圖？

可以使用mermaid語法：

```mermaid
sequenceDiagram

participant Client
participant CacheMiner
participant Meta
participant Source


Client->>Source: xxxx
Source->>Client: yyy

alt xxx
	Client->>Source: zzz
else
	Client->>Source: www
end
```

渲染效果(可以在Visual Studio Code里預覽)：

如何選擇Word，MarkDown？

觀點：少即是多

渲染的秘密

如果你在自己的博客里做了同樣的事情，你可能得到的渲染效果和本頁面不大一樣，那是正常的，MarkDown的渲染效果是由站點提供的MarkDown的CSS決定的，通常情況下，無論怎樣都夠用，因為使用MarkDown的核心在于它的文本本身就帶有結構化信息，渲染效果并不是標準定義的內容。

但是，如果你想得到本文一模一樣的效果，可以在自己的博客后臺設置->頁面定制CSS里加上如下CSS：

.cnblogs-markdown a {
  color: #4990E2;
  text-decoration: none;
}

.cnblogs-markdown a:hover,
.cnblogs-markdown a:active {
  border-bottom: 1px solid #4990E2;
}


.cnblogs-markdown pre{
  padding: .2em;
  border: .2em;
  border-left-style: solid;
  page-break-inside: avoid;
  border-color: #E0CB52;
  background: #FCFAEE;
}

.cnblogs-markdown blockquote{
  margin: 0;
  margin-top: 0;
  margin-bottom: 16px;
}
.cnblogs-markdown blockquote {
  padding: .2em;
  border: .2em;
  border-left-style: solid;
  page-break-inside: avoid;
  border-color: #52E052;
  background: #E9FBE9;
}

.cnblogs-markdown blockquote>:first-child {
  margin-top: 0;
}

.cnblogs-markdown blockquote>:last-child {
  margin-bottom: 0;
}

.cnblogs-markdown .hljs{
  border:0 !important;
  background-color: #FCFAEE !important;
}
.cnblogs-markdown code{
    border:0 !important;
    background-color: #FCFAEE !important;
}

對配色和渲染效果的喜好因人而異，本博客的CSS參考MDN和W3C。如果你希望學習CSS排版頁面，這個教程是我見過最佳的：web-design-in-4-minutes，花費4分鐘。

MarkDown 編輯/轉換工具

本機編輯器：https://typora.io
在線轉PDF：https://md2pdf.netlify.com/

posted @ 2015-04-21 15:45 ffl 閱讀(49442) 評論(19) 收藏舉報

刷新頁面返回頂部

Feilong's Blog

捕捉極限技術，關注微博 @幻灰龍保持改變的能力，探索無盡的前沿

工具(2): 極簡MarkDown排版介紹（How to）

如何切換編輯器

如何排版章節

三級標題

四級標題

如何插入列表：

如何插入超鏈接：

如何引用別人的文字

如何在行內修飾文字:刪除、加粗、斜體、顏色

如何插入代碼：

如何插入公式

如何插入圖片

如何插入表格，使用exceltk轉excel為MarkDown

如何添加段落

MarkDown有什么好處？

如何畫流程圖？

如何選擇Word，MarkDown？

渲染的秘密

MarkDown 編輯/轉換工具

公告

Feilong's Blog

捕捉極限技術，關注微博 @幻灰龍 保持改變的能力，探索無盡的前沿

工具(2): 極簡MarkDown排版介紹（How to）

如何切換編輯器

如何排版章節

三級標題

四級標題

如何插入列表：

如何插入超鏈接：

如何引用別人的文字

如何在行內修飾文字:刪除、加粗、斜體、顏色

如何插入代碼：

如何插入公式

如何插入圖片

如何插入表格，使用exceltk轉excel為MarkDown

如何添加段落

MarkDown有什么好處？

如何畫流程圖？

如何選擇Word，MarkDown？

渲染的秘密

MarkDown 編輯/轉換 工具

公告

捕捉極限技術，關注微博 @幻灰龍保持改變的能力，探索無盡的前沿

MarkDown 編輯/轉換工具