dp.SyntaxHighlighter: 在網頁顯示美觀的程式碼

真是由石頭成這裡學到不少網頁處理的小技巧耶。不管是Xuite或樂多，對於原貌
呈現的＜xmp>或
＜pre>標籤，在處理上總是有不少奇奇怪怪的小問題，因此每次要貼HTML或JavaScript的程式時，總是要多花時間去修改可能會
造成問題的符號，而在石頭成網站上看到了使用.dp.SyntaxHighlighter 的解決方法。以下是簡單的使
用步驟：

1. 把 dp.SyntaxHighlighter 下載回來，解壓縮後再將需要用到的檔案上傳到Google
   pages，以下是基本的幾個必須的檔案：
• SyntaxHighlighter.css
  (在解壓縮目錄的Styles裡)
• shCore.js
  (在解壓縮目錄的Scripts裡)
• 要貼上的程式種類用的.js檔；要貼JavaScript則上傳shBrushJScript.js
2. 在文章的最後面要加上下列指令(把emisjerry換成自己的網址)：

   <!--<br /> style sheet should be linked at the<br /> top of the page<br /> --></p> <link type="text/css" rel="stylesheet"<br /> href="http://emisjerry.googlepages.com/SyntaxHighlighter.css"></link> <!-- the following code should be place at the bottom of the<br /> page --><br /> <script language="javascript" src="http://emisjerry.googlepages.com/shCore.js"></script><br /> <script language="javascript" src="http://emisjerry.googlepages.com/shBrushJScript.js"></script><br /> <script> dp.SyntaxHighlighter.HighlightAll('code'); </script>

要貼上的程式碼必須置於<br /> 裡，此必須設定下列屬性：</p> <p></big></p> <ul> <li><big>name="code"</big></li> <li><big>class="使用的程式語言名稱"，如javascript、java等，詳細程式語言清單請參考<a target="_blank" href="http://www.dreamprojections.com/syntaxhighlighter/Usage.aspx#languages" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','http://www.dreamprojections.com']);" class="external external_icon" rel="nofollow"> [這裡]</a>。</big></li> <li><big>非必要屬性：rows=顯示的列數，cols=顯示的行數</big></li> </ul> <p><big>class屬性另外可以控制顯示區的外觀，細節請參考<a target="_blank" href="http://www.dreamprojections.com/syntaxhighlighter/Usage.aspx#extendedconfiguration" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','http://www.dreamprojections.com']);" class="external external_icon" rel="nofollow"> [這裡]</a>。我試用過的說明如下：</p> <p></big></p> <ul> <li><big>collapse: 程式碼顯示區最上方顯示 + expand<br /> source，按下才會顯示完整的程式碼</big></li> <li><big>showcolumns: 顯示行號，即…10….20….30這種尺規</big></li> <li><big>不同的控制之間以冒號隔開 <p></big></li> </ul> <p><big>##</big></p> <link href="http://emisjerry.googlepages.com/SyntaxHighlighter.css" rel="stylesheet" type="text/css" /> <h4>您可能也會有興趣的類似文章</h4> <ul class="similar-posts"> <li style="list-style-image: url(http://jdev.tw/blog/wp-content/themes/atahualpa352/images/bullets/gray-arrow.gif);"><a href="http://jdev.tw/blog/231/xuite%e6%a8%a3%e5%bc%8f%e7%a0%94%e8%ae%80%e6%94%bb%e7%95%a5%ef%bc%81" rel="bookmark" title="2005/06/04">Xuite樣式研讀攻略！</a> (1則留言, 2005/06/04)</li> <li style="list-style-image: url(http://jdev.tw/blog/wp-content/themes/atahualpa352/images/bullets/gray-arrow.gif);"><a href="http://jdev.tw/blog/200/%e8%bd%89%e8%b2%bc-%e5%85%a8%e6%b0%91%e6%93%81%e6%8a%b1blog" rel="bookmark" title="2005/05/01">[轉貼] 全民擁抱BLOG</a> (0則留言, 2005/05/01)</li> <li style="list-style-image: url(http://jdev.tw/blog/wp-content/themes/atahualpa352/images/bullets/gray-arrow.gif);"><a href="http://jdev.tw/blog/560/%e8%ae%8a%e6%9b%b4%e6%96%87%e7%ab%a0%e5%ba%95%e7%ab%af%e7%9a%84%e3%80%90%e9%bb%91%e7%b1%b3%e5%85%b1%e4%ba%ab%e6%9b%b8%e7%b1%a4%e3%80%91%e6%8e%a8%e6%96%87%e8%b2%bc%e6%96%87%e6%8c%89%e9%88%95" rel="bookmark" title="2007/06/03">變更文章底端的【黑米共享書籤】推文/貼文按鈕</a> (2則留言, 2007/06/03)</li> <li style="list-style-image: url(http://jdev.tw/blog/wp-content/themes/atahualpa352/images/bullets/gray-arrow.gif);"><a href="http://jdev.tw/blog/117/blog-%e5%8a%a0%e5%85%a5furl%e8%88%87delicious%e7%9a%84%e9%80%a3%e7%b5%90" rel="bookmark" title="2005/03/04">[Blog] 加入Furl與del.icio.us的連結</a> (0則留言, 2005/03/04)</li> <li style="list-style-image: url(http://jdev.tw/blog/wp-content/themes/atahualpa352/images/bullets/gray-arrow.gif);"><a href="http://jdev.tw/blog/542/%e5%89%b5%e4%bd%9c-%e7%bf%bb%e8%ad%af%e6%9c%8d%e5%8b%99%e7%94%a2%e7%94%9f%e5%99%a8%ef%bc%9a%e7%94%a2%e7%94%9f%e6%94%be%e6%96%bcblog%e5%81%b4%e9%82%8a%e6%ac%84%e7%9a%84%e7%bf%bb%e8%ad%af%e6%8c%89" rel="bookmark" title="2007/04/28">[創作] 翻譯服務產生器：產生放於Blog側邊欄的翻譯按鈕</a> (3則留言, 2007/04/28)</li> <li style="list-style-image: url(http://jdev.tw/blog/wp-content/themes/atahualpa352/images/bullets/gray-arrow.gif);"><a href="http://jdev.tw/blog/545/xuite%e7%b6%b2%e5%9d%80%e7%9a%84%e6%ad%a3%e8%a6%8f%e9%81%8b%e7%ae%97%e5%bc%8f%e6%b8%ac%e8%a9%a6" rel="bookmark" title="2007/04/30">Xuite網址的正規運算式測試</a> (1則留言, 2007/04/30)</li> <li style="list-style-image: url(http://jdev.tw/blog/wp-content/themes/atahualpa352/images/bullets/gray-arrow.gif);"><a href="http://jdev.tw/blog/255/%e8%bd%89%e8%b2%bce%e5%a4%a9%e4%b8%8b-blog%e9%a2%a8%e6%bd%ae-%e4%bc%81%e6%a5%ad%e6%84%9b%e6%81%a8%e4%ba%a4%e5%8a%a0" rel="bookmark" title="2005/06/30">[轉貼e天下] Blog風潮 企業愛恨交加</a> (1則留言, 2005/06/30)</li> <li style="list-style-image: url(http://jdev.tw/blog/wp-content/themes/atahualpa352/images/bullets/gray-arrow.gif);"><a href="http://jdev.tw/blog/310/%e5%b8%ad%e6%8d%b2%e4%bc%81%e6%a5%ad%e7%9a%84%e6%96%b0%e5%8b%a2%e5%8a%9b%ef%bc%81blog-inc-200507-e%e5%a4%a9%e4%b8%8b%e9%9b%9c%e8%aa%8c" rel="bookmark" title="2005/09/12">席捲企業的新勢力！Blog Inc. (2005/07 e天下雜誌)</a> (0則留言, 2005/09/12)</li> <li style="list-style-image: url(http://jdev.tw/blog/wp-content/themes/atahualpa352/images/bullets/gray-arrow.gif);"><a href="http://jdev.tw/blog/535/%e5%89%b5%e4%bd%9c-%e5%80%8b%e4%ba%ba%e7%b6%b2%e9%a0%81%e5%85%a8%e9%83%bd%e9%80%a3%ef%bc%9ashow-yourself-generator-v10" rel="bookmark" title="2007/04/21">[創作] 個人網頁全都連：Show Yourself Generator V1.0</a> (0則留言, 2007/04/21)</li> <li style="list-style-image: url(http://jdev.tw/blog/wp-content/themes/atahualpa352/images/bullets/gray-arrow.gif);"><a href="http://jdev.tw/blog/242/%e8%bd%89%e8%b2%bc-%e8%a7%a3%e8%ae%80blog%e5%85%a8%e7%90%83%e6%97%8b%e9%a2%a8%ef%bc%81-%e3%80%8a%e6%95%b8%e4%bd%8d%e6%99%82%e4%bb%a3%e9%9b%99%e9%80%b1%e3%80%8b%e6%8e%a1%e8%a8%aa%ef%bc%8e%e6%92%b0" rel="bookmark" title="2005/06/14">[轉貼] 解讀Blog全球旋風！ 《數位時代雙週》採訪．撰文／史倩玲</a> (1則留言, 2005/06/14)</li> <li style="list-style-image: url(http://jdev.tw/blog/wp-content/themes/atahualpa352/images/bullets/gray-arrow.gif);"><a href="http://jdev.tw/blog/492/generate-social-bookmarks" rel="bookmark" title="2007/02/11">修改自動產生分享書籤的按鈕</a> (4則留言, 2007/02/11)</li> <li style="list-style-image: url(http://jdev.tw/blog/wp-content/themes/atahualpa352/images/bullets/gray-arrow.gif);"><a href="http://jdev.tw/blog/309/%e4%bc%8a%e8%97%a4%e7%a9%b0%e4%b8%80%ef%bc%9a%e6%8a%8a%e9%83%a8%e8%90%bd%e6%a0%bc%e3%80%8cgoogle%e3%80%8d%e5%8c%96-200507-e%e5%a4%a9%e4%b8%8b%e9%9b%9c%e8%aa%8c" rel="bookmark" title="2005/09/12">伊藤穰一：把部落格「Google」化 (2005/07 e天下雜誌)</a> (0則留言, 2005/09/12)</li> <li style="list-style-image: url(http://jdev.tw/blog/wp-content/themes/atahualpa352/images/bullets/gray-arrow.gif);"><a href="http://jdev.tw/blog/540/blog-%e5%9c%a8%e6%96%87%e7%ab%a0%e5%ba%95%e9%83%a8%e9%9a%a8%e6%a9%9f%e9%a1%af%e7%a4%ba%e7%9b%b8%e9%97%9c%e6%96%87%e7%ab%a0%e7%9a%84%e5%8a%9f%e8%83%bd%e8%aa%aa%e6%98%8e" rel="bookmark" title="2007/04/26">[Blog] 在文章底部隨機顯示相關文章的功能說明</a> (6則留言, 2007/04/26)</li> <li style="list-style-image: url(http://jdev.tw/blog/wp-content/themes/atahualpa352/images/bullets/gray-arrow.gif);"><a href="http://jdev.tw/blog/543/%e5%89%b5%e4%bd%9c-%e5%ad%97%e5%9e%8b%e5%b7%a5%e5%85%b7%e7%94%a2%e7%94%9f%e5%99%a8%ef%bc%9a%e5%8b%95%e6%85%8b%e8%ae%8a%e6%9b%b4blog%e7%b6%b2%e9%a0%81%e7%9a%84%e5%ad%97%e5%9e%8b%e5%a4%a7%e5%b0%8f" rel="bookmark" title="2007/04/29">[創作] 字型工具產生器：動態變更Blog網頁的字型大小</a> (4則留言, 2007/04/29)</li> <li style="list-style-image: url(http://jdev.tw/blog/wp-content/themes/atahualpa352/images/bullets/gray-arrow.gif);"><a href="http://jdev.tw/blog/75/%e6%a8%82%e5%a4%9ablog%e8%a9%a6%e8%b2%bc" rel="bookmark" title="2005/02/06">樂多Blog試貼</a> (1則留言, 2005/02/06)</li> </ul> <p><!-- Similar Posts took 18.901 ms --></p> <div class="addthis_toolbox addthis_default_style " addthis:url='http://jdev.tw/blog/497/dpsyntaxhighlighter-%e5%9c%a8%e7%b6%b2%e9%a0%81%e9%a1%af%e7%a4%ba%e7%be%8e%e8%a7%80%e7%9a%84%e7%a8%8b%e5%bc%8f%e7%a2%bc' addthis:title='dp.SyntaxHighlighter: 在網頁顯示美觀的程式碼 ' ><a class="addthis_button_facebook_like" fb:like:layout="button_count"></a><a class="addthis_button_tweet"></a><a class="addthis_button_google_plusone" g:plusone:size="medium"></a><a class="addthis_counter addthis_pill_style"></a></div></div> <div class="post-footer"><img src="http://jdev.tw/blog/wp-content/themes/atahualpa352/images/icons/date.gif" alt="" />2007/02/16 <img src="http://jdev.tw/blog/wp-content/themes/atahualpa352/images/icons/tag.gif" alt="" />標籤：<a href="http://jdev.tw/blog/tag/blogging" rel="tag">Blogging</a> <img src="http://jdev.tw/blog/wp-content/themes/atahualpa352/images/icons/comment.gif" alt="" /><a href="http://jdev.tw/blog/497/dpsyntaxhighlighter-%e5%9c%a8%e7%b6%b2%e9%a0%81%e9%a1%af%e7%a4%ba%e7%be%8e%e8%a7%80%e7%9a%84%e7%a8%8b%e5%bc%8f%e7%a2%bc#comments" class="comments-link" title="dp.SyntaxHighlighter: 在網頁顯示美觀的程式碼 的相關迴響">2 則留言</a> <span id="post-ratings-497" class="post-ratings"><img id="rating_497_1" src="http://jdev.tw/blog/wp-content/plugins/wp-postratings/images/stars_crystal/rating_off.gif" alt="1 Star" title="1 Star" onmouseover="current_rating(497, 1, '1 Star');" onmouseout="ratings_off(0, 0, 0);" onclick="rate_post();" onkeypress="rate_post();" style="cursor: pointer; border: 0px;" /><img id="rating_497_2" src="http://jdev.tw/blog/wp-content/plugins/wp-postratings/images/stars_crystal/rating_off.gif" alt="2 Stars" title="2 Stars" onmouseover="current_rating(497, 2, '2 Stars');" onmouseout="ratings_off(0, 0, 0);" onclick="rate_post();" onkeypress="rate_post();" style="cursor: pointer; border: 0px;" /><img id="rating_497_3" src="http://jdev.tw/blog/wp-content/plugins/wp-postratings/images/stars_crystal/rating_off.gif" alt="3 Stars" title="3 Stars" onmouseover="current_rating(497, 3, '3 Stars');" onmouseout="ratings_off(0, 0, 0);" onclick="rate_post();" onkeypress="rate_post();" style="cursor: pointer; border: 0px;" /><img id="rating_497_4" src="http://jdev.tw/blog/wp-content/plugins/wp-postratings/images/stars_crystal/rating_off.gif" alt="4 Stars" title="4 Stars" onmouseover="current_rating(497, 4, '4 Stars');" onmouseout="ratings_off(0, 0, 0);" onclick="rate_post();" onkeypress="rate_post();" style="cursor: pointer; border: 0px;" /><img id="rating_497_5" src="http://jdev.tw/blog/wp-content/plugins/wp-postratings/images/stars_crystal/rating_off.gif" alt="5 Stars" title="5 Stars" onmouseover="current_rating(497, 5, '5 Stars');" onmouseout="ratings_off(0, 0, 0);" onclick="rate_post();" onkeypress="rate_post();" style="cursor: pointer; border: 0px;" /> (尚無評分)</span> <span id="post-ratings-497-loading" class="post-ratings-loading"><img src="http://jdev.tw/blog/wp-content/plugins/wp-postratings/images/loading.gif" width="16" height="16" alt="Loading ..." title="Loading ..." class="post-ratings-image" /> Loading ...</span> <br/> </div></div><!-- / Post --> <!-- Facebook Comments for WordPress v3.1.3 by we8u (http://we8u.com/facebook-comments/) --> <a name='facebook-comments'></a> <div id='fb-root'></div> <script src='http://connect.facebook.net/zh_TW/all.js#appId=176555642397105&xfbml=1' type='text/javascript'></script> <script type='text/javascript'> var addedComment = function(response) { //console.log('fbComments: Caught added comment'); //console.log('fbComments: Making AJAX call to update Facebook comment count'); $.post('http://jdev.tw/blog/wp-content/plugins/facebook-comments-for-wordpress/facebook-comments-ajax.php', { fn: 'addComment', xid: '_post497' }, function(resp) { if (resp === 'true') { //console.log('fbComments: Updated and cached Facebook comment count for post with xid=_post497'); } else { //console.log('fbComments: FAILED to update Facebook comment count for post with xid=_post497'); } }); //console.log('fbComments: Making AJAX call to send email notification'); $.post('http://jdev.tw/blog/wp-content/plugins/facebook-comments-for-wordpress/facebook-comments-ajax.php', { fn: 'sendNotification', xid: '_post497', postTitle: 'dp.SyntaxHighlighter: 在網頁顯示美觀的程式碼', postUrl: 'http://jdev.tw/blog/497/dpsyntaxhighlighter-%e5%9c%a8%e7%b6%b2%e9%a0%81%e9%a1%af%e7%a4%ba%e7%be%8e%e8%a7%80%e7%9a%84%e7%a8%8b%e5%bc%8f%e7%a2%bc' }, function(resp) { if (resp === 'true') { //console.log('fbComments: Sent email notification'); } else { //console.log('fbComments: FAILED to send email notification'); } }); }; FB.Event.subscribe('comments.add', addedComment); </script> <div id='fbComments' style=''> <!-- facebook comments v2 with imported v1 comments --> <iframe src='https://www.facebook.com/plugins/like.php?href=http://jdev.tw/blog/497/dpsyntaxhighlighter-%e5%9c%a8%e7%b6%b2%e9%a0%81%e9%a1%af%e7%a4%ba%e7%be%8e%e8%a7%80%e7%9a%84%e7%a8%8b%e5%bc%8f%e7%a2%bc&layout=standard&show_faces=false&width=800&action=like&font=verdana&colorscheme=light' scrolling='no' frameborder='0' style='height: 62px; width: 100%;' allowTransparency='true'></iframe> <fb:comments xid='_post497' url='http://jdev.tw/blog/497/dpsyntaxhighlighter-%e5%9c%a8%e7%b6%b2%e9%a0%81%e9%a1%af%e7%a4%ba%e7%be%8e%e8%a7%80%e7%9a%84%e7%a8%8b%e5%bc%8f%e7%a2%bc' numposts='0' width='750' publish_feed='true' migrated='1'></fb:comments></div> <a name="comments"></a><!-- named anchor for skip links --> <h3 id="comments">2 則留言 »dp.SyntaxHighlighter: 在網頁顯示美觀的程式碼</h3> <!-- Comment List --> <ul class="commentlist"> <li class="comment even thread-even depth-1 clearfix" id="comment-493"> <div id="div-comment-493" class="clearfix comment-container"> <div class="comment-author vcard"> <img alt='' src='http://0.gravatar.com/avatar/?d=monsterid&s=55' class='avatar avatar-55 photo avatar-default' height='55' width='55' /> <span class="authorname">tester <img src="http://jdev.tw/blog/wp-content/plugins/reviewers-info/icon/other.png" title="Unknow" alt="Unknow"/> <img src="http://jdev.tw/blog/wp-content/plugins/reviewers-info/icon/other.png" title="Unknow" alt="Unknow"/></span> </div> <div class="comment-meta commentmetadata"> <a href="http://jdev.tw/blog/497/dpsyntaxhighlighter-%e5%9c%a8%e7%b6%b2%e9%a0%81%e9%a1%af%e7%a4%ba%e7%be%8e%e8%a7%80%e7%9a%84%e7%a8%8b%e5%bc%8f%e7%a2%bc/comment-page-1#comment-493"> 2007/09/27 於 16:43:14</a> <span class="comment-reply-link"><a class='comment-reply-link' href='/blog/497/dpsyntaxhighlighter-%e5%9c%a8%e7%b6%b2%e9%a0%81%e9%a1%af%e7%a4%ba%e7%be%8e%e8%a7%80%e7%9a%84%e7%a8%8b%e5%bc%8f%e7%a2%bc?replytocom=493#respond' onclick='return addComment.moveForm("comment-493", "493", "respond", "497")'> » 留言</a></span> </div> <p>請問是不是只要重複編輯xuite的文章，先前寫的程式碼區塊就會亂掉呢?</p> </div> </li> <li class="comment byuser comment-author-admin bypostauthor odd alt thread-odd thread-alt depth-1 clearfix" id="comment-494"> <div id="div-comment-494" class="clearfix comment-container bypostauthor"> <div class="comment-author vcard"> <img alt='' src='http://0.gravatar.com/avatar/0ab2c84da1b8d49c7a7db8722174955a?s=55&d=monsterid&r=G' class='avatar avatar-55 photo' height='55' width='55' /> <span class="authorname">簡睿 <img src="http://jdev.tw/blog/wp-content/plugins/reviewers-info/icon/other.png" title="Unknow" alt="Unknow"/> <img src="http://jdev.tw/blog/wp-content/plugins/reviewers-info/icon/other.png" title="Unknow" alt="Unknow"/></span> </div> <div class="comment-meta commentmetadata"> <a href="http://jdev.tw/blog/497/dpsyntaxhighlighter-%e5%9c%a8%e7%b6%b2%e9%a0%81%e9%a1%af%e7%a4%ba%e7%be%8e%e8%a7%80%e7%9a%84%e7%a8%8b%e5%bc%8f%e7%a2%bc/comment-page-1#comment-494"> 2007/09/28 於 13:18:01</a> <span class="comment-reply-link"><a class='comment-reply-link' href='/blog/497/dpsyntaxhighlighter-%e5%9c%a8%e7%b6%b2%e9%a0%81%e9%a1%af%e7%a4%ba%e7%be%8e%e8%a7%80%e7%9a%84%e7%a8%8b%e5%bc%8f%e7%a2%bc?replytocom=494#respond' onclick='return addComment.moveForm("comment-494", "494", "respond", "497")'> » 留言</a></span> </div> <p>是的，這應該是Xuite的問題。似乎是它把換行給拿掉造成的。</p> </div> </li> </ul> <!-- / Comment List --> <!-- Comment Form --> <div id="respond"> <a name="commentform"></a><!-- named anchor for skip links --> <h3 class="reply">填寫回應</h3> <div id="cancel-comment-reply"> <a rel="nofollow" id="cancel-comment-reply-link" href="/blog/497/dpsyntaxhighlighter-%e5%9c%a8%e7%b6%b2%e9%a0%81%e9%a1%af%e7%a4%ba%e7%be%8e%e8%a7%80%e7%9a%84%e7%a8%8b%e5%bc%8f%e7%a2%bc#respond" style="display:none;">取消</a> </div> <form action="http://jdev.tw/blog/wp-comments-post.php" method="post" id="commentform"> <p> <input class="text author" type="text" name="author" id="author" value="" size="30" tabindex="1" />  <label for="作者"> <strong> 您的大名</strong>[必填]</label> </p> <p> <input class="text email" type="text" name="email" id="email" value="" size="30" tabindex="2" />  <label for="電子郵件"> <strong> 電子郵件信箱</strong>(不會公佈)[必填]</label> </p> <p> <input class="text url" type="text" name="url" id="url" value="" size="30" tabindex="3" />  <label for="網址"> 網站</label> </p> <p class="thesetags clearfix"> 您可使用<a class="xhtmltags" href="#" onclick="return false;">這些HTML標籤</a></p> <div class="xhtml-tags"><p><code><a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" highlight=""> </code></p></div> <!-- Comment Textarea --> <p><textarea name="comment" id="comment" rows="10" cols="10" tabindex="4">