用Markdown寫Blogger文章

好久沒寫網誌了,這邊已經雜草叢生了(笑)

想當初寫網誌最討厭的一見事情就是—排版,我花在排版的時間可能比寫文章還久阿,我都直接用html寫了,它排版還是可以跑掉…真是的…

不過這一兩年接觸到了Markdown,它的語法可以減少不少排版時間的時間,所以最近又興起了把網誌撿回來的念頭,希望這次可以持之以恆阿…



在Blogger寫Markdown

不過想把網誌撿回來好像也沒有那麼的容易? 因為Blogger不支援Markdown ( ˘・з・)

還好拜了G大神後,發現有不少人有相同需求,感謝他們的分享,我只需要複製貼上就好XD。基本上,就是開個外掛,然後把下面的script貼上就是了,實際操作可以參考卡卡米的記憶體的說明。

<script 
	src="https://cdnjs.cloudflare.com/ajax/libs/showdown/1.6.4/showdown.min.js">
</script>  
<script>  
	var converter = new showdown.Converter();  
	var posts = document.querySelectorAll(".post-body,.snippet-item");
	Array.prototype.forEach.call(posts, function(el, i){  
		if(el.innerHTML.indexOf("markdown") <= 1){ 
			el.innerHTML = converter.makeHtml(el.innerHTML.replace("markdown",""));  
		}});  
	var pres = document.querySelectorAll("pre"); 
	Array.prototype.forEach.call(pres,  function(el, i){ 
		el.classList.add("prettyprint");  
	});  
</script>  
<script  
	src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=sunburst">
</script>

但這份code在我這邊有點水土不服,因為我之前改過CSS,結果出來的效果沒有人家來的好看,而且說真的,在Blogger中寫Markdown的體驗不是很好( ˘・з・)



用 Stackedit 發佈至 Blogger

Stackedit

在拜大神的時候,偶然發現有StackEdit工程師 在Stack Exchange自薦枕蓆StackEdit是個Markdown的editor,原本是沒有特別吸引我,因為我目前使用HackMD得相當順手,並沒有想換掉它的想法,而且HackMD還是繁中界面的哩!

Amongst others, you can post to Blogger.

但看到這句話,還是抱著嘗試的心態來使用看看,StackEdit的editor的功能大致與HackMD相同,不過它文章的管理方式是我比較喜歡的資料夾,而且寫完後可以直接發布到Blogger,不需要匯出再轉貼,因此很適合將它作為Blogger的editor來使用。

雖然我還滿喜歡HackMD的程式碼有支援行數的顯示,但即使沒有顯示也只是可讀行稍微差了點。若沒有要在Blogger貼長篇程式碼,這個缺點應該可以忽略不計。

關於從StackEdit發表的Blogger的教學,可參考: 使用 StackEdit 發佈至 Blogger ~ Open Jiang



Markdown各標籤的 CSS 文件

前面說過Blogger不支援Markdown,即便Stackedit可以將文章轉成HTML在Blogger上發布,但部份標籤的CSS仍需要定義。



程式碼高亮標識

StackEdit 的程式區塊預設是使用 Highlight.js 的函式庫來支援
Highlight的功能,所以Blogger這邊也需要導入相對應的函式庫。

在範本的HTML的<head></head>中,添加

<!-- highlight.js Additions START -->
<link href='https://cdn.bootcss.com/highlight.js/9.13.1/styles/androidstudio.min.css' rel='stylesheet'/>
<script src='https://cdn.bootcss.com/highlight.js/9.13.1/highlight.min.js'/>
<script> hljs.initHighlightingOnLoad();</script>
<!-- highlight.js Additions END -->



KaTeX

另外數學符號的顯示部份是使用KaTeX 來渲染的,據說與MathJax相比,它的速度載入數度更快,但犧牲的就是它能支援的符號較少。

原本我是想載入MathJax就好,但Stackedit轉出的CSS標籤中,有部份MathJax無法識別,所以還是只能載入KaTeX。

一樣是在範本的HTML的<head></head>中,添加

<!-- KaTeX Additions START-->
<link href='https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.10.0/katex.min.css' rel='stylesheet'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.10.0/katex.min.js'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.10.0/contrib/auto-render.min.js'/>
<script>
	renderMathInElement(document.body);
	 [{left: &quot;$&quot;, right: &quot;$&quot;, display: false}]
	});
</script>
<!-- KaTeX Additions END-->



Mermaid

如果有製作流程圖的需求,則需要再導入Mermaid的函數庫。但它的黑色文字會被我的深色背景吃掉,導致看不清楚,所以我另外取出它的CSS檔,配合我的背景來進行修改。

<!-- Mermaid Additions START-->
<!-- Mermaid 目前版號 8.0.0-rc.8-->
<script src="https://cdn.rawgit.com/knsv/mermaid/0.5.6/dist/mermaid.min.js"></script>
<link rel="stylesheet" href="https://cdn.rawgit.com/knsv/mermaid/0.5.6/dist/mermaid.css">
<script>
	mermaid.initialize({startOnLoad:true, theme: 'forest'});
</script>
<!-- Mermaid Additions END--> 



其他標籤

<link href='https://miaochien.github.io/MyBlogger/template/css_template/markDown.css?raw=1' rel='stylesheet'  type='text/css'/>

除了上面幾個必須個別調整的標籤外,其他的標籤我本想直接套用在這篇文章找到的CSS 文件。但還是因為深色背景的關係,必須修改他的CSS的部份,避免文字被背景吃掉。

但說是修改,其實我只取出所以他的tableblockquote兩部份出來改顏色跟文字大小而已,因為我還滿滿意目前這個主體的CSS設定的XD



參考資料


留言

這個網誌中的熱門文章

Genymotion 模擬器安裝篇:In ubuntu14.04 LET