如何優雅地排版微信公衆號 爲什麼要用 Markdown Markdown 語法 一級標題 Markdown 樣式 Markdown 樣式使用

爲什麼要用 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/>換行 # 示例

換行
換行

  首行縮進


&emsp; # 縮進一個空白(字符)

&emsp;&emsp;首行縮進

  首行縮進

  無序列表


+ 無序列表 # + 與文本之間有空格

- 無序列表

* 無序列表

  • 無序列表

  • 無序列表

  • 無序列表

  有序列表


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 樣式:

Markdown 樣式使用

  因爲微信公衆號只支持富文本,對 Markdown 語法不支持,因此就需要將 Markdown 轉換爲富文本,轉換方法大致分爲以下幾種:

  • 在線網站轉換:Md2All

  • 瀏覽器插件:Markdown Here

  在線轉換

  能夠在線將 Markdown 轉換爲富文本的網站有很多,目前發現 Md2All 挺好用的,支持自定義 CSS 樣式,同時也有很多自己的樣式可以使用。

操作流程:將用 Markdown 寫好的文章,粘貼到網站的左側(右側爲預覽)—— 點擊一建排版,將 CSS 樣式粘貼進去,然後選擇保存,此刻就能看到右側的內容一建變換 —— 選擇複製,然後將其粘貼到微信公衆號即可。

  Markdown-Here 插件

Markdown-Here

  另一種方式就是安裝 Markdown-Here 插件,然後將 CSS 樣式拷貝到插件中,再將用 Markdown 寫好的文章拷貝到公衆號,全選,最後點擊插件(或 CTRL+ALT+M,將會一鍵轉換)。

  可以通過 Chrome、Firefox 瀏覽器安裝,在這裏就不在贅述。

  將 CSS 樣式拷貝到基本渲染 CSS 即可,還可以選擇自己喜歡的語法高亮 CSS。

參考文章:

淺談微信公衆號排版 —— Markdown 入門和進階
Markdown 你應該學會的文章編輯利器

推薦閱讀:
總有那麼一個人,願翻山越嶺爲你而來
記陽朔之行
在簡書,有幸遇到你

喜歡我,歡迎來 公衆號 找我喲~ :)

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章