在 blogger 寫 markdown 最接近完美的辦法
動機
在好幾年前寫過幾篇技術 blog 文章,雖然當時只是希望分享給同學看,最後竟然也有一些人透過 google search 找到,也有在留言區討論問題。但畢業後就沒有再動過了,最近又想把寫 blog 的習慣重新撿回來。內容的話目前希望有自己 side project 相關的隨意筆記,或是讀書後的詳細心得 (常常覺得書中講得不夠詳細,或是範例不夠完整)
選擇 blog 平台
最近 markdown 語法開始進入公司內部各種文件的撰寫,自然我也想使用 markdown 做為寫 blog 的語言。我喜歡 markdown 可以將內容與 style 完全切開的設計,就好比使用純 html + css 來製作網頁一樣,markdown 主攻內容,至於最後的呈現部份可以另外找到各種外掛幫你 render 成想要的樣子,這邊就列出了我找平台的條件:- 如果能自己架是最好,線上服務的話要有信心不會倒
- 能夠原生或使用 plugin 來支援 markdown
- 要有留言系統
- 可以自己調整 style
- 技術 blog 永遠少不了的 code syntax highlight
Wordpress
這個方法一開始在我心中就被排除了,原因只是個人覺得 wordpress 功能太過強大,幾年前有架起來一個 wordpress 站,常常會為了一個 plugin 搞半天,處理 plugin 版本相容問題,plugin 之間相容問題,後台的設計讓功能不是非常好找,拿來作為個人網站比較合適,以純 blog 需求來看有點殺雞用牛刀的感覺Medium
和 wordpress 一樣原生不支援 markdown,而且無法自己換 style,所以不採用Jekyll
搭配 git 來寫 blog,聽起來很工程師很酷XD,所以有實際跑起來測一下,遇到了幾個問題最後放棄了:- Jekyll 要搭配 ruby 使用,雖然我在 linux 與 windows 的電腦都有成功安裝了,但換到新的電腦就要重新安裝一次
- 由於是靜態網頁產生器,如果要做留言的話要另外處理,這時又會出現選留言平台的問題…(線上怕倒,自己架花時間,或是要錢)
- render 有點迷樣,例如有三個 page,其中一個 page 沒有寫 title 屬性,但他最後網頁的 title tag 卻有其他頁的 title,不確定是我找的 theme 的問題還是 cache 造成
Blogger
最後還是回到多年前 blogger 平台,要解決的問題就是 markdown 了,網路上有人做了非常詳細的整理 Blogger 或部落格使用 Markdown 加快寫作速度的各種方案優劣分析,看了一輪下來我選擇了 Markdown Here 的解法,行內 CSS 就是文章中提到的缺點,也造成無法自己調整 style,現在就來說說我如何解決這個問題:- 拔除 Markdown Here 所有 css 設定
- 更改 blogger 文章設定
,我比較喜歡 rich editor 和 html editor 的 markdown 文字是一致的,所以會在 blogger 的文章設定裡面把換行符號改為 按下 Enter 鍵可建立換行符號,這樣也比較方便切換到 html editor 貼上別地方的文字 (自動就會過濾掉原本文字的 style)
- Syntax Highlight
結論
如此一起就可以使用 markdown 寫作,未來要修改也還算方便,如果要更換主題或是 syntax highlight 也不需要到每篇文章重新轉換 markdown,目前來看沒有什麼太大的問題,唯一的問題是圖片如果在轉換後有手動置中,轉回 markdown 再轉回 html 就會變回靠左,算是我還可以接受的小問題隨便貼一些 code 測試
function syntaxHighlighting() {
var n = 33;
console.log(s);
}
class test() : a_{123} {
public:
int32_t a() { return a_; }
private:
int32_t a_;
}
留言
張貼留言