Re: [問題] 如何在Blog上 貼上程式碼

看板Blog作者 (阿凱)時間17年前 (2006/11/16 16:07), 編輯推噓0(000)
留言0則, 0人參與, 最新討論串2/2 (看更多)
※ 引述《NintendoGC (Canon的好只有用過才知道)》之銘言: : ※ 引述《jengting (~楓花雪岳~)》之銘言: : : 請問板上前輩~~ : : 我發現有些格主 在貼程式碼時 都會有類似論壇的一個方框 : : 把程式碼包在裡面 我要如何產生這樣的功能 : : 直接貼的話 既沒有辦法排版 發布時又會出現錯誤訊息 ^^?? : 參考一下... : CSS 的部份: : pre { overflow:auto; : margin:0 0 18px 0; : padding:4px; : } : pre, code { background-color:#F8FAF2;} : font-family:Courier, Monaco, monospace; : } : code {padding:0 2px;} : 文章 html 的部份... : <pre> : <code> : if (a) : { : .... : } : </code> : </pre> : 這樣會出現方框, 若程式內容太長, 則會出現捲軸... : 效果如下: : http://www.goston.net/2006/11/04/638/ : 當然, 程式裏面的內容若有 HTML 的特殊符號, 要先轉掉... : 例如 < 要轉成 &lt; : 如果 Blog 能裝 Plugin 可以找 Plugin 來用, 這樣還能有語法高亮度顯示, : 例如 WP 的使用者能夠裝 CoolCode 這個 Plugin... 我發現了一個還不錯的站,提供免費的javascript code,可以貼出很美觀的code 官網:「dp.SyntaxHighlighter Home Page」 http://www.dreamprojections.com/syntaxhighlighter/Default.aspx 範例如底下: C++ : http://www.dreamprojections.com/syntaxhighlighter/Tests/Cpp.html HTML : http://www.dreamprojections.com/syntaxhighlighter/Tests/XML.html 下載網址: http://www.dreamprojections.com/syntaxhighlighter/Tests/Index.html 使用方法: http://www.dreamprojections.com/syntaxhighlighter/Usage.aspx 有興趣的人,可以裝來玩玩... -- http://chenkaie.blogspot.com/ -- ※ 發信站: 批踢踢實業坊(ptt.cc) ◆ From: 61.228.186.171 ※ 編輯: chenkaie 來自: 61.228.186.171 (11/16 16:11)
文章代碼(AID): #15N1mbrZ (Blog)
文章代碼(AID): #15N1mbrZ (Blog)