看板 Knuckles_note
作者 標題 [PHP] 使用 Pygments 將程式碼上色 syntax highlighter
時間 2015-10-16 Fri. 08:18:27
![[圖]](http://i.imgur.com/f28bn7Y.png)
Pygments 是個用 Python 在後端將程式碼文字上色的工具
官網 http://pygments.org/
雖然有一些用JS寫的前端程式碼上色工具
像是 SyntaxHighlighter, Google Prettifier, highlighter.js
但效果不太理想，一些比較複雜的語法會辨識錯誤
且必需載入很多JS程式會讓瀏覽器變慢
所以改找個後端的程式碼上色工具來用
在 CentOS 下安裝 Pygments
先安裝 Python
$ sudo yum install python3安裝 Pygments
$ sudo yum install python-pygments不過這樣只能裝舊版的 Pygments 1.4
要使用新功能與新的語言支援(例如swift)的話，要安裝新版才行
移除 yum 安裝的 pygments
$ sudo yum remove python-pygments使用 pip 安裝
$ python3 -m pip install pygments執行檔會安裝在 /usr/local/bin/pygmentize，加個軟連結到 /usr/bin
$ ln -s /usr/local/bin/pygmentize /usr/bin/pygmentize查看安裝版本
$ pygmentize -VPygments version 2.14.0, (c) 2006-2022 by Georg Brandl, Matthäus Chajdas and contributors.
在 Windows 下安裝 Pygments
在 Python官網 下載 windows 版安裝程式
在 http://pypi.python.org/pypi/distribute#installation-instructions 下載安裝 distribute
將 C:\Python27\Scripts\ 加進系統路徑中
控制台/系統/進階系統設定/進階，點環境變數
編輯系統變數的 path，加上 ;C:\Python27\Scripts
![[圖]](http://i.imgur.com/7JZ9kpC.jpg)
在命令提示字元模式下執行 C:\Python27\Scripts\easy_install Pygmentize
製作 Pygments 的 CSS 檔
命令模式下輸入
$ pygmentize -S default -f html -a .highlight > style.css可產生網頁要用到的css檔
其中 -S default 可換成其他想要使用的樣式
(參考 Pygments Style Demo)
-a .highlight 代表上色的程式碼要限定在哪個class裡面
產生的CSS檔會像這樣:
.highlight .hll { background-color: #ffffcc }
.highlight { background: #f8f8f8; }
.highlight .c { color: #408080; font-style: italic } /* Comment */
.highlight .err { border: 1px solid #FF0000 } /* Error */
.highlight .k { color: #008000; font-weight: bold } /* Keyword */
.highlight .o { color: #666666 } /* Operator */
...
.highlight { background: #f8f8f8; }
.highlight .c { color: #408080; font-style: italic } /* Comment */
.highlight .err { border: 1px solid #FF0000 } /* Error */
.highlight .k { color: #008000; font-weight: bold } /* Keyword */
.highlight .o { color: #666666 } /* Operator */
...
之後可以修改這個CSS為自己想要的顏色
在 PHP 執行 Pygments
在 php 用 exec() 執行 pygmentize
即可產生程式碼的 html
使用範例：
<?php
//產生一段要上色的PHP程式碼
$code_type = 'php';
$code = <<<'EOD'
<?php
/* comment
* comment
*/
for($i=1;$i<10;$i++){
}
EOD;
//將程式碼存進暫存檔
$temp_file = tempnam("./", "pygmentize_");
$file_handle = fopen( $temp_file, "w" );
fwrite( $file_handle, $code );
fclose( $file_handle );
//用exec執行pygmentize讀取暫存檔，輸出上色的程式碼
$command = "pygmentize -f html -O linenos=table,encoding=utf-8 -l $code_type $temp_file";
$output = array();
exec( $command, $output );
unlink( $temp_file );
$output_string = join( "\n", $output );
//載入之前產生的CSS檔
echo '<link href="style.css" rel="stylesheet">'."\n";
echo $output_string;
//產生一段要上色的PHP程式碼
$code_type = 'php';
$code = <<<'EOD'
<?php
/* comment
* comment
*/
for($i=1;$i<10;$i++){
// comment
echo "number ".$i."\n";
}
EOD;
//將程式碼存進暫存檔
$temp_file = tempnam("./", "pygmentize_");
$file_handle = fopen( $temp_file, "w" );
fwrite( $file_handle, $code );
fclose( $file_handle );
//用exec執行pygmentize讀取暫存檔，輸出上色的程式碼
$command = "pygmentize -f html -O linenos=table,encoding=utf-8 -l $code_type $temp_file";
$output = array();
exec( $command, $output );
unlink( $temp_file );
$output_string = join( "\n", $output );
//載入之前產生的CSS檔
echo '<link href="style.css" rel="stylesheet">'."\n";
echo $output_string;
產生的 HTML 會像這樣:
<link href="style.css" rel="stylesheet">
<table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre>1
2
3
4
5
6
7
8</pre></div></td><td class="code"><div class="highlight"><pre><span class="o"><?</span><span class="nx">php</span>
<span class="cm">/* comment</span>
<span class="cm"> * 註解</span>
<span class="cm"> */</span>
<span class="k">for</span><span class="p">(</span><span class="nv">$i</span><span class="o">=</span><span class="mi">1</span><span class="p">;</span><span class="nv">$i</span><span class="o"><</span><span class="mi">10</span><span class="p">;</span><span class="nv">$i</span><span class="o">++</span><span class="p">){</span>
<span class="p">}</span>
</pre></div>
</td></tr></table>
<table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre>1
2
3
4
5
6
7
8</pre></div></td><td class="code"><div class="highlight"><pre><span class="o"><?</span><span class="nx">php</span>
<span class="cm">/* comment</span>
<span class="cm"> * 註解</span>
<span class="cm"> */</span>
<span class="k">for</span><span class="p">(</span><span class="nv">$i</span><span class="o">=</span><span class="mi">1</span><span class="p">;</span><span class="nv">$i</span><span class="o"><</span><span class="mi">10</span><span class="p">;</span><span class="nv">$i</span><span class="o">++</span><span class="p">){</span>
<span class="c1">// comment</span>
<span class="k">echo</span> <span class="s2">"number "</span><span class="o">.</span><span class="nv">$i</span><span class="o">.</span><span class="s2">"</span><span class="se">\n</span><span class="s2">"</span><span class="p">;</span>
<span class="p">}</span>
</pre></div>
</td></tr></table>
上色的樣子：
![[圖]](http://i.imgur.com/Q31kmCZ.jpg)
支援的語言列表: https://pygments.org/languages/
參考:
http://derek.simkowiak.net/pygments-for-php/
http://davidwalsh.name/pygments-php-wordpress
http://eddmann.com/posts/using-pythons-pygments-syntax-highlighter-in-php/
問題解決記錄：
在 Windows 下用 wamp 執行 exec('pygmentize')
會出現找不到執行檔 pygmentize 的問題，有改系統變數 path 也不行
只好寫成 Windows 執行時會加上絕對路徑
$path = "C:\\Python27\\Scripts\\";
exec($path.'pygmentize');
exec($path.'pygmentize');
預設當程式碼為 PHP 時，開頭要是 <?php 才會上色
如果希望不加 <?php 也可以上色的話
可以在執行時的 -O 加上參數 startinline=true
參考: http://pygments.org/docs/lexers/#lexers-for-php-and-related-languages
--
※ 作者: Knuckles 時間: 2015-10-16 08:18:27
※ 編輯: Knuckles 時間: 2023-11-25 00:00:21 (台灣)
※ 看板: KnucklesNote 文章推薦值: 0 目前人氣: 0 累積人氣: 563
回列表(←)
分享