走在職業的道路上總是有很多迷惘。 不後悔曾經的自己選擇了前端這條路，即使前方佈滿了荊棘。 因此想要留下點什麼，也可以記錄下在這條路上的種種。 或許在未來的某個時間點，可以以另一種眼光看待這曾經的當下。
2019-03-14
程式庫 ✧ 在 Google Blogger 中使用 Markdown
markdown
當初會需要這項功能，主要原因是這個平台最終目的是讓我自己丟一些自學、工作中感悟到的一些東西，並分享給大家。
但問題來了，因為自身的工作是`前端切版`往`前端開發`在走(視覺苦手，不敢自稱設計)，因此很多時候會需要貼跟程式碼相關的東西。
如果只是要貼，其實真的不難：
1. 用一般的程式編輯器打完之後截圖。
2. 當一般文章進行撰寫。
3. 用 [GitHubGist](https://gist.github.com/) 提供的 iframe 功能。
但，以上的方法都不盡完美。
1. 以截圖來說，雖然一切都很順手(畢竟是常用的編輯器)，但未來要再次使用相關設定或內容的時候，需要逐字重新輸入，其實是很花時間的事情。
2. 當作一般文章進行撰寫的話，雖然只要平台不擋語法(有些平台為了安全性問題，會禁止外部 / 第三方語法輸入)就可以，但是在排版上會讓人想死。更罔論在沒有正常程式提示色的時候，看得有多痛苦。
3. [GitHubGist](https://gist.github.com/) 雖然可以解決以上兩個的問題，但是有些內容是指令碼(CMD / PowerShell)時，其實用編輯器介面會有誤導的嫌疑。當然主要還是相較之下比較麻煩，卻極其適合長段落的程式碼。
也因此，花了些時間從網路上搜尋：是否也曾經有人需要在 Blogger 平台上編寫程式碼 / 指令碼，而感到困擾的。
從那些文章中發現，很多人會直接使用線上的 Markdown & HTML 轉換編輯器進行處理。
但是這樣還是很麻煩，在那個瞬間很想跳槽到 [Medium](https://medium.com/) 去，即使為了把這個平台弄成我想要的樣子花了很多時間。
---
何其有幸，最後找到了一篇關於[外掛 Markdown 語法](http://etrex.blogspot.com/2017/03/blogger-code-markdown-prettyprint.html)的文章，終於得以把 Markdown 直接應用在部落格編輯器中。
經實測後， table 系列不支援，程式區塊不能採用高亮語言模式、不具有行號，但整體上來說還在可接受範圍內。(其實如果牽涉到響應就不適合使用表格)
後續有發現在轉換上有瑕疵，筆者也針對相關內容[重新修正發文](http://etrex.blogspot.com/2017/08/convertermakehtmlnyum-list-grep-php.html)，所以還是可用的。
下方附上最終採用語法作為備份。
```javascript
<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");
//定義要替換的字元
var insteadWords = {
">": ">",
"<": "<",
"&": "&"
};
//loop每一篇文章
Array.prototype.forEach.call(posts, function(el, i){
/*有在開頭找到 markdown 字眼才處理，把整個文章取出來替換成 html
* 從文章取出內容時，應該有某些字元早就被轉換過，但因為是寫 markdown，根本不需要轉
* 所以再寫一段程式把某些特定的字轉回來，暫時只定義了 3 組
*/
if(el.innerHTML.indexOf("markdown") <= 1){
var origin = el.innerHTML;
origin = origin.replace("markdown","");
for (var key in insteadWords){
origin = origin.replace(new RegExp(key,'g'),insteadWords[key]);
};
//先把特殊字元轉回來再作 markdown 的轉換
el.innerHTML = converter.makeHtml(origin);
}
});
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>
```