iT邦幫忙

DAY 8
5

快寫HTML靜態網頁系列 第 8

Markdown 另個輕量標籤語言

  • 分享至 

  • xImage
  •  

用輕量級的語法來寫HTML,
Markdown也是許多線上發文裡,
做為語言標示的工具的其中之一。
解析markdown的工具
不同的程式語言環境,
有各自解析markdown的工具,
就ruby程式環境來說,
在2008前就有人問什麼工具來解析 markdown 比較好,
Better ruby markdown interpreter?
隨著這幾年演進,一直有出新的相關工具,答案每年都會有所變動,
歷來的答案有:RDiscount、BlueCloth2、Redcarpet,
最後近來的推薦是 kramdown
在此就以 kramdown 來做解析的工具。

markdown的語法
編輯個 index.md 的內容如下,
來測試基本的使用方式:

{::options auto_ids="false" /}
平凡的HTML可以用不平凡的工具套件產生,避免從頭、重覆造輪子的痛苦。

# 標題一

## 標題二

###### 標題六

***

> to be or not to be
>
>> it is a problem

~~~ ruby
def method
        puts "this is a method"
end
~~~

1. 項目一
2. 項目二

* {:.item} 若要加 class
* {:#special .item} 若要加 ID

|簡單|表格|
|值1|值2|

這是 [itHelp](http://ithelp.ithome.com.tw) 的連結!

itHelp的 logo: ![logo image](http://ithelp.ithome.com.tw/images/logo.png)

<span class="some">直接加HTML碼</span>

然後執行 kramdown index.md 後:

<p>平凡的HTML可以用不平凡的工具套件產生,避免從頭、重覆造輪子的痛苦。</p>

<h1>標題一</h1>

<h2>標題二</h2>

<h6>標題六</h6>

<hr />

<blockquote>
  <p>to be or not to be</p>

  <blockquote>
    <p>it is a problem</p>
  </blockquote>
</blockquote>

<code class="language-ruby">def method
        puts "this is a method"
end


<ol>
  <li>項目一</li>
  <li>項目二</li>
</ol>

<ul>
  <li class="item">若要加 class</li>
  <li id="special" class="item">若要加 ID</li>
</ul>

<table>
  <tbody>
    <tr>
      <td>簡單</td>
      <td>表格</td>
    </tr>
    <tr>
      <td>值1</td>
      <td>值2</td>
    </tr>
  </tbody>
</table>

<p>這是 <a href="http://ithelp.ithome.com.tw">itHelp</a> 的連結!</p>

<p>itHelp的 logo: <img src="http://ithelp.ithome.com.tw/images/logo.png" alt="logo image" /></p>

<p><span class="some">直接加HTML碼</span></p>

其中的若不加原始的 index.md 的第一行參數,
會為一些標籤加預定的 class,
若不想那麼自動,就需加第一行的參數。
若要自行加 class, id,
需要在元素之後加上{:#someid .someclass}的字樣。

如果不方便加入,就直接把HTML的碼寫進去,
與markdown的語法混在一起也是可行的。

有關完整的語法使用可參考:
kramdown Syntax
Quick Reference

線上測試工具
可透過這些網址測一測哪些markdown的語法可畫出怎樣的HTML:
Markdown Demo
Markdown Editor
Markdown Web Dingus
可能有些語法不見得完全相容,
但一定可相容的語法,
可參照發源地 Markdown: Syntax 的語法說明。

這也是透過輕量標籤語言來快寫HTML的方法之一。

系列文章列表


上一篇
輕量的標籤語言 HAML
下一篇
更多的輕量標籤語言
系列文
快寫HTML靜態網頁27
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 則留言

0
yiying
iT邦新手 1 級 ‧ 2013-09-23 17:51:12

我自己也是用markdown寫blog
真的很方便 喜歡

我要留言

立即登入留言