列印本頁 - 讓 TinyMCE 也能有 Syntax Highlight 功能

轉自: http://blog.teatime.com.tw/1/post/222

前不久就打算在 LifeType 中加上 Syntax Highlight 的功能, 也找了 dp.SyntaxHighlighter 回來研究了一下, 不過一直試不出來, 而且... 這個程式是用 Javascript 處理的, 在 LifeType 的 TinyMCE 中, 每次要使用, 必須要進到 html 模式, 自己修改程式碼之後, 才能顯示出來. 所以當初試了一下就放棄了.

今天又找了一下類似的軟體, 發現在 TinyMCE 中, 有個 3rd party 的 plugin: insertcode, 搭配 GeSHi, 可以做出類似的效果. 下載回來, 發現這個應該是配合 TinyMCE 2.0.1 或之前的版本使用, 在後續的版本需要做一些修改才能使用. 該討論串中, 也有人貼了一段程式碼, 應該是修改過後的版本, 不過, 我試了一下, 發現如果速度很快 (code 的內容不多的話), 可以正確的把產生的程式碼, 再放回 TinyMCE 中, 不過... 如果連線速度不快, code 很多的話, 通常就會無法把程式的內容再傳回給 TinyMCE 中.

查看了一下程式碼, 發現是利用 Ajax 的功能, 把程式碼傳回到伺服器去利用 GeSHi 來產生 Syntax Highlight 的效果, 然後再傳回到 client, 等收到之後, 再傳回給 TinyMCE. 利用 firebug 追了一下, 看起來在伺服器端並沒有問題, 可以正確的產生資料. 可是 client 端的 Javascript 就是無法取得資料. 因於原本程式的寫法, 執行 Ajax 與接收的地方, 都使用相同的函式來處理, 且程式在呼叫後, 並沒有判斷是否收到資料, 就繼續後頭的動作, 所以傳輸過程一慢, 就會有問題.

動手改了一下程式碼, 也順便把原本做的 "行號" 的功能移除 (因為我不喜歡有這個, 在複製時, 就不會是真的程式內容, 比較麻煩). 整個程式可以由這個地方抓取: http://www.teatime.com.tw/~tommy/files/lifetype/tinymce_insertcode.tgz

下載後, 在 TinyMCE 的 plugins 目錄中解開, 然後修改 insertcode/config/config.php 中的 IC_GESHI_PATH 的設定, 指到你的 GeSHi 的安裝目錄. 然後在 tiny_mce-plog.js 中, 在 plugins 與 theme_advanced_buttons2 中加上 insertcode 之後, 就可以使用這個功能了.

另外, 還需要修改 TinyMCE 的 themes/advanced/css/editor_content.css 的內容與你所使用的樣板的 style.css 的內容, 加上下面的 css 設定:

程式碼:

/* twu2 begin, code attribute */
pre {
border-style: outset;
border-width: thin;
overflow: auto;
font-family: Courier New,Courier,mono;
background-color: #ccffff;
width: 98%;
padding: 1px;
margin: 1px auto 1px auto;
max-height: 100em;
line-height: normal;
}
/* twu2 end, code attribute */
/* twu2 begin insert code */
pre .de1, pre .de2 {font-family: 'Courier New', Courier, monospace; font-weight: normal;color: #000020;}
pre .imp {font-weight: bold; color: red;}
pre .kw1 {color: blue;}
pre .kw2 {color: #000000; font-weight: bold;}
pre .kw3 {color: #000066;}
pre .kw4 {color: #f63333;}
pre .co1, pre .co2, pre .coMULTI {color: #808080; font-style: italic;}
pre .es0 {color: #000099; font-weight: bold;}
pre .br0 {color: #66cc66;}
pre .st0 {color: #ff0000;}
pre .nu0 { color: #cc66cc; }
pre .me1 {color: #006600;}
pre .me2 {color: #006600;}
pre .re0 {color: #0000ff;}
pre .head {font-family: Verdana, Arial, sans-serif;color: #333333;font-weight: bold;background-color: #f0f0ff;border-bottom: 1px solid #d0d0d0;padding: 2px;font-size: 12px;}
pre li {font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;font: normal normal 95% 'Courier New', Courier, monospace; color: #003030;}
pre li.li2 {font-weight: bold;font-weight: bold; color: #006060;}
pre .foot {display: none;}
pre a:link {color: #000060;}
pre a:hover {background-color: #f0f000;}
/* twu2 end intercode */

這樣子就可以做到與我這邊相同的效果了. 當然... 如果顏色不喜歡, 請自行修改吧.

PS. 剛剛發現, 重新編輯文章時, 由 LifeType 再回傳過來的 HTML 中, 把那些 span 的 class 都移除了. 等等再找看看是 LifeType 還是 TinyMCE 造成的.

LifeType 中文開發論壇

開發 => 外掛程式 => 主題作者是: twu2 於四月 04, 2007, 11:02:57 下午

LifeType 中文開發論壇

開發 => 外掛程式 => 主題作者是: twu2 於 四月 04, 2007, 11:02:57 下午

開發 => 外掛程式 => 主題作者是: twu2 於四月 04, 2007, 11:02:57 下午