Markdown使用指南(轉+練習)

一、簡介

什么是Markdown?Markdown是一種輕量級的[標記語言],通常為程序員群體所用,目前它已經是全球最大的技術分享網站GitHub和技術問答網站StackOverFlow的御用書寫格式。

有道云筆記內置Markdown編輯器和使用指南,非技術類筆記用戶,千萬不要被[標記]、[語言]嚇到,Markdown的語法十分簡單,常用的標記符號不超過十個,用于日常寫作記錄綽綽有余,不到半小時就能完全掌握

就是這十個不到的標記符號,卻能讓人優雅地沉浸式記錄,專注內容而不是糾結排版,達到[心中無塵,碼字入神]的境界。

二、利用Markedown可以做什么?

2.1 代碼高亮

image

2.2 制作待辦事項To-do List

image

2.3 高效繪制:流程圖、序列圖、甘特圖、表格

【流程圖】:

image

【序列圖】:

image

【甘特圖】:

image

【表格】:

image

2.4 書寫數學公式

image

三、有道云筆記Markdown簡明版使用指南

3.1 標題

標題是每篇文章必備而且最常用的格式。

在Markdown中,如果想將一段文字定義為標題,只需要<font color="912CEE">在這段文字前面加上#,再在#后加一個空格即可</font>。還可增加二、三、四、五、六級標題,總共六級,只需要增加#,<font color="912CEE">增加一個#,標題字號相應降低一級</font>。如圖:

image

3.2 列表

列表格式也很常用,它可以讓你的文稿變得井井有條。在Markedown中,你只需要<font color="912CEE">在文字前面加上-就可以了;如果你希望是有序列表,在文字前面加上1.、2.、3.即可</font>。

注意:1.和文字之間要保留一個字符的空格

image

3.3 引用

如果你需要在文稿中引用一段別處的句子,那么就要用到[引用]格式。<font color="912CEE">在引用文字前加上>并與文字保留一個空格的字符即可</font>。

image

3.4 粗體和斜體

Markdown的粗體和斜體也非常簡單:

<font color="912CEE">用兩個*包含一段文本就是粗體的語法;</font>

<font color="912CEE">用一個*包含一段文本就是斜體的語法。</font>

image

3.5 鏈接與圖片

<font color="912CEE">鏈接:在Markdown中插入鏈接只需要使用[顯示文本](鏈接地址)即可。</font>

<font color="912CEE">圖片:在Markdown中,插入圖片只需要使用![顯示文本](圖片鏈接地址)即可。</font>

注意:插入圖片的語法和鏈接的語法很像,只是前面多了一個!

image

3.6 分割線

分割線的語法只需要<font color="912CEE">另起一行,連續輸入三個星號***即可</font>分割兩段文字內容。如圖:

image

3.7 表格

當你需要在Markdown文稿中鍵入表格,代碼如下:

image

【實例參考】:

image

3.8 換行

要想換行,常簡的有如下幾種:

1.在兩段文字中間空一行即可。

2.使用HTML的語法,在文字段末尾增加<br>即可。

注:使用<br>分行間隔是緊挨著的。

3.9 添加代碼段

Markdown插入代碼段的方法:英文輸入法下,輸入一對```(就是鍵盤左上角的~鍵),然后把代碼段黏貼到它們之間,就OK了。

【比如下面的示例】:

#include <stdio.h>
#include <stdlib.h>

int main(void)
{
    printf("hello world!\n");
    return 0;
}

3.10 顯示特殊字符(與Markdown語法沖突字符)

特殊字符的顯示可以使用單個'\'來進行顯示。

3.11 修改文本的字體

Markdown內嵌HTML語法,可以通過標記的方式修改文本的字體。語法如下:

<font face="黑體">這是一串黑體字</font><br>

<font face="華文彩云">這是一串華文彩云</font><br>

【效果如下】:

<font face="黑體">這是一串黑體字</font>

<font face="華文彩云">這是一串華文彩云</font>

3.12 改變字體的顏色和大小

Markdown內嵌HTML語法,可以通過標記的方式修改字體的顏色和大小。語法如下:

修改字體顏色:<font color="#dd0000">淺紅色文字:</font></br>

修改字體大小:<font size="8">size為8</font><br>

附:RGB顏色查詢對照表

【修改顏色和大小的效果如下】:

淺紅色文字:<font color="#dd0000">淺紅色文字</font></br>
深紅色文字:<font color="#660000">深紅色文字</font></br>
size為3:<font size="3">size為3</font>

size為5:<font size="5">size為5</font>

3.13 總結

如上前7大格式是寫作文稿時最長使用的。后面幾個是使用中也比較常見的用法。

怎么樣,看了相關Markdown語法是不是覺得挺簡單?

當然,Markedown新手在使用不熟練的情況下,可能會忘記相關語法,也沒關系,筆記的工具欄內置了Markdown語法,方便學習與熟悉。

如,[表格]語法相對復雜,你可能忘記了,這時候,你只需要點擊編輯框上方工具欄,點選[表格]的圖標,左邊編輯區便于出現[表格]相應代碼:

image

然后,你只需要將代碼替換成相應文本即可,如圖:

image

熟悉語法之后,還是建議大家少使用輔助工具欄,盡量自己鍵入代碼,感受純文本之美。

當然,有道云筆記的Markdown還能支持制作待辦事項,書寫流程圖、序列圖、甘特圖,書寫數學公式等,是不是夠極客,夠有逼格?

看看筆記菌用Markdown甘特圖寫的項目計劃時間表:

image

四、有道云筆記Markdown進階版使用指南

“進階版”有道云筆記Markdown指南,教你如何進一步掌握代辦、清單、流程圖和甘特圖。

4.1 待辦和清單

待辦事項和清單在日常工作、生活中經常被使用。

在Markdown中,你只需要在待辦的事項文本或者清單前加上-[]、-[x]即可

-[]表示未完成, -[x]表示已完成。

注:鍵入字符與字符之間都要保留一個字符的空格。

【具體呈現如下】:

image

4.2 流程圖

在Markdown中,一段流程圖語法以"`開頭,以"`結尾。

在"`后另起一行,書寫graph XX,用以確定將要繪制的流程圖及其類型(XX表示流程圖類型)。

流程圖分為豎向和橫向兩大類,豎向包括自上而下和自下而上兩種順序,橫向包括從右到左和從左到右兩種順序。

其對應語法分別為:graph TB/graph BT/graph RL/graph LR

  • TB - top bottom (自上而下)
  • BT - bottom top (自下而上)
  • RL - right left (從右到左)
  • LR - left right (從左到右)

【簡單示例如圖】:

image
image
image
image

【來學習一個具體案例】:

image

仔細研究上述案例,會發現,我們可以通過調整語法來調整流程圖的框線、連接線,不同條件能導向不同的結果。

①對框線形狀的調整,如:

image

②對箭頭的調整,如:

image

只要充分掌握該語法,再復雜的流程圖也完全能用Markdown書寫!

更詳細的流程圖語法,可參見:http://knsv.github.io/mermaid/#flowcharts-basic-syntax

4.3 甘特圖

我們在工作中用甘特圖做計劃進度表、項目進度表再合適不過了。

以如下甘特圖為例說明:

image

與流程圖一樣,Markdown中,甘特圖的語法也是以"`開頭,以"`結尾。

在"`后另起一行,書寫gantt,用以確定將要繪制的是甘特圖。

標題的書寫語法如下:

image

dataFormat YYYY-MM-DD規定了時間軸,title(標題文本)表示甘特圖標題。

如需按項目進行劃分,需鍵入section,空一格字符,再輸入項目名稱的文本(一個section和另一個section之間要空行)。

每個大項目將拆解為若干個小任務,只需在section之后另起一行,直接輸入小項目名稱即可。

更詳細的甘特圖語法,參見http://knsv.github.io/mermaid/#styling39

五、Tips for有道云筆記中的Markdown

5.1 實時同步預覽,所看即所得

我們將筆記編輯界面一分為二,左邊為編輯區,右邊為預覽區,兩區滾動條同步。在編輯區的操作能夠實時反映在瀏覽區,方便及時調整和查看最終版面效果。

5.2 工具欄內置Markdown語法,方便新手學習

編輯頁面頂端的工具欄有對應代碼,如果你是一個不熟悉Markdown語法的新手,可以先嘗試用工具欄輔助操作。也可以在網上搜索[Markdown語法指南]進行學習。

當然,如果你覺得工具欄太打擾,點擊下方分界條即可隱藏工具欄,切換到極簡編輯環境。

5.3實時云端保存

Markdown模式繼承了有道云筆記的優良傳統,你每一次擊鍵的內容都會實時保存在云端,無需擔心瀏覽器崩潰、設備沒電、突然斷網等情況。對于寫作者來說,更是再也不用擔心因為各種原因痛失文稿的情況了。

5.4 界面大小可點擊分解條調整

點擊“1”處,工具欄收起;點擊“2”處,右側預覽區收起。

image

【點擊后燈效果】:

image

六、Markdown其他技巧

6.1 改變背景顏色(未驗證成功)

修改文字的背景顏色方法為:

<table><tr><td bgcolor=#ff00ff>背景色是:#ff00ff</td></tr></table>

附:RGB顏色查詢對照表

【效果如下】:

<table><tr><td bgcolor=#ff00ff>背景色是:#ff00ff</td></tr></table>

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 228,505評論 6 533
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 98,556評論 3 418
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 176,463評論 0 376
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,009評論 1 312
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 71,778評論 6 410
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,218評論 1 324
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,281評論 3 441
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,436評論 0 288
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 48,969評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 40,795評論 3 354
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 42,993評論 1 369
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,537評論 5 359
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,229評論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,659評論 0 26
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,917評論 1 286
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,687評論 3 392
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 47,990評論 2 374

推薦閱讀更多精彩內容