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

实用SyntaxHighlighter高亮你的博客代码

12071 站长 | 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小强
没有思考,人生的路会越走越难!

搜索
分类
最新微语
  • 今日北京再次沙尘暴来袭,吃了几年细粮,终于能来口粗粮了,不过大早上看见这场景,还是吓我一跳,不过随后就平静了,毕竟是老朋友了。进公司又发现一股烤糊的味道,真是祸不单行啊,例外都是污染。发了两个口罩,开启保护模式。

    2017-05-04 10:16

  • 今天同学问我,最近还在写代码吗?我想了想,这个问题怎么回答呢,我好像确实很长时间,虽然写了一些,但是主要内容已经不是写代码了。然后再想想,自己也7年多了,这么多年了,我收获了什么,我的目标到底是什么。眼看就奔三了,人生啊,开启感叹模式。

    2017-03-30 22:52

  • 也许大家都已经注意到了,今年的房价,好多地方都是翻了一番,跟着就是,各地房东开始变相涨租。今年之所以搬走,就是为此,这两天同学也是如此。很多房东只认钱,别谈感情,伤钱。而对于这个城市来说,你怎么定位自己,你真把自己当成她的一份子?你来此为何?将来何去何从?自己掂量清楚。

    2016-12-05 10:03

  • 为什么一直不写了呢?因为当爸爸了,没空了。今年的冬天,有些寒冷,除了这寒冬带来的不适,更有因乐视公司遇到危机,而带来的同事别离。送别同事,看着空旷的工位,心中有些悲凉。临近年关,此时此刻,该怎么做,似乎不再是脑子一热那么简单了。

    2016-11-24 11:28

  • 已经请假,加上国庆,要很长一段时间不在北京了。919加班,搞的现在有点心累,胸闷,身体不适。看来,我要好好休息一下了。这几天有些冷,2016的冬天,一步步来了,各位亲友,记得添衣加粗啊。

    2016-09-23 17:29

  • 更多»

最新文章
热门文章
随机文章