在blogger中使用markdown和prettyprint編輯文章

寫在前面

此篇主要參考這裡， 不過之前使用這個方法發表文章時發生一些問題會導致破板，這邊補充一下怎麼解決順便做紀錄

使用

• mrakdown
• prettyprint

設定

在bolgger版面配住中新增"HTML/JavaScript"小工具，然後打上以下代碼

<script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/1.7.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=default"></script>

好，到這邊就設定完成了，接下來開始編寫文章

編寫文章

• 編輯器切換到html編寫模式
• 編輯code代碼或是超連結使用html encode避免破板

code prettyprint style

• 參考這裡
• 替換上方cdn連結參數?skin=你的選擇
• prettyprint github

一些問題

如果code裡面包含"<",">"這些符號或是印出一些html code可以使用下面的神奇方法來避免

<div>
<pre><code>&lt;form action={{ url('webAdmin/calendar/add') }} method="post" enctype="multipart/form-data"&gt;
    {{ csrf_field() }}
    &lt;label for=""&gt;選擇一個PDF&lt;/label&gt;&lt;br&gt;
    &lt;input type="file" name="pdfFile" id="file"&gt;&lt;br&gt;
&lt;button type="submit"&gt;submit&lt;/button&gt;</div>
</pre></code>