1. 程式人生 > >博客開篇——應用Markdown編輯器呈現樣式和內容

博客開篇——應用Markdown編輯器呈現樣式和內容

$$ 練習 你在 9.png sub 截圖 博客 .cn 英文

剛剛開通博客,一直了解Markdown便捷的編寫能力,正好博客園支持Markdown編輯器,寫此篇練習Markdown的各種[標記]語法。本文內容有參考文章 博客園Markdown編輯器指南

Markdown編輯器

  • 在未提供Markdown的博客中,通常使用安裝好的Markdown編輯軟件來編寫內容,然後將導出的html文檔復制到該博客的內容編輯欄中。常用的工具有MarkdownPad 2和Sublime Text,但MarkdownPad 2 要付費。
  • 筆者使用博客園提供的頁面Markdown編輯器來編輯此篇文章。

使用Markdown語法產出內容

1.標題

  • “Markdown編輯器”和“使用Markdown語法產出內容”均為一級標題,在內容前加上“#”符號即可生成。
  • “1.標題”為二級標題,在內容前加##生成。
  • 一級、二級、三級標題依次在內容前加入#、##、###、......以此類推。
  • 號與文字之間最好加上一個字符的空格

2.列表

  • 無序列表只需在文字前加上-或*
    • 西瓜
    • 草莓
    • 橙子
  • 有序列表直接在文字前加1. 2. 3.
    1. 西瓜
    2. 草莓
    3. 橙子
  • 註意符號和文字間空一個字符

3.引用

文章開通即為引用格式,除了可以引用別處的內容之外,還可以起到分隔或突顯內容的作用。引用格式需要在文字前加>符號。

這是引用。

4. 鏈接

插入鏈接的格式為文字,註意]和(之間不要有空格,其中文字部分可以標明鏈接目的地的大致內容或者文章標題等,如本文開頭的鏈接;鏈接地址部分直接復制目的站的地址。
這是我的博客地址的鏈接

5.圖片

插入圖片類似於插入鏈接,其格式為[文字](圖片地址),若是截圖得到的圖片直接在內容編輯處的相應位置ctrl+v粘貼,即可出現插入圖片的格式,並自動填充相應的地址;
博客園提供了添加圖片的可視化按鈕,點擊插入圖片,選擇圖片所在的地址,會自動生成相應的格式:
技術分享圖片

6.粗體與斜體

  • 粗體的格式為**包含一段文本(註意是包含,前後都有*);
    使用粗體寫一段話
  • 斜體的格式為一個*包含一段文本(前後都有一個);
    使用斜體寫一段話*

7.表格

Markdown的表格語法略繁瑣,其示例語法如下:
技術分享圖片
生成效果如下:

計劃表格

| 計劃內容 | 時長 | 完成情況 |
| ----- | ;----; | -----; |
| 計劃一 | 3小時 | 良好 |
| 計劃二 | 2小時 | 優秀 |
| 計劃三 | 1天 | 一般 |

8. 代碼框

筆者認為,代碼框一般用於文字中(如某個段落內),呈現高亮和邊框的特點,其格式為在代碼段的前後用` 符號包裹,該符號需要輸入法切換到英文狀態下按Tab上方的按鍵。
使用tab鍵可進行代碼框的縮進。
這是代碼框示例

9. 代碼

代碼格式往往用於多行代碼自成一塊時,其語法為在代碼開始行的上方加,同樣在結束行的下方加,例如下圖格式:
技術分享圖片

其顯示效果為:

<ul id="background" class="background"></ul>
<div class="background-overlay"></div>
<div class="apps">
<div class="full"></div>
<div class="top-bar"></div>
<div class="top-row">
<div class="top-left"></div>
<div class="top-right"></div>
</div>
<div class="center"></div>
<div class="center-below"></div>
<div class="bottom"></div>
<div class="bottom-right"></div>
<div class="bottom-left" id="bottom-left"></div>
</div>
<div class="overlay drop-overlay">
<p>Drop to upload backgrounds <span class="badge plus-badge">PLUS</span></p>
</div>
<script src="js/lib.min.js"></script>
<script src="app/app.min.js"></script>

10.分割線

分割線的語法為在兩個段落/內容之間加,或者說,你在想要加分割線的地方寫上成單獨一行。
***

11.公式

  • 該功能需要在博客園後臺管理的選項界面勾選啟用數學公式支持
  • 行內公式用$符號包括,且公式前加\符號,如$\sqrt{x^2+y^2}+(y+z)^2$,效果展示:\(\sqrt{x^2+y^2}+(y+z)^2\)
  • 行公式在公式行的上下行加$$符號,且公式前加\符號,如:
$$
\sqrt{x^2+y^2}+(y+z)^2
$$

效果如下:
\[ \sqrt{x^2+y^2}+(y+z)^2 \]


對於Markdown的練習就寫這麽多,運用Markdown的博客征途才剛剛開始......

博客開篇——應用Markdown編輯器呈現樣式和內容