2009年10月31日

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

因為有寫程式碼等需要,
而且 blogger 的引用 <blockquote>一直覺得沒有效果,
所以就 google 到了以下教學
Abin's Tech Note: 程式碼的標記區塊
良人的大秘寶: [筆記]在文章裡顯示優質的程式碼
通達人驛站: 在Blogger內使用引述
Format My Source Code for Blogging

在此感謝 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/AVvXsEgfTu82R8CdicYZGY4dfh3eg_jV6w_s6WZmxeSp9R2HBYNNYdB3F70zrHuV2PfCgEllTNJ9Edj8y7obFqaa6wPyUZ2lHIcSYsSztR__vOiOvDJ_qstrZ7zqG3A7W6Gn-Pnco7qRvNecCu_1/) 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/AVvXsEg68fH0Q-kwPa1eq5RWbBp6HVg3QKh8XcxMthvUMFo0NyisAowg4HTRfIMg2wf6yMPwBzZsOVNdJzUeng6t9HrXEvYgw5h5Kqemy4X83YFMgMEo65fyJp8X49RiNVRkNyRqAfogfdj8ysWv/) 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: #191919 ;
}

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



另外, 因為 html 語法的關係
在寫 html code 時會把文章中的 tag 標籤用掉
所以, 文章中的
  • < 要用 &lt; 取代
  • > 要用 &gt; 取代
  • & 要用 &amp; 取代
量大懶得改
就去 Format 排版 一次解決

沒有留言:

張貼留言