SyntaxHighlighter是一款用于web页面的代码着色工具，可以用来着色多种语言。今天我们通过实例来学习一下它的用法。旧同桌不是老情人，但与你分享过的青春不比初恋少半分。
SyntaxHighlighter的简单实例
一、SyntaxHighlighter的代码流程如下
1、Add base files to your page: shCore.js and shCore.css 2、Add brushes that you want (for example, shBrushJScript.js for JavaScript, see the list of all available brushes) 3、Include shCore.css and shThemeDefault.css 4、Create a code snippet with either <pre /> or <script /> method 5、Call SyntaxHighlighter.all() JavaScript method
使用的方式可以参考文档：http://alexgorbatchev.com/SyntaxHighlighter/manual/installation.html
jar包的下载地址： https://codeload.github.com/syntaxhighlighter/syntaxhighlighter/zip/3.0.83
二、建立一个index.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="../third/SyntaxHighlighter/css/shCore.css">
<link rel="stylesheet" type="text/css" href="../third/SyntaxHighlighter/css/shThemeDefault.css">
</head>
<body>
<pre name="code" class="brush: java">
public class Person {
}
</pre>
<pre name="code" class="brush: js; gutter: false;">
function foo() {
var i = 3;
}
</pre>
<pre class="brush: java; collapse: true;">
public void javaMethod() {
int i = 3;
}
</pre>
<script type="syntaxhighlighter" class="brush: js">
<![CDATA[
/**
* SyntaxHighlighter
*/
function foo() {
if (counter <= 10)
return;
// it works!
}
]]>
</script>
<script type="text/javascript" src="../third/SyntaxHighlighter/js/XRegExp.js"></script>
<script type="text/javascript" src="../third/SyntaxHighlighter/js/shCore.js"></script>
<script type="text/javascript" src="../third/SyntaxHighlighter/js/shBrushJava.js"></script>
<script type="text/javascript" src="../third/SyntaxHighlighter/js/shBrushJScript.js"></script>
<script type="text/javascript" src="../third/SyntaxHighlighter/js/shBrushSql.js"></script>
<script type="text/javascript">
SyntaxHighlighter.all()
</script>
</body>
</html>
三、显示的效果如下所示
具体的一些配置情况，可以参考：http://alexgorbatchev.com/SyntaxHighlighter/manual/configuration/
如果要换一种主题，可以在html中替换到默认的主题。比如使用shThemeRDark。
<link rel="stylesheet" type="text/css" href="../third/SyntaxHighlighter/css/shCore.css"> <link rel="stylesheet" type="text/css" href="../third/SyntaxHighlighter/css/shThemeRDark.css">
替换后显示的效果如下：
至于动态的通过代码来实现切换主题功能，不知道框架的代码中有没有配置。后续再做补充
四、关于其它的一些的问题
SyntaxHighlighter lets you build a single .js file that will include the core, CSS theme and the syntaxes that you wish to use.就是说通过工具的构建，可以将SyntaxHighlighter 一些需要在项目中引入的js, css打包成一个js文件。
链接：https://github.com/syntaxhighlighter/syntaxhighlighter/wiki/Building
以下是一些默认的配置和设置，可以在代码中修改。
/**
* 1、整体可以修改默认的设置：SyntaxHighlighter.config.attrName，SyntaxHighlighter.highlight.attrName。
* 2、也可以上述所使用的那样，在html中修改属性值。<pre name="code" class="brush: js; gutter: false;">
*/
defaults : {
/** Additional CSS class names to be added to highlighter elements. */
‘class-name‘ : ‘‘,
/** First line number. */
‘first-line‘ : 1,
/**
* Pads line numbers. Possible values are:
*
* false - don‘t pad line numbers.
* true - automaticaly pad numbers with minimum required number of leading zeroes.
* [int] - length up to which pad line numbers.
*/
‘pad-line-numbers‘ : false,
/** Lines to highlight. */
‘highlight‘ : null,
/** Title to be displayed above the code block. */
‘title‘ : null,
/** Enables or disables smart tabs. */
‘smart-tabs‘ : true,
/** Gets or sets tab size. */
‘tab-size‘ : 4,
/** Enables or disables gutter. */
‘gutter‘ : true,
/** Enables or disables toolbar. */
‘toolbar‘ : true,
/** Enables quick code copy and paste from double click. */
‘quick-code‘ : true,
/** Forces code view to be collapsed. */
‘collapse‘ : false,
/** Enables or disables automatic links. */
‘auto-links‘ : true,
/** Gets or sets light mode. Equavalent to turning off gutter and toolbar. */
‘light‘ : false,
‘html-script‘ : false
},
config : {
space : ‘ ‘,
/** Enables use of <SCRIPT type="syntaxhighlighter" /> tags. */
useScriptTags : true,
/** Blogger mode flag. */
bloggerMode : false,
stripBrs : false,
/** Name of the tag that SyntaxHighlighter will automatically look for. */
tagName : ‘pre‘,
strings : {
expandSource : ‘expand source‘,
help : ‘?‘,
alert: ‘SyntaxHighlighter\n\n‘,
noBrush : ‘Can\‘t find brush for: ‘,
brushNotHtmlScript : ‘Brush wasn\‘t configured for html-script option: ‘,
// this is populated by the build script
aboutDialog : ‘@[email protected]‘
}
},
友情链接
时间： 2024-10-25 21:16:42