在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

一些問題

如果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>

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料