iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 5
0
Modern Web

使用Vue.js製作個人blog系列 第 5

【Day 5】使用Markdown的原因

淺談Markdown

Blog前陣子很流行使用HTML來撰寫,像是Google的Blogger。意思是我們在編輯畫面撰寫文章,我們以為我是在空白的地方打字上去,直接把字放進去資料庫而已,出來只是把我們的格式「複製」、「貼上」。但是Blogger的編輯畫面,有個「HTML」的按鈕,點擊下去,就可以看到其實我們打的文字,都會被Blogger默默的轉換成HTML。
轉成HTML後,存檔,然後再跑到瀏覽器上面,就不用再進行處理就可以直接顯示,十分的方便。但是把文章變成HTML,這個功就是個麻煩。
為什麼呢?
因為,在網頁中HTML的Tag很多,而且不好閱讀。它有開始的tag(如:<li>),還要有結束的tag(如:</li>),如果不幸有個巢狀結構,就難閱讀,會看到一堆tag飛來飛去。就好像這樣

<ul>
<li style="text-align: left;"><b>新聞來源:</b></li>
<ul>
<li style="text-align: left;">新頭殼</li>
</ul>
</ul>
<ul>
<li style="text-align: left;"><span style="font-size: small;"><b>作者:</b></span></li>
<ul>
<li style="text-align: left;"><br /></li>
</ul>
</ul>
<ul>
<li><b>標題:</b></li>
<ul>
<li>〈〉</li>
</ul>
</ul>
<div>

但是顯示的效果卻是這樣:


  • 新聞來源:

    • 新頭殼
  • 作者:

  • 標題:

    • 〈〉

這樣的方式實在是「落落長」,光是用打的不曉得歡樂的假日已經浪費了多少時間。別跟我說你打字很快,可以直接打,沒有在怕。如果看到Markdown怎麼寫,你就會考慮放棄這樣的編輯方式轉到Markdown囉!
Markdown同樣的效果,語法如下:

* 新聞來源:
  * 新頭殼
* 作者:

* 標題:
  * 〈〉

你沒看錯,就這樣簡簡單單的就把帶有標記和縮排的文字給解決!這就是Markdown的精神。

在維基百科Markdown上面寫:

Markdown 是一種輕量級標記式語言,創始人為約翰·格魯伯(John Gruber)。它允許人們「使用易讀易寫的純文字格式編寫文件,然後轉換成有效的XHTML(或者HTML)文件」。

可以知道當初創辦的目標是「方便閱讀,方便書寫」,所以他們用一些常見的符號表是某些意義,以上述的例子來說,「*」表示為「無序列點」,「 」兩個空格,在這邊的意義是縮排,所以就這樣簡簡單單的建立文章。如果是用HTML就需要用一個<li></li>包含著另一個<li></li>,就發展成一個巢狀。


因為有「易讀易寫」的特性在,所以現在很多文章導向的網站,或是說明文件都是使用這個格式撰寫。可以去Github上看,上面的說明文件都是用.MD(例如:Bootstrap我的文件),就連本系列iT邦鐵人賽也是用Markdown的格式撰寫。

但是這樣的方便,卻是損失部分的功能,尤其它喪失了文字的多樣性。什麼是文字的多樣性呢?由於Markdown強調「易讀易寫」,所以對於字的顏色、格式,卻不重視,這幾乎是無法變動的,頂多做出大小、粗體、斜體等等。所以我們想要一個瘦金體歐體,但是網站卻只會顯示最基本的字體,畢竟美觀,不Markdown的訴求。

但是這樣的簡單特性,卻是十分吸引我。簡易的就可以進行文章編排與撰寫,讓我很快速的上手,不用在意文字樣式如何,或是要怎樣的編輯排版才會好看。直接用Markdown設定的就可以很清楚。因此我可以專注在內容上,而不用花心思在外觀。


參考:

  1. Github(https://guides.github.com/features/mastering-markdown/#GitHub-flavored-markdown)
  2. iT邦(http://ithelp.ithome.com.tw/markdown)

上一篇
【Day 4】功能流程
下一篇
【Day 6】使用的程式語言介紹
系列文
使用Vue.js製作個人blog17

1 則留言

0
Terry L.
iT邦新手 4 級 ‧ 2019-01-04 01:49:24

小弟寫的 WordPress Markdown 外掛,可在WordPress官方網址下載: https://wordpress.org/plugins/wp-githuber-md/
源碼: https://github.com/terrylinooo/githuber-md
主要功能為所見即所得編輯器,也有圖片隨貼上傳等功能、 HTML 轉 Markdown 小工具、程式碼高亮、流程圖等等....。如覺得好用還請多多推廣讓小弟可以收到反饋進行功能改進等等。這是免費軟體希望對大家有幫助....

我要留言

立即登入留言