數位天堂

Nokia:科技始終來自於人性; 拜耳:如果文明不能使我們更相愛,那科技便失去意義!
歡迎您的加入,讓我們一起討論科技與環保的整合應用...

您尚未登入。

#1 2009-10-13 22:36:10

Aven
天使
來自: 數位天堂
註冊日期: 2007-07-15
文章數: 2266
網站

[PunBB]麥擱CODE啊,一起來美化您的 code tag

用過 PunBB 的朋友都知道,這是一套輕量級的論壇系統,早期數位天堂即透過改機將 PunBB 安裝於ASUS WL-500GP上,這段期間 PunBB 一直維持 7x24 穩定的運作毫不懈怠,主要是因為其內建功能相當精簡,並沒有太多花俏的功能,相對地,她還有很多可以加值擴充的空間,等著您動手來改。

這次要改的是 BBCode 裡的 code tag,也就是"代碼"的功能,原來預設的代碼功能實在太精簡,無法指定字體及顏色,對本站多數討論改機的文章而言,不容易閱讀,所以我比較常使用"引用"勝過"代碼"功能。

早期在瀏覽改機前輩 abintech 的部落格時,就被其文章編排所吸引,其中 CODE 及 CMD 功能讓人非常容易閱讀,而且在 abintech 部落格裡也有專文介紹如何設計程式碼區塊,所以也興起我想嘗試改一下 PunBB 裡的代碼功能。

主要修改的地方有兩個部份,一是在CSS裡新增code的定義,另一個是修改parser.php 裡的字串解譯。
首先在 \punbb\style\imports\base.css 檔案最後新增底下code CSS內容,並存檔

code { display: block; font-family: 'Courier New'; font-size: 10pt; overflow: auto; white-space: pre; border: 1px solid #ccc; padding: 10px 10px 10px 21px; line-height: 1.2em; letter-spacing: 0px; color: #ff0; background: #000 url(../../img/codebg.gif) left top repeat-y; }


再來是編輯 \punbb\include\parser.php 並搜尋底下三行程式碼

$num_lines = ((substr_count($inside[$i], "\n")) + 3) * 1.5; $height_str = ($num_lines > 35) ? '35em' : $num_lines.'em'; $text .= '

'.$lang_common['Code'].':

'.$inside[$i].'

';


修改成底下這一行程式碼後存檔(也可以把這三行最前面加註//,新增到最後一行即可) 

$text .= '

'.$inside[$i].'


';


存檔後,即可收工驗收啦。
效果如何? 相信您應該也能認同閱讀性較舊版提升了吧。

如果想修改字體顏色,可回到 \punbb\style\imports\base.css 修改 code CSS 參數,這部份保留給您自己來嘗試看看。

參考資料: http://abintech.twidv.com/2006/11/blog-post_7922.html



最後修改: Aven (2009-10-21 21:44:03)



技術問題請於論壇上集眾人之力公開討論,感恩 thankgod

離線

 

相關討論主題

主題 回覆 點閱 最後發表
3 20687 2010-08-08 17:33:04 作者 lyyzh78
sqlite/punbb 安裝失敗 作者 ecolitely
9 29936 2009-06-29 21:06:16 作者 Aven
0 8303 2008-01-30 14:37:38 作者 Aven
置頂
置頂: PunBB 網路資源 作者 Aven
0 29169 2007-12-18 22:48:28 作者 Aven

友情連結

論壇頁尾

Powered by PunBB
© Copyright 2018 Rickard Andersson
RSS Feed