Markup Language
寫文件或blog最困擾的就是排版, 大略看一下目前較流行的Markdown & reStructuredText, 決定用Markdown來寫, rst給我的感覺就是要再學另一種語言, 雖然強大, 但我只要夠用就好, 必竟都有人用Markdown寫書了 XD.
Markdown Setup
目前是用Vim + Pandoc來寫Markdown, 網路上也有Web editor, 或是windows平台的Markdownpad, 但Web用起來不順手, Markdownpad不能跨平台. 用Vim麻煩的是preview, 寫完要手動用Pandoc轉成html, 之後直接將轉出來的html, 直接貼到blogger.
一般沒有CSS的用法:
$ pandoc README.md -o out.html 加入CSS依文件的方法是:
$ pandoc -c markdown.css README.md -o out.html 但是會有一個問題, 貼上blogger時會無法正常顯示, 原因在於html裡是這樣寫的:
<link rel="stylesheet" href="markdown.css" type="text/css" /> 後來想到了一個workaround, 用-H參數將CSS放入Header, 但也不是直接帶入, 需要將一般的CSS file用style tag包起來, 如下:
<style type="text/css">
Your CSS syntax....
</style> 另存成pandoc-markdown.css, 如此才是真正的fully standalone.
$ pandoc -H pandoc-markdown.css README.md -o out.html Vim Tips
修改vimrc將*.md標示為Markdown格式, 存檔自動產生HTML檔案.
" Markdown extention
autocmd BufRead,BufNewFile *.md set filetype=markdown
" Auto Pandoc function
function! AutoPandoc()
"check if pandoc exist
if filereadable("/usr/bin/pandoc")
" get current directory path and append CSS file
let l:csspath=expand("%:p:h")."/pandoc-markdownpad-github.css"
let l:outPut=expand("%:p:h")."/out.html"
if filereadable(l:csspath)
"remove old output
if filereadable(l:outPut)
let l:rmOut="!rm -rf ".l:outPut." && sync"
silent execute l:rmOut
endif
" run command
let l:runCmd="!pandoc -H ".l:csspath." -s ".expand("%:p")." -o ".l:outPut
echo "Auto generated HTML at ".l:outPut
silent execute l:runCmd
endif
endif
endfunction
"Audo gen html for markdown
autocmd BufWritePost *.markdown,*md call AutoPandoc()Conclusion
- 不用煩惱排版的問題, Blogger與Evernote排版不會差太多.
- 可以用Git來做version control 及 backup.
- 簡潔有力, 語法簡單.
- Vim也有人做realtime preview的plug-in: vim-instant-markdown, 但我覺得沒有即時preview的需求.
- 圖片使用Markdown語法無法調整大小, 可以使用HTML來放圖片.
<img src="http://3.bp.bloGspot.com/-BLhmfBdELH0/UBT3uUd7r5I/AAAAAAAAADw/-rnn2kz5vjY/s220/oops_monk01_120.jpg" width="100">
- 影片也是用HTML, 以TEDTalk為例:
<iframe src="http://embed.ted.com/talks/lang/zh-tw/ken_robinson_how_to_escape_education_s_death_valley.html"width="560" height="315" frameborder="0" scrolling="no"webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
