Blogger Hack - 程式碼code, 命令提示字元cmd, 引用quote, 排版format

因為有寫程式碼等需要，
而且 blogger 的引用 <blockquote>一直覺得沒有效果，
所以就google到了以下教學
Abin's Tech Note: 程式碼的標記區塊
良人的大秘寶: [筆記]在文章裡顯示優質的程式碼
通達人驛站: 在Blogger內使用引述
Format My Source Code for Blogging
Source Code Formatter for Blogger
在此感謝 Abin, 國良先生, 通達人, Greg Houston
修改後如下, 基本上是一樣的, 只是改成自己的字型, 顏色, gif 圖檔位置

去 Blogger後台 / 版面配置 / 修改 HTML / 修改範本
將 code 程式碼 CSS 語法貼在]]></b:skin>前面
code {
  display: block;
  font-family: 'Trebuchet';
  font-size: 10pt;
  overflow: auto;
  border: 1px solid #ccc;
  padding: 10px 10px 10px 20px;
  max-height: 1200px;
  line-height: 1.2em;
  letter-spacing: 0px;
  color: #000;
  background: #ccc url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNq6ZfbmcWrKkHI9EK-V8j5gJ7_SSNPIoJmMlWOcfMKL_fQCOyw8fHt6dxN7Wj6w2-J-MLKxN9vaBjyr-aInL9perNfmAIjHk8wEbO8pNXNSYN46fJz9JGPM_0UCMqSa4qSuo2Ysmd_UKM/) left top repeat-y;
}
寫文章時將需要的內容貼在<code>big5許功蓋</code>裡面
發佈文章後看到的效果
big5許功蓋



將 cmd 命令提示字元 CSS 語法貼在]]></b:skin>前面
cmd {
  display: block;
  font-family: 'Trebuchet';
  font-size: 10pt;
  overflow: auto;
  border: 1px solid #ccc;
  padding: 10px 10px 10px 20px;
  max-height: 1200px;
  line-height: 1.2em;
  letter-spacing: 0px;
  color: #ccc;
  background: #000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCM6aR993-YfXYRxg2EEfk9yZBS_LNeKq7UC1qXxrXwwCSuHMfoUi4IBevaxwDM-vpAxpPiJLLz0tvsGpgHxEkSZijVyz_Uc5oW2Zb5EXV5Z9KkJ4urDHPCpILjAayvph1vtjhIGV-4vwd/) left top repeat-y;;
}

寫文章時將需要的內容貼在<cmd>big5許功蓋</cmd>裡面
發佈文章後看到的效果
big5許功蓋



將 quote 引用 CSS 語法貼在]]></b:skin>前面
quote {
  display: block; /* fixes a strange ie margin bug */
  font-family: Trebuchet;
  font-size: 10pt;
  overflow: auto;
  border: 3px dotted #000;
  padding: 15px 15px 15px 30px; /*up right bottom left*/
  max-height:300px;
  line-height: 1.2em;
  background: #E3F1FF;
}

寫文章時將需要的內容貼在<quote>big5許功蓋</qoute>裡面
發佈文章後看到的效果
big5許功蓋



另外, 因為 html 語法的關係
在寫 html code 時會把文章中的 tag 標籤用掉
所以, 文章中的

• < 要用 &lt; 取代
• > 要用 &gt; 取代
• & 要用 &amp; 取代

量大懶得改
就去 Format 排版 一次解決
Source Code Formatter for Blogger