小Co鬥阿邦兔XII: 使用 Markdown 語法來撰寫 Blogger

最近發現自己使用 Markdown 來撰寫文件的次數越來越頻繁，就有了乾脆自己的 Blogger 也用 Markdown 來寫的念頭，順便也當作一種練習，於是就上網查了一下，發現蠻多人已經開始這麼幹了，所以參考了一些網路前輩的分享然後自己再稍微整理一下，在此做個紀錄順便分享給其它有需要的人。

首先，先到選單 版面配置 裡新增一個小工具如下圖所示

標題打上 Markdown 後，貼上以下程式碼

<script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/1.9.1/showdown.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/google/code-prettify/loader/run_prettify.js"></script>

<script>

   function blockquote(str) {      
      return  str.replace(/&lt;/g,'<').replace(/&gt;/g,'>').replace(/&amp;/g,'&');   //Decode string of `&lt;`, `&gt;` and `&amp;` at some case
   }

   var converter = new showdown.Converter();
   var posts = document.querySelectorAll(".markdown");
   Array.prototype.forEach.call(posts, function(el, i) 
   {
      el.style.display = 'inline';
      el.innerHTML = converter.makeHtml(blockquote(el.innerHTML));
      var pres = el.querySelectorAll("pre");
      for(var i = 0; i < pres.length; i++) 
      {
         pres[i].classList.add("prettyprint");
         pres[i].style.cssText = "border-width: 0.1em 0.1em 0.1em 0.1em; border: solid gray; overflow: auto; padding: 0.2em 0.6em;word-break:normal;word-wrap: normal;";
      }

      /* 給予外部連結另開視窗的屬性 */
      var hyperlinks = el.querySelectorAll("a");
      for(var i = 0; i < hyperlinks.length; i++) 
      {
         if(!hyperlinks[i].href.startsWith(window.location.href))
            hyperlinks[i].target = "_blank";
      }                                                  
   });

</script>

接著到 主題->自訂->進階->新增CSS，如下圖

然後加上給 Markdown 用的 CSS 語法(可自行修改樣式內容)

/*Markdown 一般字體格式*/
.markdown > p
{
    font-family:sans-serif;
    font-size: large;
    line-height: 1.4;
}

.markdown > p code
{
    background-color: rgba(27,31,35,.05);
    border-radius: 3px;
    font-family:sans-serif;
    font-size: large;
    margin: 0;
    padding: .2em .4em;
}


.markdown > p > img
{    
    display: block;
    margin: 0 auto;
    width:80%;
}

到此已經完成大部分的前置作業，最後就是讓 Blogger 可以識別文章哪些內容需要轉換成 Markdown，先新增一篇文章將撰寫方式更改為 HTML

然後再將以下內容貼到編輯區，即可開始在我們自己的 Blogger 上用 Markdown 來編寫內容了

<img src="預覽圖片連結位址" style="display:none">   
<article style="font-family:sans-serif;font-size:large;">/* 預覽區文字內容 */</article>

/* 閱讀更多 */
<br><br>
<div><!--more--></div>
<br>

<article class="markdown" style="display:none">

/* Markdown 內容 */

<br><br><br>
##<span style="color:#0091f1;">參考資料</span>

[\[Google\] Google 首頁](https://www.google.com)
[\[Markdown\] Markdown 語法](https://markdown.tw) 

</article>