簡介

Prettify Code Syntax是WordPress的外掛，可以在post中標記程式碼顯示利於讀者閱讀。

安裝環境

•  WordPress 3.6.1(台灣版)
  
  
  
  • 官方網站：http://tw.wordpress.org/
  
  
  
  


• Prettify Code Syntax 1.2.1
  
  
  
  • 官方網站：http://www.frontendmatters.com/open-source/wordpress-plugins/prettify-code-syntax/
  
  
  • 外掛取得：http://wordpress.org/plugins/prettify-code-syntax/
  
  
  • 透過WordPress控制台安裝 (本文採用此方法)
  
  
  
  

開始安裝

1. 安裝WordPress。本文基於WordPress上外掛安裝說明，WordPress請自行安裝。


2. 安裝Prettify Code Syntax

• 方法一：進入WordPress控制台 > 外掛 > 安裝外掛，搜尋 Prettify Code Syntax 並從後台安裝


• 方法二：進入外掛下載頁：http://wordpress.org/plugins/prettify-code-syntax/ 放入自行網站中安裝

使用與設定

1. 安裝完成後在 WordPress控制台 > 設定 > Prettify Code Syntax 中可以設定樣式以及額外語言選項。


2. 樣式設定在 Prettify Code Syntax 設定中的 Style 中可選擇，下方也可以自定CSS設計樣式。[caption id="attachment_225" align="aligncenter" width="794"] 設定STYLE[/caption]


3. 額外語言在 Prettify Code Syntax 設定中的 Languages 中選擇，外掛本身已經內建C, Java, Python, Bash, SQL, HTML, XML, Javascript, Makefiles, 和 Rust 等語言，下面可供額外選擇如CSS, SQL等語言。[caption id="attachment_226" align="aligncenter" width="756"] 設定額外語言[/caption]


4. 使用時在文字模式下加入：
   <pre class="prettyprint">
   <code class="language-php">
   // my code
   </code>
   </pre>


5. 例如：
   <pre class="prettyprint">
   <code class="language-c">
   #include <iostream>
   using namespace std;
   int main()
   {
   cout << "Hello world!" << endl;
   return 0;
   }</code>
   </pre>


6. 顯示結果

#include 

using namespace std;



int main()

{

cout 
return 0;

}

附註1:

<code class="language-php">

紅色的部份可以指定語言

附註2:

以上功能可以省略成
<pre class="prettyprint">
// my code
</pre>
Prettify Code Syntax會自動偵測並幫你選擇語言。