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/639/%e5%9c%a8blog%e8%a3%a1%e9%a1%af%e7%a4%ba%e9%9a%a8%e6%a9%9f%e6%96%87%e7%ab%a0%e7%9a%84%e7%b0%a1%e5%96%ae%e4%bd%9c%e6%b3%95" rel="bookmark" title="2007/10/14">在Blog裡顯示隨機文章的簡單作法</a> (3則留言, 2007/10/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/219/blog-%e5%9c%a8%e9%a6%96%e9%a0%81%e9%a1%af%e7%a4%ba%e5%8d%b3%e6%99%82%e6%96%b0%e8%81%9e" rel="bookmark" title="2005/05/23">[Blog] 在首頁顯示即時新聞</a> (0則留言, 2005/05/23)</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/180/xuite-%e8%87%aa%e7%94%b1%e6%ac%84%e4%bd%8d%e8%a8%ad%e5%ae%9a%e7%9a%84%e5%95%8f%e9%a1%8c" rel="bookmark" title="2005/04/16">[Xuite] 自由欄位設定的問題</a> (4則留言, 2005/04/16)</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/192/xuite-%e5%8a%a0%e4%b8%8aflash%e7%9a%84%e6%99%82%e9%90%98%e9%a1%af%e7%a4%ba%e7%af%84%e4%be%8b%e5%9c%a8%e5%8f%b3%e6%96%b9" rel="bookmark" title="2005/04/24">[Xuite] 加上Flash的時鐘顯示(範例在右方)</a> (8則留言, 2005/04/24)</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/685/%e6%9c%ac%e9%83%a8%e8%90%bd%e6%a0%bc%e7%9a%84%e9%80%a3%e7%b7%9a%e9%80%9f%e5%ba%a6%e5%95%8f%e9%a1%8c" rel="bookmark" title="2007/12/31">本部落格的連線速度問題</a> (1則留言, 2007/12/31)</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/547/%e7%94%a8%e6%a8%a3%e5%bc%8f%e6%8e%a7%e5%88%b6google-adsense%e5%bb%a3%e5%91%8a%e9%a1%af%e7%a4%ba%e7%9a%84%e4%bd%8d%e7%bd%ae" rel="bookmark" title="2007/05/03">用樣式控制Google AdSense廣告顯示的位置</a> (13則留言, 2007/05/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/513/%e5%b0%87%e9%83%a8%e8%90%bd%e6%a0%bc%e5%8a%a0%e4%b8%8a%e5%8b%95%e6%85%8b%e6%94%be%e5%a4%a7%e8%88%87%e7%b8%ae%e5%b0%8f%e5%ad%97%e9%ab%94%e5%a4%a7%e5%b0%8f%e7%9a%84%e5%8a%9f%e8%83%bd" rel="bookmark" title="2007/03/26">將部落格加上動態放大與縮小字體大小的功能</a> (3則留言, 2007/03/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/213/sites-hinet-%e3%80%8c%e6%88%91%e7%9a%84%e4%be%bf%e5%88%a9%e8%b2%bc%e3%80%8dv20-%e6%90%b6%e9%ae%ae%e8%a9%a6%e7%94%a8%e4%b8%ad" rel="bookmark" title="2005/05/18">[Sites] HiNet 「我的便利貼」V2.0 搶鮮試用中</a> (0則留言, 2005/05/18)</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/623/%e8%ae%8a%e6%9b%b4xuite%e5%9b%9e%e6%87%89%e7%9a%84%e6%8e%92%e5%88%97%e9%a0%86%e5%ba%8f" rel="bookmark" title="2007/09/17">變更Xuite回應的排列順序</a> (5則留言, 2007/09/17)</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/621/%e5%b7%a5%e5%85%b7-xuite%e4%ba%ba%e6%b0%a3%e7%b5%b1%e8%a8%88%e7%b6%b2%e9%a0%81" rel="bookmark" title="2007/09/16">[工具] Xuite人氣統計網頁</a> (5則留言, 2007/09/16)</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/177/xuite-%e8%87%aa%e7%94%b1%e6%ac%84%e4%bd%8d%e8%a8%ad%e5%ae%9a%e5%8a%9f%e8%83%bd%e5%95%9f%e7%94%a8" rel="bookmark" title="2005/04/14">[Xuite] 自由欄位設定功能啟用</a> (0則留言, 2005/04/14)</li> </ul> <p><!-- Similar Posts took 27.547 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">