HackPig520

HackPig520 的博客

我是HackPig520,一个前端工程师,喜欢Web3和Minecraft。
github
gitlab
bilibili
tg_channel
keybase
email
twitter
zhihu
pixiv

一些關於 Markdown 的奇技淫巧

自從幾年前開始在 GitHub 玩耍,接觸到 Markdown 之後,就深深的愛上了它,在各種文件編輯上,有條件用 Markdown 的盡量用,不能用的創造條件也要用 ——README、博客、接口文件等等全都是。

這幾年也發現越來越多的網站和程式提供了對 Markdown 的支持,從最初接觸的 GitHub、Jekyll,到簡書、CSDN 等等,由此也從別人做得好的文件中,學到了一些『奇技淫巧』,所以本文不是對 Markdown 基礎語法的介紹,而是一些相對高級、能將 Markdown 玩出更多花樣的小技巧。

註:如下技巧大多是利用 Markdown 兼容部分 HTML 標籤的特性來完成,不一定在所有網站和軟體裡都完全支持,主要以 GitHub 支持為準。

在表格儲存格裡換行#

借助於 HTML 裡的 <br /> 實現。

示例程式碼:

| Header1 | Header2                          |
| ------- | -------------------------------- |
| item 1  | 1. one<br />2. two<br />3. three |

示例效果:

Header1Header2
item 11. one
2. two
3. three

圖文混排#

使用 標籤來貼圖,然後指定 align 屬性。

示例程式碼:

<img align="right" src="https://raw.githubusercontent.com/mzlogin/mzlogin.github.io/master/images/posts/markdown/demo.png"/>

這是一個示例圖片。

圖片顯示在 N 段文字的右邊。

N 與圖片高度有關。

刷屏行。

刷屏行。

到這裡應該不會受影響了,本行應該延伸到了圖片的正下方,所以我要足夠長才能確保不同的螢幕下都看到效果。

控制圖片大小和位置#

標準的 Markdown 圖片標記 無法指定圖片的大小和位置,只能依賴預設的圖片大小,預設居左。

而有時候源圖太大想要縮小一點,或者想將圖片居中,就仍需要借助 HTML 的標籤來實現了。圖片居中可以使用

標籤加 align 屬性來控制,圖片寬高則用 width 和 height 來控制。

示例程式碼:

圖片預設顯示效果:

![](https://raw.githubusercontent.com/mzlogin/mzlogin.github.io/master/images/posts/markdown/demo.png)

加以控制後的效果:

<div align="center">
  <img
    width="65"
    height="75"
    src="https://raw.githubusercontent.com/mzlogin/mzlogin.github.io/master/images/posts/markdown/demo.png"
  />
</div>

是不是看著舒服多了?

使用 Emoji#

這個是 GitHub 對標準 Markdown 標記之外的擴展了,用得好能讓文字生動一些。

示例程式碼:

我和我的小夥伴們都笑了。:smile:

示例效果:

我和我的小夥伴們都笑了。😄

更多可用 Emoji 程式碼參見 https://www.webpagefx.com/tools/emoji-cheat-sheet/

行首縮排#

直接在 Markdown 裡用空格和 Tab 鍵縮排在渲染後會被忽略掉,需要借助 HTML 轉義字元在行首添加空格來實現, 代表半角空格,  代表全角空格。

示例程式碼:

&emsp;&emsp;春天來了,又到了萬物復蘇的季節。

展示數學公式#

如果是在 GitHub Pages 和 Hexo,可以參考 http://wanguolin.github.io/mathmatics_rending/ 使用 MathJax 來優雅地展示數學公式(非圖片)。

如果是在 GitHub 專案的 README 等地方,目前我能找到的方案只能是貼圖了,以下是一種比較方便的貼圖方案:

https://www.codecogs.com/latex/eqneditor.php 網頁上部的輸入框裡輸入 LaTeX 公式,比如 $$x=\frac{-b\pm\sqrt{b^2-4ac}}{2a}$$
在網頁下部複製 URL Encoded 的內容,比如以上公式生成的是 https://latex.codecogs.com/png.image?%5Chuge%20%5Cdpi%7B300%7D%5Cdpi%7B200%7D%5Cint%20%5Cfrac%7B1%7D%7Bx%7D%20dx%20=%20%5Cln%20%5Cleft%7C%20x%20%5Cright%7C%20&plus;%20C

  1. 在文件需要的地方使用以上 URL 貼圖,比如

image

任務列表#

在 GitHub 和 GitLab 等網站,除了可以使用有序列表和無序列表外,還可以使用任務列表,很適合要列出一些清單的場景。

示例程式碼:

**購物清單**

- [ ] 一次性水杯
- [x] 西瓜
- [ ] 豆漿
- [x] 可口可樂
- [ ] 小茗同學

自動維護目錄#

有時候維護一份比較長的文件,希望能夠自動根據文件中的標題生成目錄(Table of Contents),並且當標題有變化時自動更新目錄,能減輕工作量,也不易出錯。

如果你使用 Vim 編輯器,那可以使用插件 vim-markdown-toc 來幫你完美地解決此事。

[[toc]]

如果你使用其他編輯器,一般也能找到對應的解決方案,比如 Atom 編輯器的 markdown-toc 插件,Sublime Text 的 MarkdownTOC 插件等。

後話#

好了,這一波的奇技淫巧就此告一段落,希望大家在了解這些之後能有所收穫。

如果你覺得本文對你有幫助,歡迎關注我的頻道,獲取更多有幫助的內容。

參考#

https://raw.githubusercontent.com/matiassingers/awesome-readme/master/readme.md
https://www.zybuluo.com/songpfei/note/247346
https://www.youtube.com/channel/UCOE6Ckq2Pip08Ia1Zg6dUGA

載入中......
此文章數據所有權由區塊鏈加密技術和智能合約保障僅歸創作者所有。