[WordPress外掛]文章中插入程式碼

/ 分類: , / 0 則回應

標籤: ,

因為常會在教學中會用到程式碼..直接貼上的話常常會產生亂碼.而且不美觀.
可以有兩種方式

方法一:利用CSS方式

可以考慮先在主題編輯器的style.css中加入

code{
display: block; /* fixes a strange ie margin bug */
font-family: Courier New; font-size: 11pt;
overflow:auto;
background:#f0f0f0 url(https://chenkaie.googlepages.com/Code_BG.gif) left top repeat-y;
border: 1px dashed #333;
padding: 5px 5px 5px 20px;
max-height:200px;
line-height: 1.2em; margin: 5px 5px 0 15px;
}

然後以後在文章中如果想用到程式碼.就可以先切換到文字模式

<code>

……..您的程式碼……

</code>

要注意的是
<>&等符號會被當作tag讀掉，所以文章中有這些符號的話，記得要用下列的字元更換！

< 用&lt;更換
> 用 &gt;更換
& 用&amp;更換

方法二:使用外掛，這個比較炫可以收合

下載WP-CodeBox 外掛
官方下載點

所有的外掛安裝方式其實都大同小異
把下載好的檔案.原封不動的上傳到您的/wp-content/plugins

接著到您的Wordpress管理介面的”外掛“啟用它

設定這邊就會出現WP-CodeBox選項

基本上裝好後完全不用設定即可馬上使用

(記得要切換到文字模式下使用)您只要在您要加上程式碼的文章中加上

<pre lang="語言" line="1" colla="+">您的程式碼</pre>

語言欄—表示妳是用甚麼語言表示,可以填入html,css,javascript等
line:顯示程式碼的行數
colla:表示是否要展開程式碼,+為展開-為收合

範例:

#container {
margin-top:5px;
margin-left:10%;
margin-right:auto;
margin-bottom:20px;
border: 1px solid 000000;
}


如果您發現符號會不正常顯示的話,那就是需要修正Wp-codebox內部的問題.請照以下動作做即可.正常顯示<>等符號

修正 WP-CodeBox 問題

  1.  用文字編輯器打開 /wp-content/plugins/wp-codebox/main.php
  2. 找到一行 $code = wp_codebox_code_trim($match[5])
  3. 更改為 $code = wp_codebox_code_trim( html_entity_decode( $match[5] , ENT_QUOTES ) );

發表留言