關於 Markdown 的一些奇技淫巧
自從幾年前開始在 GitHub 玩耍,接觸到 Markdown 之後,就一發不可收拾,在各種文檔編輯上,有條件用 Markdown 的盡量用,不能用的創造條件也要用——README、博客、公眾號、介面文檔等等全都是,比如當前這篇文章就是用 Markdown 編輯而成。
這幾年也發現越來越多的網站和程序提供了對 Markdown 的支持,從最初接觸的 GitHub、Jekyll,到簡書、掘金、CSDN 等等,由此也從別人做得好的文檔中,學到了一些『奇技淫巧』,所以本文不是對 Markdown 基礎語法的介紹,而是一些相對高級、能將 Markdown 玩出更多花樣的小技巧。
註:如下技巧大多是利用 Markdown 兼容部分 HTML 標籤的特性來完成,不一定在所有網站和軟體里都完全支持,主要以 GitHub 支持為準。
在表格單元格里換行
藉助於 HTML 里的 <br /> 實現。
示例代碼:
| Header1 | Header2 |n|---------|----------------------------------|n| item 1 | 1. one<br />2. two<br />3. three |n
示例效果:
圖文混排
使用 <img> 標籤來貼圖,然後指定 align 屬性。
示例代碼:
<img align="right" src="https://raw.githubusercontent.com/mzlogin/mzlogin.github.io/master/images/posts/markdown/demo.png"/>nn這是一個示例圖片。nn圖片顯示在 N 段文字的右邊。nnN 與圖片高度有關。nn刷屏行。nn刷屏行。nn到這裡應該不會受影響了,本行應該延伸到了圖片的正下方,所以我要足夠長才能確保不同的屏幕下都看到效果。n
示例效果:
控制圖片大小和位置
標準的 Markdown 圖片標記 ![]() 無法指定圖片的大小和位置,只能依賴默認的圖片大小,默認居左。
而有時候源圖太大想要縮小一點,或者想將圖片居中,就仍需要藉助 HTML 的標籤來實現了。圖片居中可以使用 <div> 標籤加 align 屬性來控制,圖片寬高則用 width 和 height 來控制。
示例代碼:
**圖片默認顯示效果:**nn![](https://raw.githubusercontent.com/mzlogin/mzlogin.github.io/master/images/posts/markdown/demo.png)nn**加以控制後的效果:**nn<div align="center"><img width_="65" height="75" src="https://raw.githubusercontent.com/mzlogin/mzlogin.github.io/master/images/posts/markdown/demo.png"/></div>n
示例效果:
格式化表格
表格在渲染之後很整潔好看,但是在文件源碼里卻可能是這樣的:
|Header1|Header2|n|---|---|n|a|a|n|ab|ab|n|abc|abc|n
不知道你能不能忍,反正我是不能忍。
好在廣大網友們的智慧是無窮的,在各種編輯器里為 Markdown 提供了表格格式化功能,比如我使用 Vim 編輯器,就有 vim-table-mode 插件,它能幫我自動將表格格式化成這樣:
| Header1 | Header2 |n|---------|---------|n| a | a |n| ab | ab |n| abc | abc |n
是不是看著舒服多了?
如果你不使用 Vim,也沒有關係,比如 Atom 編輯器的 markdown-table-formatter 插件,Sublime Text 3 的 MarkdownTableFormatter 等等,都提供了類似的解決方案。
使用 Emoji
這個是 GitHub 對標準 Markdown 標記之外的擴展了,用得好能讓文字生動一些。
示例代碼:
我和我的小夥伴們都笑了。:smile:n
示例效果:
我和我的小夥伴們都笑了。??
更多可用 Emoji 代碼參見 https://www.webpagefx.com/tools/emoji-cheat-sheet/。
行首縮進
直接在 Markdown 里用空格和 Tab 鍵縮進在渲染後會被忽略掉,需要藉助 HTML 轉義字元在行首添加空格來實現,&ensp;代表半形空格,&emsp; 代表全形空格。
示例代碼:
&emsp;&emsp;春天來了,又到了萬物復甦的季節。n
示例效果:
春天來了,又到了萬物復甦的季節。
展示數學公式
如果是在 GitHub Pages,可以參考 http://wanguolin.github.io/mathmatics_rending/ 使用 MathJax 來優雅地展示數學公式(非圖片)。
如果是在 GitHub 項目的 README 等地方,目前我能找到的方案只能是貼圖了,以下是一種比較方便的貼圖方案:
- 在 https://www.codecogs.com/latex/eqneditor.php 網頁上部的輸入框里輸入 LaTeX 公式,比如 $$x=frac{-bpmsqrt{b^2-4ac}}{2a}$$;
- 在網頁下部拷貝 URL Encoded 的內容,比如以上公式生成的是 https://latex.codecogs.com/png.latex?%24%24x%3D%5Cfrac%7B-b%5Cpm%5Csqrt%7Bb%5E2-4ac%7D%7D%7B2a%7D%24%24;
3. 在文檔需要的地方使用以上 URL 貼圖,比如
![](https://latex.codecogs.com/png.latex?%24%24x%3D%5Cfrac%7B-b%5Cpm%5Csqrt%7Bb%5E2-4ac%7D%7D%7B2a%7D%24%24)n
示例效果:
任務列表
在 GitHub 和 GitLab 等網站,除了可以使用有序列表和無序列表外,還可以使用任務列表,很適合要列出一些清單的場景。
示例代碼:
**購物清單**nn- [ ] 一次性水杯n- [x] 西瓜n- [ ] 豆漿n- [x] 可口可樂n- [ ] 小茗同學n
示例效果:
自動維護目錄
有時候維護一份比較長的文檔,希望能夠自動根據文檔中的標題生成目錄(Table of Contents),並且當標題有變化時自動更新目錄,能減輕工作量,也不易出錯。
如果你使用 Vim 編輯器,那可以使用我維護的插件 vim-markdown-toc 來幫你完美地解決此事:
插件地址:https://github.com/mzlogin/vim-markdown-toc
如果你使用其它編輯器,一般也能找到對應的解決方案,比如 Atom 編輯器的 markdown-toc 插件,Sublime Text 的 MarkdownTOC 插件等。
後話
好了,這一波的奇技淫巧就此告一段落,希望大家在了解這些之後能有所收穫,更好地排版,專註寫作。
如果你覺得本文對你有幫助,歡迎關注我的微信公眾號 isprogrammer,獲取更多有幫助的內容。
參考
- https://raw.githubusercontent.com/matiassingers/awesome-readme/master/readme.md
- https://www.zybuluo.com/songpfei/note/247346
原始鏈接:關於 Markdown 的一些奇技淫巧
推薦閱讀:
※markdown為什麼不支持目錄和腳註?
※如何讓hexo代碼高亮?
※markdown和 html相比有什麼(優點)區別?
※Markdown 是什麼?
※markdown代碼區塊的問題?