SyntaxHighlighter: http://alexgorbatchev.com/SyntaxHighlighter/download/
demo

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" > < html xmlns ="http://www.w3.org/1999/xhtml" xml:lang ="en" lang ="en" > < head > < meta http-equiv ="Content-Type" content ="text/html; charset=UTF-8" /> < title > Hello SyntaxHighlighter </ title > < link type ="text/css" rel ="stylesheet" href ="styles/shCore.css" /> < link type ="text/css" rel ="stylesheet" href ="styles/shThemeDefault.css" /> < script type ="text/javascript" src ="scripts/shCore.js" ></ script > < script type ="text/javascript" src ="scripts/shAutoloader.js" ></ script > <!-- for html-script --> < script type ="text/javascript" src ="scripts/shBrushXml.js" ></ script > < script type ="text/javascript" src ="scripts/shBrushJScript.js" ></ script > <!-- for class-name --> < script type ="text/javascript" src ="scripts/shBrushCss.js" ></ script > < script type ="text/javascript" > function path() { var args = arguments, result = []; for ( var i = 0 ; i < args.length; i ++ ) result.push(args[i].replace( ' @ ' , ' /scripts/ ' )); return result }; SyntaxHighlighter.config.strings.help = "" ; SyntaxHighlighter.config.strings.expandSource = " + view code " ; /* SyntaxHighlighter.autoloader.apply(null, path( 'applescript @shBrushAppleScript.js', 'actionscript3 as3 @shBrushAS3.js', 'bash shell @shBrushBash.js', 'coldfusion cf @shBrushColdFusion.js', 'cpp c @shBrushCpp.js', 'c# c-sharp csharp @shBrushCSharp.js', 'css @shBrushCss.js', 'delphi pascal @shBrushDelphi.js', 'diff patch pas @shBrushDiff.js', 'erl erlang @shBrushErlang.js', 'groovy @shBrushGroovy.js', 'java @shBrushJava.js', 'jfx javafx @shBrushJavaFX.js', 'js jscript javascript @shBrushJScript.js', 'perl pl @shBrushPerl.js', 'php @shBrushPhp.js', 'text plain @shBrushPlain.js', 'py python @shBrushPython.js', 'powershell ps posh @shBrushPowerShell.js', 'ruby rails ror rb @shBrushRuby.js', 'sass scss @shBrushSass.js', 'scala @shBrushScala.js', 'sql @shBrushSql.js', 'vb vbnet @shBrushVb.js', 'xml xhtml xslt html @shBrushXml.js' )); */ SyntaxHighlighter.all(); </ script > </ head > < body style ="background: white; font-family: Helvetica" > < div > toolbar:? </ div > < div > collapse: 折叠 </ div > < div > gutter: 行号 </ div > < div > first-line: 行号从多少开始 </ div > < div > highlight 高亮行 </ div > < div > html-script: 包含html、script 貌似要加载shBrushXml </ div > < div > quick-code: 双击复制 </ div > < h1 > Hello SyntaxHighlighter </ h1 > < pre class ="brush:js; toolbar:false; gutter:false; quick-code:true;" > function helloSyntaxHighlighter() { return "hi!"; } </ pre > < pre class ="brush:js; html-script:true; collapse:true; highlight:[2,4]; first-line:2;" > function helloSyntaxHighlighter() { return "hi!"; } < div style ="color:red;" > test </ div > </ pre > </ html >