iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 3
0
Modern Web

透過 VuePress 建構 JAMstack 網站來肆意玩弄 Markdown 系列 第 3

Markdown 到底在紅什麼?

Markdown 到底在紅什麼?

請容我故技重施,先來一段引用提升一下檔次

Markdown 是一種輕量級標記式語言,它允許人們使用易讀易寫的純文字格式編寫文件,然後轉換成有效的XHTML(或者HTML)文件。

由於 Markdown 的輕量化、易讀易寫特性,並且對於圖片,圖表、數學式都有支援,目前許多網站都廣泛使用 Markdown 來撰寫說明文件或是用於論壇上發表訊息。

— Markdown - 維基百科,自由的百科全書 - Wikipedia

我在這篇文章中,並不會過於著墨在「使用方法」上面,這篇文章的定位更像是讓你快速解為什麼這麼要選擇使用 Markdown。

關於 Markdown 的使用教學,我推薦大家可以去看看「六角學院」卡斯伯老師的 十分鐘快速掌握 Markdown ,或者透過 HackMD使用教學 來學習也是很不錯的方法。


語法簡單易學

Markdown 的設計理念之一就是要有很高的可讀性,即使是在編譯輸出成文件之前,也能輕易的辨識內容結構。

而這是怎麼做到的呢?其實就是因為 Markdown 使用了非常簡單直覺的標記方式,我想比起一堆文謅謅的文字,不如直接上圖解吧!

畫面是我使用 HackMD 平台記錄下的 Markdown 筆記,可以看到 Markdown 的語法結構相當直觀


結構單純好處理

別忘記本系列的主軸可是使用靜態網站生成器來建構 JAMstack 的網站,明明模板語法這麼多種,為什麼我會選擇以 Markdown 作為 Markup 的方案呢?

上面所提到的「簡單易學」其實就是最主要的關鍵了,畢竟如果要把網站提供給客戶使用的話,總不能讓非相關背景的客戶自己去學 HTML 之類的從頭刻起吧?

而 Markdown 易學易用的特性也已經是毋庸置疑的了,看看許多完全沒有資訊相關背景的人,不也都可以快速且順手的透過 HackMD 來使用 Markdown 記錄各式各樣的筆記嗎?

但其實還有一個很關鍵的因素,透過 Markdown 可以簡單輕鬆的產出一個穩定乾淨的 HTML 結構,只要我們在使用 VuePress 處理的時候,在專案當中設置好所需要的 CSS 樣式,就可以讓整體內容的樣式一致,這樣也能避免用戶使用各種 HTML 產生器跑出髒亂不堪的跑版結構...


應用彈性超高

有時你也可能會感覺 Markdown 排出來的版面似乎有些單調,甚至可能連常用的文字置中都沒有語法可用

但你這可就誤會它了,在 .md 的文件中除了可以直接使用 Markdown 語法來產出結構以外,其實你也完全可以直接在裡面寫 HTML 喔,只要適當的加入你所需要的結構,就可以讓它變成你的形狀了!

同時也偷偷提示一下,我會選用 VuePress 的其中一個原因,就是 VuePress 的編譯流程會對 Markdown 多進行一層處理,可以讓 Markdown 變出更有趣的玩法唷,明天見啦!


上一篇
JAMstack 到底是什麼巫術?
下一篇
偏冷門卻有趣的 VuePress
系列文
透過 VuePress 建構 JAMstack 網站來肆意玩弄 Markdown 30

尚未有邦友留言

立即登入留言