如果找不到簡單好用的程式碼高亮顯示工具的話，那不仿來試試 Snippet。目前內建支援 15 種程式語言，若有需要的話還能依 SHJS 規則來加入自訂的設定。
套件名稱：Snippet
套件版本：2.0.0
作者網站：http://www.steamdev.com/snippet/
套件網址：N/A
發佈日期：2011-01-19
檔案大小：78.8 KB
檔案下載：jquery.snippet.js jquery.snippet.css
參數說明：
檢視原始碼 JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 | language(選填) 描述： 指定高亮顯示的語言；內建的有：c, cpp, csharp, css, flex, html, java, javascript, javascript_dom, perl, php, python, ruby, sql 及 xml 等 預設值： 無 style(選填) 描述： 區塊套用的樣式；允許的值有：'acid', 'berries-dark', 'berries-light', 'bipolar', 'blacknblue', 'bright', 'contrast', 'darkblue', 'darkness', 'desert', 'dull', 'easter', 'emacs', 'golden', 'greenlcd', 'ide-anjuta', 'ide-codewarrior', 'ide-devcpp', 'ide-eclipse', 'ide-kdev', 'ide-msvcpp', 'kwrite', 'matlab', 'navy', 'nedit', 'neon', 'night', 'pablo', 'peachpuff', 'print', 'rand01', 'the', 'typical', 'vampire', 'vim', 'vim-dark', 'whatis', 'whitengrey' 及 'zellner' 預設值： 'random' showNum(選填) 描述： 是否顯示行號 預設值： true transparent(選填) 描述： 區塊是否套用背景顏色 預設值： false collapse(選填) 描述： 區塊是否允許縮小 預設值： false menu(選填) 描述： 是否提供右上角的功能選項；例如：copy 預設值： true showMsg(選填) 描述： 當 collapse 為 true 且區塊為縮小狀態時顯示的提示內容 預設值： "Expand Code" hideMsg(選填) 描述： 當 collapse 為 true 且區塊為展開狀態時顯示的提示內容 預設值： "Collapse Code" clipboard(選填) 描述： 提供跨瀏覽器用的複製 swf 路徑：應為 "path/to/ZeroClipboard.swf" 預設值： "" startCollapsed(選填) 描述： 一開始區塊是否縮小；要 collapse 為 true 時才有作用 預設值： true startText(選填) 描述： 一開始時只是一般文字內容 預設值： false box(選填) 描述： 可指定行數來加上邊框；例如 "4,5-10" 預設值： "" boxColor(選填) 描述： 若有指定 box 時，則能設定該行的邊框顏色 預設值： "" boxFill(選填) 描述： 若有指定 box 時，則能設定該行的背景顏色 預設值： "" |
方法說明：
檢視原始碼 JavaScript
1 2 | // 在指定的區塊套用依指定的 language 來高亮顯示 $(selector).snippet(language, settings); |
使用範例：
檢視原始碼 JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 | <script type="text/javascript" src="jquery.js"></script> <link type="text/css" rel="stylesheet" href="jquery.snippet.css"> <script type="text/javascript" src="jquery.snippet.js"></script> <style type="text/css"> pre { width: 500px; } </style> <script type="text/javascript"> $(function(){ // pre.js 使用 JavaScript 高亮顯示 $('pre.js').snippet('javascript', { style: 'darkblue' }); // pre.html 使用 HTML 高亮顯示 // 並且不顯示行號 $('pre.html').snippet('html', { style: 'easter', showNum: false }); // pre.css 使用 CSS 高亮顯示 $('pre.css').snippet('css', { style: 'berries-dark' }); // pre.php 使用 PHP 高亮顯示 $('pre.php').snippet('php', { style: 'golden' }); }); </script> <body> <h2>JavaScript</h2> < pre class="js"> $(function(){ // pre.js 使用 JavaScript 高亮顯示 $('pre.js').snippet('javascript', { style: 'darkblue' }); // pre.html 使用 HTML 高亮顯示 // 並且不顯示行號 $('pre.html').snippet('html', { style: 'easter', showNum: false }); // pre.css 使用 CSS 高亮顯示 $('pre.css').snippet('css', { style: 'berries-dark' }); // pre.php 使用 PHP 高亮顯示 $('pre.php').snippet('php', { style: 'golden' }); }); < /pre> <h2>HTML</h2> < pre class="html"> <h1>Snippet style selector</h1> <div class="instructions"> <p>Choose your style below.</p> <p>Preview your style here.</p> </div> <!-- 39 styles to choose from! --> < /pre> <h2>CSS</h2> < pre class="css"> body #main p.navy { text-decoration: none; color: navy; font-family: arial; /* font-size: 12pt; */ font-size: 14px; font-weight: medium; } < /pre> <h2>PHP</h2> < pre class="php"> <?php session_start(); if(!$_SESSION['logged']){ header("Location: login_page.php"); exit; } echo 'Welcome, '.$_SESSION['username']; ?> < /pre> </body> |