Markdown tricks

## 編輯排版 僅僅瞭解 Markdown 語法還不夠，知道這些 排版技巧 增色您的文章內容。 ### 空格和空行 留白，從藝術角度上說，留白就是以“空白”為載體進而 渲染出美的意境的藝術。從應用角度上說，留白更多指一種 簡單、安閒的理念。在 Markdown 中善於使用空格和空行使文章閱讀起來更加自然。 善用空格即在中英文混排或者中文和阿拉伯數字混排時時，在英文或阿拉伯數字前後各插入一個空格。同樣建議在中文和行內程式碼混排時，在行內程式碼前後各加一個空格。需要注意的是，若英文、阿拉伯數字或行內程式碼緊鄰中文全形標點，則其與標點之間~~加空格~~(不加空格)。 善用空行即在段落與段落之間插入一條空行。下面是一段示例。 John Gruber 在 2004 年創造了 Markdown 語言。很多人認為 `Markdown` 能夠提升生產力。[Markdown Guide](https://www.markdownguide.org/) 是一個免費的開源參考指南，它解釋瞭如何使用 Markdown，這是一種簡單易用的標記語言，您可以用它來格式化幾乎任何文件。 > 如果您正在使用 vscode 作為 markdown 編輯器，我推薦使用 vscode 擴充套件 [pandu](https://marketplace.visualstudio.com/items?itemName=halfcrazy.pangu) 來自動插入左右空格。 ### 圖文混排 您可能看見過這樣的文章排版，一側是圖片，另一側是一個段落。 ###  這在 markdown 中實現起來並不困難，使用 ` ` 標籤來貼圖，然後指定它的 `align` 屬性為 `left` 或者 `right`。 ```html Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis error ipsam voluptatibus eius dolore maxime aperiam eveniet, autem laborum exercitationem recusandae nostrum, soluta praesentium vel sapiente. Natus, nobis molestiae. Repellat? ``` Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis error ipsam voluptatibus eius dolore maxime aperiam eveniet, autem laborum exercitationem recusandae nostrum, soluta praesentium vel sapiente. Natus, nobis molestiae. Repellat? ### 程式碼塊摺疊 在部落格園的 TinyMCE 中您可以輕鬆插入能夠摺疊的程式碼塊，好在 Markdown 可以使用 HTML 的標籤功能。H5 提供了 `

` 和 `

` 標籤，使用它們很容易在 Markdown 中實現程式碼塊摺疊。 ````html

post-signature.js

```javascript // 構建隨筆簽名 import { pageName } from '@tools' import { getBlogname, getCurrentPostUrl } from '@cnblog' import { postSignatureConfig } from '@config/plugins' const containerId = 'post-signature' /** * 構建容器 */ const buildContainer = () => { const author = getBlogname() const href = getCurrentPostUrl() const el = `

本文作者：${author}

本文連結：${href}

` $('#cnblogs_post_body').append(el) } /** * 構建版權資訊 * @param {Boolean} enableLicense * @param {String} licenseName * @param {String} licenseLink */ const buildLicense = ( enableLicense, licenseName, licenseLink, ) => { if (!enableLicense) return const agreement = licenseName.length ? licenseName : '知識共享署名-非商業性使用-禁止演繹 2.5 中國大陸' const el = `

版權宣告：本作品採用${agreement}許可協議進行許可。

` $(`#${containerId}`).append(el) } /** * 構建自定義內容 * @param {Array} content */ function buildContent(content) { let el = '' for (let i = 0; i < content.length; i++) { el += '

' + content[i] + '

' } $(`#${containerId}`).append(el) } export default devOptions => { const { enable, enableLicense, content, licenseName, licenseLink, } = postSignatureConfig(devOptions) if (!enable) return if (pageName() !== 'post') return buildContainer() buildLicense(enableLicense, licenseName, licenseLink) buildContent(content) } ```

````

post-signature.js

```javascript // 構建隨筆簽名 import { pageName } from '@tools' import { getBlogname, getCurrentPostUrl } from '@cnblog' import { postSignatureConfig } from '@config/plugins' const containerId = 'post-signature' /** * 構建容器 */ const buildContainer = () => { const author = getBlogname() const href = getCurrentPostUrl() const el = `

                   

本文作者：${author}

                   

本文連結：${href}

               

` $('#cnblogs_post_body').append(el) } /** * 構建版權資訊 * @param {Boolean} enableLicense * @param {String} licenseName * @param {String} licenseLink */ const buildLicense = (enableLicense, licenseName, licenseLink) => { if (!enableLicense) return const agreement = licenseName.length ? licenseName : '知識共享署名-非商業性使用-禁止演繹 2.5 中國大陸' const el = `

版權宣告：本作品採用${agreement}許可協議進行許可。

` $(`#${containerId}`).append(el) } /** * 構建自定義內容 * @param {Array} content */ function buildContent(content) { let el = '' for (let i = 0; i < content.length; i++) { el += '

' + content[i] + '

' } $(`#${containerId}`).append(el) } export default devOptions => { const { enable, enableLicense, content, licenseName, licenseLink } = postSignatureConfig(devOptions) if (!enable) return if (pageName() !== 'post') return buildContainer() buildLicense(enableLicense, licenseName, licenseLink) buildContent(content) } ```

您甚至可以摺疊任何內容，只需要將 `

`  標籤之間的內容替換為其他要摺疊的內容。 > 請注意，在 `

`  標籤之間的內容上下各保留一條空行。 ### 引用塊 在 Markdown 中一般通過 `>`  來宣告一個 Markdown 引用塊： > 這是一個引用塊。 但它們的樣式都是固定的，我們常常需要一些帶有提示資訊的引用塊，像下面這樣：  在 Markdown 中藉助 HTML 和 CSS 也能實現這一點。 ```html

《戰爭與和平》一八一二年，俄、法兩國再度交戰，安德烈·保爾康斯基在戰役中身受重傷，而俄軍節節敗退，眼見莫斯科將陷於敵人之手了。羅斯托夫將原本用來搬運家產的馬車，改去運送傷兵，娜達莎方能於傷兵中發現將要死去的安德烈·保爾康斯基。她向他謝罪並熱誠看護他，但一切都是徒勞了，安德烈·保爾康斯基仍然逃不過死亡之神而去世了。

《巴黎聖母院 》醜聾人卡西莫多被巴黎聖母院的神父克羅德收養，做撞鐘人，外表正經的克羅德神父自從遇見美麗的吉普賽少女拉·愛斯梅拉達後，被其美色所誘而神魂顛倒，指使卡西莫多強行擄走愛斯梅拉達，途中被福比斯騎兵上尉隊長所救，愛斯梅拉達因而愛上了福比斯。

《童年》講了小主人公高爾基（阿廖沙）在父親去世後，隨母親寄住在外祖父家中度過的歲月。其間，他得到外祖母的疼愛、呵護，受到外祖母所講述的優美童話的薰陶，同時也親眼目睹兩個舅舅為爭奪家產而爭吵打架以及在生活瑣事中表現出來的自私、貪婪。高爾基（阿廖沙）就是在這種“令人窒息的、充滿可怕景象的狹小天地裡”度過了自己的童年。

《呼嘯山莊》一個愛到極致的男人，做出了瘋狂的行為。他用“愛”殺人，卻也用愛自殺。凱瑟琳生前死後，他都活在痛苦裡。凱瑟琳彌留之際，他還用說話去刺傷她。但是，希斯克力夫承受的卻是兩份傷痛，他自己的和凱瑟琳的。

《紅與黑》是19世紀法國乃至歐洲文學的一座豐碑。小說圍繞主人公於連的個人奮鬥及兩次愛情經歷的描寫，揭示了復辟王朝時期的波瀾的階級大博鬥，反映了政治黑暗、教會腐敗，貴族反動和資產階級利慾薰心的廣闊生活畫面。於連的兩次愛情動機都是以愛情佔有為出發點最終要達到自己的政治目的。

《安娜·卡列尼娜》是俄國著名作家列夫·托爾斯泰的代表作品。本書通過女主人公安娜的追求愛情悲劇，和列文在農村面臨危機而進行的改革與探索這兩條線索，描繪了俄國從莫斯科到外省鄉村廣闊而豐富多彩的圖景，先後描寫了150多個人物，是一部社會百科全書式的作品。

《飄》所講述的是一個以美國南北戰爭為背景的愛情故事。小說的主人公思嘉·奧哈拉是美國佐治亞州一位富足且頗有地位的種植園主的女兒。父親傑拉爾德是愛爾蘭的移民。剛到佐治亞州時，傑拉爾德身無分文，靠賭博贏得了塔羅莊園的所有權。於是就開始在這塊紅色的土地上創業，編織著他的美國之夢。

《約翰·克利斯朵夫》（Jean-Christophe）是一部通過主人公一生經歷去反映現實社會一系列矛盾衝突，宣揚人道主義和英雄主義的長篇小說。小說描寫了主人公奮鬥的一生，從兒時音樂才能的覺醒、到青年時代對權貴的蔑視和反抗、再到成年後在事業上的追求和成功、最後達到精神寧靜的崇高境界

《安娜·卡列尼娜》是俄國著名作家列夫·托爾斯泰的代表作品。本書通過女主人公安娜的追求愛情悲劇，和列文在農村面臨危機而進行的改革與探索這兩條線索，描繪了俄國從莫斯科到外省鄉村廣闊而豐富多彩的圖景，先後描寫了150多個人物，是一部社會百科全書式的作品。

高爾基原名阿列克塞·馬克西莫維奇·彼什科夫，於1868年3月28日出生在伏爾加河畔的尼日尼·諾夫戈羅德(即今高爾基城)，父親是細木工。他4歲喪父，隨母親寄居外祖父家，10歲時外祖父因遭火災而破產，他便被拋到“人間”，開始了自謀生路的流浪生涯。16歲到喀山，原想上大學，結果喀山的貧民窟和碼頭成了他的“社會大學”。在那裡，他接觸了進步青年的革命團體。

```

《戰爭與和平》一八一二年，俄、法兩國再度交戰，安德烈·保爾康斯基在戰役中身受重傷，而俄軍節節敗退，眼見莫斯科將陷於敵人之手了。羅斯托夫將原本用來搬運家產的馬車，改去運送傷兵，娜達莎方能於傷兵中發現將要死去的安德烈·保爾康斯基。她向他謝罪並熱誠看護他，但一切都是徒勞了，安德烈·保爾康斯基仍然逃不過死亡之神而去世了。

《巴黎聖母院 》醜聾人卡西莫多被巴黎聖母院的神父克羅德收養，做撞鐘人，外表正經的克羅德神父自從遇見美麗的吉普賽少女拉·愛斯梅拉達後，被其美色所誘而神魂顛倒，指使卡西莫多強行擄走愛斯梅拉達，途中被福比斯騎兵上尉隊長所救，愛斯梅拉達因而愛上了福比斯。

《童年》講了小主人公高爾基（阿廖沙）在父親去世後，隨母親寄住在外祖父家中度過的歲月。其間，他得到外祖母的疼愛、呵護，受到外祖母所講述的優美童話的薰陶，同時也親眼目睹兩個舅舅為爭奪家產而爭吵打架以及在生活瑣事中表現出來的自私、貪婪。高爾基（阿廖沙）就是在這種“令人窒息的、充滿可怕景象的狹小天地裡”度過了自己的童年。

《呼嘯山莊》一個愛到極致的男人，做出了瘋狂的行為。他用“愛”殺人，卻也用愛自殺。凱瑟琳生前死後，他都活在痛苦裡。凱瑟琳彌留之際，他還用說話去刺傷她。但是，希斯克力夫承受的卻是兩份傷痛，他自己的和凱瑟琳的。

《紅與黑》是19世紀法國乃至歐洲文學的一座豐碑。小說圍繞主人公於連的個人奮鬥及兩次愛情經歷的描寫，揭示了復辟王朝時期的波瀾的階級大博鬥，反映了政治黑暗、教會腐敗，貴族反動和資產階級利慾薰心的廣闊生活畫面。於連的兩次愛情動機都是以愛情佔有為出發點最終要達到自己的政治目的。

《安娜·卡列尼娜》是俄國著名作家列夫·托爾斯泰的代表作品。本書通過女主人公安娜的追求愛情悲劇，和列文在農村面臨危機而進行的改革與探索這兩條線索，描繪了俄國從莫斯科到外省鄉村廣闊而豐富多彩的圖景，先後描寫了150多個人物，是一部社會百科全書式的作品。

《飄》所講述的是一個以美國南北戰爭為背景的愛情故事。小說的主人公思嘉·奧哈拉是美國佐治亞州一位富足且頗有地位的種植園主的女兒。父親傑拉爾德是愛爾蘭的移民。剛到佐治亞州時，傑拉爾德身無分文，靠賭博贏得了塔羅莊園的所有權。於是就開始在這塊紅色的土地上創業，編織著他的美國之夢。

《約翰·克利斯朵夫》（Jean-Christophe）是一部通過主人公一生經歷去反映現實社會一系列矛盾衝突，宣揚人道主義和英雄主義的長篇小說。小說描寫了主人公奮鬥的一生，從兒時音樂才能的覺醒、到青年時代對權貴的蔑視和反抗、再到成年後在事業上的追求和成功、最後達到精神寧靜的崇高境界

《安娜·卡列尼娜》是俄國著名作家列夫·托爾斯泰的代表作品。本書通過女主人公安娜的追求愛情悲劇，和列文在農村面臨危機而進行的改革與探索這兩條線索，描繪了俄國從莫斯科到外省鄉村廣闊而豐富多彩的圖景，先後描寫了150多個人物，是一部社會百科全書式的作品。

高爾基原名阿列克塞·馬克西莫維奇·彼什科夫，於1868年3月28日出生在伏爾加河畔的尼日尼·諾夫戈羅德(即今高爾基城)，父親是細木工。他4歲喪父，隨母親寄居外祖父家，10歲時外祖父因遭火災而破產，他便被拋到“人間”，開始了自謀生路的流浪生涯。16歲到喀山，原想上大學，結果喀山的貧民窟和碼頭成了他的“社會大學”。在那裡，他接觸了進步青年的革命團體。

## 工具 我選擇語雀作為主力工具。 ### 插入圖片 使用語雀插入圖片非常簡單，Crtl+ c 複製圖片，Crtl + v 直接將圖片貼上到內容，就會自動幫您上傳到語雀的伺服器。或者您也可以使用工具欄的插圖圖片按鈕，選擇本地圖片插入。我通常使用 windows 自帶的截圖工具（快捷鍵：win+ shift+s）截圖並貼上，因為該截圖工具會自動幫您把圖片複製到剪下板。在 mac 下也有相似的解決方案。  ### 插入表格 在 markdown 中插入表格是十分繁瑣的，但在語雀中十分容易：點選插入按鈕，滑動滑鼠選擇需要的表格擁有的行數和列數，即可自動幫您生成。  您還可以在編輯表格的過程中隨時增刪列和行以及設定表格內容的對齊方式等。 ### 插入公式 數學公式對於一些人群是剛需，語雀支援插入 LaTeX 公式。重要的一點是，您的文章要釋出的平臺可能不支援渲染 markdown 數學公式。語雀支援在匯出 markdown 時勾選匯出 LaTeX 公式為圖片。  ### 製作思維導圖 通常，將張思維導圖嵌入 markdown 可能需要以下步驟： 1. 開啟思維導圖製作工具 xmind wps etc. 2. 開始製作思維導圖 3. 將成圖用截圖或者匯出為圖片 4. 將圖片上傳到圖床獲得圖片連結 5. 使用 markdown 語法插入圖片 使用語雀只需要： 1. 直接在 markdown 中製作思維導圖 1. 匯出時自動轉為圖片 > 如果想插入流程圖也是同樣輕而易舉。 ### 匯出 語雀能夠一鍵匯出內容為 Markdown 原始碼，無縫銜接到其他社群，我只將內容釋出到部落格園，目前沒發現什麼問題。您可以通過我的 [邀請連結](https://www.yuque.com/login?platform=wechat&inviteToken=d97efa6c62973d671ad88d38b9b4d9c9b62201921c22c6bfc60ec5889295e00d) 加入語雀或者直接 [加入](https://www.yuque.com/)。謝謝閱讀！