可能常常在寫一些教學文章的人,都會貼一些程式碼提供使用者參考複製,但是要在wordpress中要附上程式碼,也真是個麻煩事,這邊站長就不多說明啦,趕緊的先往下看吧!!

因為一般我們在貼程式代碼上去的時候,都必須在html模式下把「 <」「 >」換成「&lt;」「&gt;」,如果使用WLW編文的人應該也會發現,WLW會自動幫你把「 <」「 >」替換掉,而且顯示出來也不是怎麼美觀,排版很麻煩,所以我們就藉由Code Autoescape這個外掛來達成我們慾望…………….不對!是需求。

外掛頁面:http://priyadi.net/archives/2005/09/27/wordpress-plugin-code-autoescape/

外掛下載: 《請點我下載》

外掛安裝:

下載解壓縮後,會有二個檔案codeautoescape.phpcode.gif

將codeautoescape.php上傳至外掛資料夾 /wp-content/plugins

01

另code.gif 上傳至你的佈景資料夾 /wp-content/themes/你的佈景

02

再到後台→外掛→啟用Code Autoescape外掛

03

接下來就是要加入<pre></pre>的功用,也就是防止程式碼過長時,版面換行產生的

問題,在後台→外觀→編輯→點選style.css

04

在最下面或找適當的位子加入以下程式碼,改完再按下更新檔案即可


  pre {
  background: #F0F0F0 url(code.gif) repeat-y scroll left top;
  border: 1px solid #CCCCCC;
  color: #333333;
  display: block;
  font-family: Courier New;
  font-size: 12pt;
  line-height: 120%;
  margin: 5px 0 0 20px;
  max-height: 200px;
  overflow: auto;
  padding: 10px 10px 10px 21px;
  width: 90%;
}

如此一來要貼上程式碼只要在Html編輯模式下將你要貼的語法<pre><code></code></pre>包住即可,顯示出來就會如同上面一樣有一個code的框框囉!

Categorized in:

WordPress,

Last Update: 2009 年 11 月 25 日