爲什麼要用 Markdown
大家都知道公衆號只支持富文本寫作,這就有了很大的限制,尤其對於程序員來說很不友好,不能插入代碼成了很多人的痛點。
而往往你看到的很好看的排版,這也是人家經過了幾個小時的選材排版後的結果。雖然市面上也有很多排版網站,如:秀米、135 、365,不否認它們都很優秀,但是要想有一個不錯的排版,也是費盡心力。
而現在有一種只需要關注語法本身,不需要擔心排版的 神器 —— Markdown
Markdown 是一種可以使用普通文本編輯器編寫的標記語言,通過簡單的標記語法,它可以使普通文本內容具有一定的格式。
其語法簡單易用,富文本能做到的它都能做到,同時又支持 HTML、以及代碼插入,很受程序員喜歡。
Markdown 編輯器
Markdown 只是一種語法格式,使用它寫作,只需要記住簡單的幾個語法即可。正所謂:工欲善其事必先利其器,你現在還需要一款合適的能夠支持 Markdown 語法的編輯器。
推薦幾款比較好用的編輯器:
Typora:所見即所得,神器,推薦
VScode:巨硬家族,很棒
Sublime Text:需要安裝插件
Atom:GitHub 推出,轉爲程序員設計,很強大
簡書:一個寫作平臺
上面五種編輯器,除了 Typora 與簡書以爲,其餘三種都需要自己配置 Markdown 插件,在這裏不在贅述。
Markdown 語法
標題
# 一級標題
## 二級標題
### 三級標題
...
一級標題
二級標題
三級標題
文本加粗
**文本加粗**
文本加粗
斜體
*斜體*
斜體
下劃線
<u>下劃線</u>
<u>下劃線</u>
刪除線
~~刪除線~~
刪除線
分割線
***
---
+++
文本引用
> 這是一段文本,正在被引用...
這是一段文本,正在被引用...
鏈接
[描述](鏈接地址)
[百度](https://www.baidu.com)
文本居中
<center>文本居中</center>
<center><font color=grey>文本居中</font></center> # 指定顏色
換行
<br/>
換行<br/>換行 # 示例
換行
換行
首行縮進
  # 縮進一個空白(字符)
  首行縮進
首行縮進
無序列表
+ 無序列表 # + 與文本之間有空格
- 無序列表
* 無序列表
無序列表
無序列表
無序列表
有序列表
1\. 有序列表
2\. 有序列表
1. 有序列表
2. 有序列表
複選框
* [x] 第一隻青蛙 # 已勾選,* 與 [ ] 之間有空格
* [ ] 第二隻青蛙 # 未勾選
* [ ] 第二隻青蛙
[x] 第一隻青蛙
[ ] 第二隻青蛙
[ ] 第二隻青蛙
插入圖片
![描述](圖片鏈接地址)
![](https://raw.githubusercontent.com/hj1933/img/master/img/20181127113453.png)
代碼塊
這是`行內代碼`,xxx
```
代碼塊
```
這是行內代碼
,行內代碼。
代碼塊
表格
|序號|名稱|類型|
|---|----|---|
|1 |表格 |Table1|
|2 |表格 |Table2|
|3 |表格 |Table3|
序號 | 名稱 | 類型 |
---|---|---|
1 | 表格 | Table1 |
2 | 表格 | Table2 |
3 | 表格 | Table3 |
Markdown 樣式
同樣地使用 Markdown 寫作,你可能最終看到的效果卻不同,這是由於 CSS 樣式不同導致的。下圖就是不同樣式的引用,其表現方式也不同:
上面這些樣式都是引用了別人已經寫好的,第一個樣式是我在別人的基礎上,對其稍作修改,目前自己日常使用。
推薦幾個 CSS 樣式:
李笑來:https://gist.github.com/xiaolai/aa190255b7dde302d10208ae247fc9f2
陽志平:https://github.com/veganshe/CodeBlock/blob/master/Markdown-here/markdown-here-yzp.css
王小杰:https://github.com/veganshe/CodeBlock/blob/master/Markdown-here/markdown-here-veganshe.css
Markdown 樣式使用
因爲微信公衆號只支持富文本,對 Markdown 語法不支持,因此就需要將 Markdown 轉換爲富文本,轉換方法大致分爲以下幾種:
在線網站轉換:Md2All
瀏覽器插件:Markdown Here
在線轉換
能夠在線將 Markdown 轉換爲富文本的網站有很多,目前發現 Md2All 挺好用的,支持自定義 CSS 樣式,同時也有很多自己的樣式可以使用。
操作流程:將用 Markdown 寫好的文章,粘貼到網站的左側(右側爲預覽)—— 點擊一建排版,將 CSS 樣式粘貼進去,然後選擇保存,此刻就能看到右側的內容一建變換 —— 選擇複製,然後將其粘貼到微信公衆號即可。
Markdown-Here 插件
另一種方式就是安裝 Markdown-Here 插件,然後將 CSS 樣式拷貝到插件中,再將用 Markdown 寫好的文章拷貝到公衆號,全選,最後點擊插件(或 CTRL+ALT+M,將會一鍵轉換)。
可以通過 Chrome、Firefox 瀏覽器安裝,在這裏就不在贅述。
將 CSS 樣式拷貝到基本渲染 CSS 即可,還可以選擇自己喜歡的語法高亮 CSS。
參考文章:
淺談微信公衆號排版 —— Markdown 入門和進階
Markdown 你應該學會的文章編輯利器
推薦閱讀:
總有那麼一個人,願翻山越嶺爲你而來
記陽朔之行
在簡書,有幸遇到你
喜歡我,歡迎來 公衆號 找我喲~ :)