發表文章

目前顯示的是有「Blogger」標籤的文章

使用Markdown寫Blogger

在Blogger版面配置新增HTML/Javascript小工具, 增加以下CODE <script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/1.6.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=sunburst"></script> 就可以在Blogger的HTML模式寫Markdown語法了。 ※ 實測後, 發現若Markdown Code是包含<script>...</script>或可能有使用到特殊的語法, Markdown解析會失敗 ref web: https://etrex.blogspot.com/2017/03/blogger-code-...

在Google Blogger中High-Light程式碼

在Google Blogger中要High-Light程式碼, 可以參考下面的做法。 新增兩個HTML/Javascript小工具, 並建議不要輸入標題, 放到最下面。 內容分別為 <script src="//google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script> <style> .post .codeblock { display: block; /* fixes a strange ie margin bug */ font-family: Courier New; font-size: 10pt; overflow:auto; background: #f0f0f0 url(data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAASwCAYAAAAt7rCDAAAABHNCSVQICAgIfAhkiAAAAQJJREFUeJzt0kEKhDAMBdA4zFmbM+W0upqFOhXrDILwsimFR5pfMrXW5jhZr7PwRlxVX8//jNHrGhExjXzdu9c5IiIz+7iqVmB7Hwp4OMa2nhhwN/PRGEMBh3Zjt6KfpzPztxW9MSAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzB8HS+J9kUTvzEDMwAAAABJRU5ErkJggg==) left top repeat-y; border: 1px solid #ccc; padding: 10px 10px 10px 21px; max-height:1000px; line-height: 1.2em; } </style> 並在要標示的區塊的HTML前後用下面的HTML T...