页面

##EasyReadMore##

2012年5月3日星期四

捣鼓语法高亮

弄了半个早上和小半个下午,研究在blogger里弄个语法高亮的效果。
最后是照着Derrick Chen这篇博客介绍的方法完成的,他也是在blogger里用这个效果,说得很详细
http://sharedderrick.blogspot.com/2010/10/google-blogger-syntaxhighlighter-3083.html


简单说就是用SyntaxHighlighter 3.0.83,用Google协作平台 存储相关的文件。

一开始我用google code来存储文件,总是失败,似乎CSS会有问题,下载的时候认为是文本,估计不当成是程序;js则没有问题。如果js文件从google code读,css文件从google sites读,显示的效果就OK。

于是又弄了个google sites的号,把东西都搬上去,然后一导就搞定了。

sites应该干这个方便多了,批量上传,不像code我一个个导超麻烦。。。

四部走:
1.下载SyntaxHighlighter
2.找个地方把第二部需要的文件导进去(shCore.js是scripts文件夹里的)
3.在模板html里<head>后添加如下代码。
<!-- 载入样式 shCore.css 和 shThemeDefault.css -->

<link href="[你的存储位置]/shCore.css" rel="stylesheet" type="text/css"/>

<link href="[你的存储位置]/shThemeDefault.css" rel="stylesheet" type="text/css"/>

<!-- 载入核心js shCore.js -->

<script src="[你的存储位置]/shCore.js" type="text/javascript"/>

<!-- 载入各种语言的高亮js  -->

<script src='[你的存储位置]/shBrushCSharp.js' type='text/javascript'/>

<script src='[你的存储位置]/shBrushJScript.js' type='text/javascript'/>

<script src='[你的存储位置]/shBrushSql.js' type='text/javascript'/>

<script src='[你的存储位置]/shBrushVb.js' type='text/javascript'/>

<script src='[你的存储位置]/shBrushXml.js' type='text/javascript'/>

<!-- 设定启动 highlighter   -->

<script type="text/javascript">

SyntaxHighlighter.config.bloggerMode = true;

SyntaxHighlighter.all()

</script> 

4.使用的时候在博文的html里按如下格式写
<pre class="brush: 语言代号"> 

 codecodecodecode

</pre> 

各种语言代号可查Bundled Brushes

注意如果格式本身就是html的最好文本写到“撰写”里,再点HTML让它自己转下格式;最后的效果要发布或者预览才看到

4步走基本就是把德瑞克的博文重说了一遍了。。。

没有评论:

发表评论