[小技巧] Blogger優化 - Markdown語法

語法格式

1. 使用Markdown格式撰寫文章 (考慮到SEO, 以下是目前相對好的flow)
   • google drive中建一個md資料夾, markdown本文放這邊
   • 使用以下網址做md > html的轉換, 然後手動做繼續閱讀語法: <!-- more -->的置換
     • https://dillinger.io/
     • 會需要置換是因為轉換過程會誤判, 所以要手工修正一下
     • export出來的html檔存到google drive的html資料夾中
   • 複製html內容到blogger中的HTML格式

2. Markdown語法網路上有很多資源可查, 較為tricky的如下

   • 表格: 我直接放棄用markdown, 轉為直接畫面截圖, 改成用貼圖的方式
   • 圖片: 使用以下格式

     • ![](你的圖片網址)
       

     • 上述的"你的圖片網址", 我會放在google drive, 然後記得共用要開檢視, 點擊圖片 > 共用 > 複製連結(假設為x)
     • 請把上述x, 透過以下網址轉換成y, y即"你的圖片網址"
       • https://sites.google.com/site/gdocs2direct/

3. 圖片大小

   • Blogger > 主題 > 編輯HTML
   • 在.post-body與.post-header之間設定以下即可讓blogger圖片自動放大縮小

     .post-body {
       xxxxxx
     }
     
     /* Picture auto zoom */
     .post-body img{
     max-width: 100%;
     width: auto;
     height: auto;
     float:center
     }
     
     .post-header {
       yyyyyy
     }
     

4. 讓Blogger可以顯示程式碼區塊

   • 首先markdown要先使用程式碼區塊的語法寫好, 並轉換成html
   • Blogger > 版面配置 > footer-1中新增小工具 > HTML/Java Script > 內容填入以下即可

     <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.10.0/styles/rainbow.min.css" />
     <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.10.0/highlight.min.js"></script>
     <script>hljs.initHighlightingOnLoad();</script>
     

參考資源

1. 讓blogger圖片自動放大縮小
2. Blogger : 如何使用程式碼區塊