最后是照着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步走基本就是把德瑞克的博文重说了一遍了。。。
没有评论:
发表评论