实用SyntaxHighlighter高亮你的博客代码

83672 站长 | 2016-3-10

作为一个技术博客，博文中显示代码是常用的事情了，同时，让代码高亮起来，使得让网友看博客更加便捷。

SyntaxHighlighter是一个使用JavaScript编写的功能齐全的代码语法高亮的软件。

SyntaxHighlighter is currently used byApache,Aptana,Mozilla,Yahoo,Wordpress,Bug Labs,Freshbooksandothers。

详细：http://alexgorbatchev.com/SyntaxHighlighter/ 

因为SyntaxHighlighter需要引入大量JS文件，如果你的站点建立在自己的主机上，不得不担心大量引入JS带来的烦恼，这里我也通过百度静态资源公共库来引入所需要的JS文件了。

百度静态资源公共库：http://cdn.code.baidu.com/ 

<script type="text/javascript" src="http://apps.bdimg.com/libs/SyntaxHighlighter/3.0.83/scripts/shCore.min.js"></script>
<script type="text/javascript" src="http://apps.bdimg.com/libs/SyntaxHighlighter/3.0.83/scripts/shAutoloader.min.js"></script>
<script type="text/javascript" src="http://apps.bdimg.com/libs/SyntaxHighlighter/3.0.83/scripts/shBrushAS3.min.js"></script>
<script type="text/javascript" src="http://apps.bdimg.com/libs/SyntaxHighlighter/3.0.83/scripts/shBrushAppleScript.min.js"></script>
<script type="text/javascript" src="http://apps.bdimg.com/libs/SyntaxHighlighter/3.0.83/scripts/shBrushBash.min.js"></script>
<script type="text/javascript" src="http://apps.bdimg.com/libs/SyntaxHighlighter/3.0.83/scripts/shBrushCSharp.min.js"></script>
<script type="text/javascript" src="http://apps.bdimg.com/libs/SyntaxHighlighter/3.0.83/scripts/shBrushColdFusion.min.js"></script>
<script type="text/javascript" src="http://apps.bdimg.com/libs/SyntaxHighlighter/3.0.83/scripts/shBrushCpp.min.js"></script>
<script type="text/javascript" src="http://apps.bdimg.com/libs/SyntaxHighlighter/3.0.83/scripts/shBrushCss.min.js"></script>
<script type="text/javascript" src="http://apps.bdimg.com/libs/SyntaxHighlighter/3.0.83/scripts/shBrushDelphi.min.js"></script>
<script type="text/javascript" src="http://apps.bdimg.com/libs/SyntaxHighlighter/3.0.83/scripts/shBrushDiff.min.js"></script>
<script type="text/javascript" src="http://apps.bdimg.com/libs/SyntaxHighlighter/3.0.83/scripts/shBrushErlang.min.js"></script>
<script type="text/javascript" src="http://apps.bdimg.com/libs/SyntaxHighlighter/3.0.83/scripts/shBrushGroovy.min.js"></script>
<script type="text/javascript" src="http://apps.bdimg.com/libs/SyntaxHighlighter/3.0.83/scripts/shBrushJScript.min.js"></script>
<script type="text/javascript" src="http://apps.bdimg.com/libs/SyntaxHighlighter/3.0.83/scripts/shBrushJava.min.js"></script>
<script type="text/javascript" src="http://apps.bdimg.com/libs/SyntaxHighlighter/3.0.83/scripts/shBrushJavaFX.min.js"></script>
<script type="text/javascript" src="http://apps.bdimg.com/libs/SyntaxHighlighter/3.0.83/scripts/shBrushPerl.min.js"></script>
<script type="text/javascript" src="http://apps.bdimg.com/libs/SyntaxHighlighter/3.0.83/scripts/shBrushPhp.min.js"></script>
<script type="text/javascript" src="http://apps.bdimg.com/libs/SyntaxHighlighter/3.0.83/scripts/shBrushPlain.min.js"></script>
<script type="text/javascript" src="http://apps.bdimg.com/libs/SyntaxHighlighter/3.0.83/scripts/shBrushPowerShell.min.js"></script>
<script type="text/javascript" src="http://apps.bdimg.com/libs/SyntaxHighlighter/3.0.83/scripts/shBrushPython.min.js"></script>
<script type="text/javascript" src="http://apps.bdimg.com/libs/SyntaxHighlighter/3.0.83/scripts/shBrushRuby.min.js"></script>
<script type="text/javascript" src="http://apps.bdimg.com/libs/SyntaxHighlighter/3.0.83/scripts/shBrushSass.min.js"></script>
<script type="text/javascript" src="http://apps.bdimg.com/libs/SyntaxHighlighter/3.0.83/scripts/shBrushScala.min.js"></script>
<script type="text/javascript" src="http://apps.bdimg.com/libs/SyntaxHighlighter/3.0.83/scripts/shBrushSql.min.js"></script>
<script type="text/javascript" src="http://apps.bdimg.com/libs/SyntaxHighlighter/3.0.83/scripts/shBrushVb.min.js"></script>
<script type="text/javascript" src="http://apps.bdimg.com/libs/SyntaxHighlighter/3.0.83/scripts/shBrushXml.min.js"></script>
<script type="text/javascript" src="http://apps.bdimg.com/libs/SyntaxHighlighter/3.0.83/scripts/shLegacy.min.js"></script>

<link type="text/css" rel="stylesheet" href="http://apps.bdimg.com/libs/SyntaxHighlighter/3.0.83/styles/shCore.min.css"/>
<link type="text/css" rel="stylesheet" href="http://apps.bdimg.com/libs/SyntaxHighlighter/3.0.83/styles/shCoreDefault.min.css"/>

<script type="text/javascript">
	SyntaxHighlighter.all();
</script>

实用方式很简单，引入JS，CSS，渲染。

此时将你的代码放在以下的内容块里面

<pre class="brush: javascript;"></pre>

上面指定按照JS代码进行渲染，那么就会按照JS规则进行高亮渲染。

推荐您阅读更多有关于“ 博客 SyntaxHighlighter 代码高亮 代码 百度静态资源公共库 ”的文章

上一篇：Solr-在Tomcat上安装Solr 下一篇：百度联盟内文广告和SyntaxHighlighter冲突

猜你喜欢

• 3-10HTTP POST数据和数据接收
• 3-10常用SpringJPA主键生成策略，UUID和自增
• 3-10Apache Commons Jar包下载
• 3-10IIS服务器返回Bad Request (Invalid Hostname)解决办法
• 3-10SpringJPA 慎重 findAll() 切记分页

评论：