手机端小强原创文章,java小强个人博客站点
当前位置: 首页 >> 站长 >> 实用SyntaxHighlighter高亮你的博客代码

实用SyntaxHighlighter高亮你的博客代码

8741 站长 | 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高亮你的博客代码

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

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

猜你喜欢

发表评论:

评论:

回复 bandwagonhost 评论于 2016-03-21 17:40
直接使用CODE样式手工或者用WP的插件。
个人资料
blogger

java小强
没有思考,人生的路会越走越难!

搜索
百度推荐
分类
百度推荐
最新文章
搜狗推荐
热门文章
百度推荐
随机文章