在 Blogger 中使用 dp.SyntaxHighlighter 显示程式码
db.SyntaxHighlighter 是一支不错的程式码高亮度显示程式，特点为:
- 显示行号
- 支援12种程式语言
- 模组化加载需要的程式语言
- 支援 “<pre>” 及 “<textarea>” 区块
- 纯文字检视
- 复制到剪贴簿
- 直接打印程式码
缺点就是加载速度较慢。
安装步骤
- 修改 blogger 样板，搜寻 “</body>”，在 “上方” 加入(你可以选择你要的语言加载即可):
<script class='javascript' src='http://syntaxhighlighter.googlecode.com/svn/tags/1.5.0/Scripts/shCore.js'></script> <script class='javascript' src='http://syntaxhighlighter.googlecode.com/svn/tags/1.5.0/Scripts/shBrushPhp.js'></script> <script class='javascript' src='http://syntaxhighlighter.googlecode.com/svn/tags/1.5.0/Scripts/shBrushJScript.js'></script> <script class='javascript' src='http://syntaxhighlighter.googlecode.com/svn/tags/1.5.0/Scripts/shBrushSql.js'></script> <script class='javascript' src='http://syntaxhighlighter.googlecode.com/svn/tags/1.5.0/Scripts/shBrushXml.js'></script> <script class='javascript' src='http://syntaxhighlighter.googlecode.com/svn/tags/1.5.0/Scripts/shBrushDelphi.js'></script> <script class='javascript' src='http://syntaxhighlighter.googlecode.com/svn/tags/1.5.0/Scripts/shBrushPython.js'></script> <script class='javascript' src='http://syntaxhighlighter.googlecode.com/svn/tags/1.5.0/Scripts/shBrushRuby.js'></script> <script class='javascript' src='http://syntaxhighlighter.googlecode.com/svn/tags/1.5.0/Scripts/shBrushCss.js'></script> <script class='javascript' src='http://syntaxhighlighter.googlecode.com/svn/tags/1.5.0/Scripts/shBrushCpp.js'></script> <script class='javascript'> dp.SyntaxHighlighter.ClipboardSwf = 'http://syntaxhighlighter.googlecode.com/svn/tags/1.5.0/Scripts/clipboard.swf'; dp.SyntaxHighlighter.HighlightAll('code'); </script>(因为 “偷吃步” 的关系，程式直接连到 dp.SyntaxHighlighter 的 SVN 上，你可以视情况下载回来放到自己的服务器)
- dp.SyntaxHighlighter 原本已经有一个 CSS 档了，但如果将这个 CSS 档以 “Link” 的方式加载，却无法正常显示。所以，请自行增加下列 CSS 到 blogger 样板的 CSS 区段:
/*dp.highlighter*/ .dp-highlighter { font-family: "Consolas", "Courier New", Courier, mono; font-size: 12px; background-color: #E7E5DC; width: 99%; overflow: auto; margin: 18px 0px 18px 0px; padding-top: 1px; /* adds a little border on top when controls are hidden */ border:1px inset; max-height:200px; } .dp-highlighter .bar { padding-left: 45px; } .dp-highlighter.collapsed .bar, .dp-highlighter.nogutter .bar { padding-left: 0px; } .dp-highlighter ol { list-style: decimal; /* for ie */ list-style: decimal-leading-zero; /* better look for others */ background-color: #fff; margin: 0px 0px 1px 45px; /* 1px bottom margin seems to fix occasional Firefox scrolling */ padding: 0px; color: #5C5C5C; } .dp-highlighter.nogutter ol { list-style-type: none !important; margin-left: 0px; } .dp-highlighter ol li, .dp-highlighter .columns div { border-left: 3px solid #6CE26C; background-color: #f8f8f8; padding-left: 10px; line-height: 14px; } .dp-highlighter.nogutter ol li, .dp-highlighter.nogutter .columns div { border: 0; } .dp-highlighter .columns { color: gray; overflow: hidden; width: 100%; } .dp-highlighter .columns div { padding-bottom: 5px; } .dp-highlighter ol li.alt { background-color: #fff; } .dp-highlighter ol li span { color: Black; } /* Adjust some properties when collapsed */ .dp-highlighter.collapsed ol { margin: 0px; } .dp-highlighter.collapsed ol li { display: none; } /* Additional modifications when in print-view */ .dp-highlighter.printing { border: none; } .dp-highlighter.printing .tools { display: none !important; } .dp-highlighter.printing li { display: list-item !important; } /* Styles for the tools */ .dp-highlighter .tools { padding: 3px 8px 3px 10px; font: 9px Verdana, Geneva, Arial, Helvetica, sans-serif; color: silver; background-color: #f8f8f8; text-align1: right; padding-bottom: 10px; border-left: 3px solid #6CE26C; } .dp-highlighter.nogutter .tools { border-left: 0; } .dp-highlighter.collapsed .tools { border-bottom: 0; } .dp-highlighter .tools a { font-size: 9px; color: #a0a0a0; text-decoration: none; margin-right: 10px; } .dp-highlighter .tools a:hover { color: red; text-decoration: underline; } /* About dialog styles */ .dp-about { background-color: #fff; margin: 0px; padding: 0px; } .dp-about table { width: 100%; height: 100%; font-size: 11px; font-family: Tahoma, Verdana, Arial, sans-serif !important; } .dp-about td { padding: 10px; vertical-align: top; } .dp-about .copy { border-bottom: 1px solid #ACA899; height: 95%; } .dp-about .title { color: red; font-weight: bold; } .dp-about .para { margin: 0 0 4px 0; } .dp-about .footer { background-color: #ECEADB; border-top: 1px solid #fff; text-align: right; } .dp-about .close { font-size: 11px; font-family: Tahoma, Verdana, Arial, sans-serif !important; background-color: #ECEADB; width: 60px; height: 22px; } /* Language specific styles */ .dp-highlighter .comment, .dp-highlighter .comments { color: #008200; } .dp-highlighter .string { color: blue; } .dp-highlighter .keyword { color: #069; font-weight: bold; } .dp-highlighter .preprocessor { color: gray; } - 储存即可
使用方法
- 方法一 - 使用 “<textarea>” 区块，需将 “&” 转换为 “&”:
<textarea name="code" class="程式语言"> 程式码 </textarea>
- 方法二 - 使用 “<pre>” 区块，需将 “&” 转换为 “&”、”<” 转换为 “<”、”>” 转换为 “>”:
<pre name="code" class="程式语言"> 程式码 </pre>
No comments yet.