markdown編輯器

2020-08-16 13:09:36

Markdown簡介


簡介

  • Markdown是一種輕量級標示語言,它允許人們使用簡單、易讀、易寫的純文字格式編寫文件。
  • Markdown語言在2004年由約翰格魯伯(英語JohnGruber)建立。
  • Markdown編寫的文件可以導出爲HTML、Word、影象、PDF、Epub等多種格式的文件。
  • Markdown編寫的文件後綴爲 .md.markdown

Markdown的應用

  • Markdown被用來撰寫電子書,例如Gitbook。
  • 當前許多網站都使用Markdown來撰寫幫助文件或是用來在論壇\部落格上發表文章。例如,Github簡書RedditCSDN等.

編輯器

  • Markdown比較有名的編輯器是Typora,包含多種主題,編輯後直接渲染出效果,支援導出多種型別檔案。Typora官網
  • 很多部落格網站也提供Markdown的編輯功能,比如CSDN,本片筆記使用有道雲筆記編輯

測試範例

  • Markdown用來寫程式碼筆記非常合適,會針對不同程式碼進行格式高亮。
  • 使用Markdown編寫Hello World語法(C語言)
printf("Hello world!");

Markdown標題


  • Markdown的標題有兩種格式:
  1. 使用=和-分別編輯一二級標題,格式如下:
    我展示的是一級標題
    ==================
    
    這裏是二級標題
    ---------------

效果如下

我展示的是一級標題

這裏是二級標題

  1. 使用#進行標記(使用#號可以表示1–6級標題
#這裏展示的是一級標題(注意標題名稱和#號之間要用空格分開,才能 纔能正常顯示相互格式)
##這裏展示的是二級標題
###這裏展示的是三級標題

效果如下

這裏展示的是一級標題

這裏展示的是二級標題

這裏展示的是三級標題


Markdown段落格式


  • Markdown沒有特殊的段落格式,正常編輯就行,注意一點是段落的換行要使用兩個以上的空格加回車也可以在段落後再加一個空行,來表示重新開始一個段落,如下圖
    [外連圖片轉存失敗,源站可能有防盜鏈機制 機製,建議將圖片儲存下來直接上傳(img-0UQAzB3y-1597551607679)(85FAE2D16AC842C58A508B3FE49A4F7E)]

  • 字型
    [外連圖片轉存失敗,源站可能有防盜鏈機制 機製,建議將圖片儲存下來直接上傳(img-XSjm2ujs-1597551607680)(86CFACCEF55748ECBBDEB3617E4431E2)]


斜體文字
斜體文字
粗體文字
粗體文字
粗斜體文字
粗斜體文字


  • 分割線
    • 你可以在一行中用三個以上的星號、減號、底線來建立一個分隔線,行內不能有其他東西。你也可以在星號或是減號中間插入空格。下面 下麪每種寫法都可以建立分隔線:
      [外連圖片轉存失敗,源站可能有防盜鏈機制 機製,建議將圖片儲存下來直接上傳(img-sdKdx9pb-1597551607681)(8F32B99CC4814C57BD807EE7609D0F48)]

顯示效果如下






  • 刪除線

如果段落上的文字要新增刪除線,只需要在文字的兩端加上兩個波浪線即可,範例如下:
~~ 刪除線~~
–刪 除 線–

  • 下劃線
    下劃線可以通過HTML的<u>標籤實現

    帶下劃線的文字

  • 腳註
    腳註是對文字的補充說明。
    [外連圖片轉存失敗,源站可能有防盜鏈機制 機製,建議將圖片儲存下來直接上傳(img-cYTlThix-1597551607683)(A053BFC06CB144D8952B6A76BB5C3DF9)]

Markdown列表

  • Markdown支援有序列表無序列表

  • 無序列表使用*號、+號、或是-號作爲列表標記,這些標記後面要新增一個空格,然後再填寫內容:
    [外連圖片轉存失敗,源站可能有防盜鏈機制 機製,建議將圖片儲存下來直接上傳(img-5zeRN8Ru-1597551607683)(7BE267517BE84AEB97A0D894FF9A9F09)]

    有序列表 使用數位加點來表示,如下圖
    [外連圖片轉存失敗,源站可能有防盜鏈機制 機製,建議將圖片儲存下來直接上傳(img-ZlK8ySDM-1597551607684)(8F4244D7B633434090CE852F2F8A8FCF)]

  • 列表巢狀
    [外連圖片轉存失敗,源站可能有防盜鏈機制 機製,建議將圖片儲存下來直接上傳(img-f1nr6D3H-1597551607685)(9FE092EA6D8A4F3D915B69CCFA5A8856)]

Markdown區塊

  • Markdown區塊參照是在段落開頭使用>號,然後後面緊跟一個空格號。
    [外連圖片轉存失敗,源站可能有防盜鏈機制 機製,建議將圖片儲存下來直接上傳(img-NjGKGqT2-1597551607685)(FBD9F1AAC5944AB0A96DA8955ED4FDD3)]

    區塊參照
    菜鳥教學
    學的不僅是技術更是夢想

另外區塊是可以巢狀的,一個>號是最外層,>>是第一層
[外連圖片轉存失敗,源站可能有防盜鏈機制 機製,建議將圖片儲存下來直接上傳(img-9FWAAiHv-1597551607686)(913527E197C441E49CEDD69E2365E9BC)]

最外層

第一層

第二層

  • 區塊中使用列表
    [外連圖片轉存失敗,源站可能有防盜鏈機制 機製,建議將圖片儲存下來直接上傳(img-e5VqPlaK-1597551607686)(E0CC00068E4840698AA73F9FED85215D)]

區塊中使用列表
1.第一項
2.第二項

  • 第三項
  • 列表中使用區塊
    [外連圖片轉存失敗,源站可能有防盜鏈機制 機製,建議將圖片儲存下來直接上傳(img-ybAOLwXW-1597551607686)(9240F76EAF404591A4B0CDDCD4700F60)]
  • 第一項

    菜鳥教學
    哈哈哈

  • 第二項

Markdown程式碼

  • 如果是段落上的一個函數或片段的程式碼可以用反引號把它包起來( `` ),例如
    printf()函數

  • 程式碼區塊
    程式碼區塊使用4個空格或者帶一個製表符(Tab鍵)

    程式碼段:
    main()
    {
    printf(「hello world!\n」);
    }

  • 也可以使用```包裹一段程式碼,並指定一種語言(也可以不指定)。顯示如下

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

Markdown鏈接

  • 鏈接使用方法如下
    [外連圖片轉存失敗,源站可能有防盜鏈機制 機製,建議將圖片儲存下來直接上傳(img-9e2BPfdA-1597551607687)(74862802267D432B95CE7196CF7C6F37)]
    這是"菜鳥教學"鏈接
    直接使用鏈接地址:https://www.runoob.com/markdown/md-tutorial.html

  • 高階鏈接
    我們可以通過變數來設定一個鏈接,變數賦值在文件末尾進行:
    [外連圖片轉存失敗,源站可能有防盜鏈機制 機製,建議將圖片儲存下來直接上傳(img-DYqODUXe-1597551607687)(D0CFEB6CCC6F4CCD8B591F5B7CB48ACA)]

顯示結果如下:
這個鏈接用 1 作爲網址變數 [Google] 1
這個鏈接用test作爲網址變數 baidu
在文件結尾爲變數賦值

Markdown圖片

Markdown圖片語法格式如下:
[外連圖片轉存失敗,源站可能有防盜鏈機制 機製,建議將圖片儲存下來直接上傳(img-oGRScvJh-1597551607688)(972A94FE5355448385219EB30AAA361E)]

  • 圖片如下
    RUNOOB 图标
    [外連圖片轉存失敗,源站可能有防盜鏈機制 機製,建議將圖片儲存下來直接上傳(img-gWyiBekS-1597551607689)(http://static.runoob.com/images/runoob-logo.png 「RUNOOB」)]

  • 當然,你也可以像網址那樣對圖片網址使用變數:

  • 這個鏈接用 2 作爲網址變數 RUNOOB.
    然後在文件的結尾爲變數賦值(網址)

Markdown表格

  • Markdown製作表格使用 | 來分隔不同的單元格,使用 - 來分隔表頭和其他行。
    語法格式如下:
    [外連圖片轉存失敗,源站可能有防盜鏈機制 機製,建議將圖片儲存下來直接上傳(img-xmJyEP2A-1597551607689)(48E7EE156C4D43F680CB2634370AA948)]
  • 已上程式碼顯示如下:
表頭 表頭
單元格 單元格
單元格 單元格
  • 對齊方式:
    我們可以設定對齊方式如下:

-: 設定內容和標題列居右對齊。
:- 設定內容和標題列居左對齊。
:-: 設定內容和標題列居中對齊。

左對齊 右對齊 居中對齊
單元格 單元格 單元格
單元格 單元格 單元格

Markdown高階技巧

  • 支援HTML元素

    • 不在Markdown覆蓋範圍之內的標籤,都可以直接在文件裡用HTML撰寫。
    • 目前支援的HTML元素有:[外連圖片轉存失敗,源站可能有防盜鏈機制 機製,建議將圖片儲存下來直接上傳(img-sagy6SOo-1597551607689)(31901A2029F546CCBCD9AAC7B74D1824)]
  • 跳脫字元
    Markdown使用了很多特殊字元來表示特定的意義,如果需要顯示特定的符號,則需要使用跳脫字元,Markdown使用反斜槓跳脫特殊字元:
    [外連圖片轉存失敗,源站可能有防盜鏈機制 機製,建議將圖片儲存下來直接上傳(img-kfZdaPuc-1597551607690)(4046783B1F784DDCA4CDC374A4309C11)]
    Markdown 支援以下這些符號前面加上反斜槓來幫助插入普通的符號:
    [外連圖片轉存失敗,源站可能有防盜鏈機制 機製,建議將圖片儲存下來直接上傳(img-IlqSuLF4-1597551607690)(7428FFAAFC57432EBA701EFBC90EB5D9)]

公式

當你需要在編輯器中插入數學公式時,可以使用兩個美元符號$$包裹Tex或LaTex格式的數學公式來實現,提交後問答和文章會根據需要載入Mathjax對數學公式進行渲染。例如:
[外連圖片轉存失敗,源站可能有防盜鏈機制 機製,建議將圖片儲存下來直接上傳(img-Lhm5oBgG-1597551607690)(92D0B029E5434A3BB30E1D65B818C2CA)]
輸出結果如下

V1×V2=ijkXuYu0XvYv0 \mathbf{V}_1 \times \mathbf{V}_2 = \begin{vmatrix} \mathbf{i} & \mathbf{j} & \mathbf{k} \\ \\\frac{\partial X}{\partial u} & \frac{\partial Y}{\partial u} & 0 \\ \\\frac{\partial X}{\partial v} & \frac{\partial Y}{\partial v} & 0 \\ \end{vmatrix}



已上是Markdown的所有操作(有些遺漏後續會完善)

第一次使用Markdown寫筆記許多問題後續改進。—2020-8-16