[Blogger][Javascript] 在撰寫區標記Google Prettify區段

Google prettify簡單又好用，只是在Blogger內貼程式碼時，還要手動轉到HTML頁籤在落落長的HTML元素裡找到正確排版位置、透過HTML Escape跳脫字元、自己標記<pre class="prettyprint">...</pre>...有點麻煩



希望可以在"撰寫"裡用類似標籤的方式標記程式碼區段，經過字串代換（String Substituion）後自己變成<pre class="prettyprint">...</pre>，自然最終顯示出來就是prettify的樣子了

最後交出這個東西（為了自我escape，%start與%end前要補上至少一個空格），把這段貼在版面配置->跨欄區就有用了：

  %start
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript">
function run() {
  //replace%start tag
  document.body.innerHTML =
document.body.innerHTML.replace(/[\s]+%start/g, "<pre class=\"codeblock prettyprint\">");
  //replace%end tag
  document.body.innerHTML =
document.body.innerHTML.replace(/[\s]+%end/g, "</pre>");
}
$(document).ready(run);//link up event handler for ready event , which triggered when DOM fully loaded.
</script>
  %end

在"撰寫"裡的原稿長這樣：

這樣剪剪貼貼程式碼做筆記就輕鬆多了

參考：
javascript regular expression
javascript string replace
jquery - event ready