也许喜欢怀念你: 如何在blooger中使用代码着色

作为一个追求的程序员，在博客中添加点程序代码是常有的事情。但是如何使我们的代码在浏览器中用html显示的时候仍然同在IDE中那样看起来有高亮，有特定语言的关键字显示呢，这个就是一个代码语言高亮或代码着色的事情了。

上网查找了相关资料之后，找到一个开源的，叫SyntaxHighter,使用JavaScript编写的，对我们使用blogger的来说，那是最好不过了，原因嘛，如下.

blogger支持用户使用自己的JavaSript(这一点，国内的博客，我感觉应该支持的不多)
作为没有独立空间，独立域名的我们小小用户，我们没有地方存放那些Javascript和CSS文件，细心的SyntaxHighter都已经帮我们提供了，他们提供一个网上版本,host version。我使用的是里边的current版本。

具体的用法嘛，也很简单。网站上有很简洁的说明。

总的来说是分成这么几步

在你的html的head之间添加如需要用到的js和css文件
在head中用js调用SyntaxHighter.all()
在具体的地方插入你需要高亮着色的代码，一般放在pre节点之间


<html>
 <head>
  <link type="text/css" rel="stylesheet" href="/styles/shCore.css" />
  <link type="text/css" rel="stylesheet" href="/styles/shThemeDefault.css" />
  <script type="text/javascript" src="/scripts/shCore.js"></script>
  <script type="text/javascript" src="/scripts/shBrushJScript.js"></script>
  <script type="text/javascript" src="/scripts/shBrushBash.js"></script>
  <script type="text/javascript" src="/scripts/shBrushCpp.js"></script>
  <script type="text/javascript">
   SyntaxHighlighter.all();
  </script>
 </head>

 ...

这里js和css的地址使用网上提供的那个地址代替，或者你自己网上存放js和css的地址代替。

加入js和css文件之后，我们要做的就是，在需要代码着色的地方添加我们自己的代码，像这样子：


<pre class="brush: js">
 alert("Hello world");
</pre>

这里的class有各种语言可以选择，想java，cpp，python，html等都支持。

到这里，所有和SyntaxHighter相关的都已经报告完毕了，接下来要说的，所如何添加到blogger中，打开blogger的布局视图，修改html，在head之间加入上面的代码.(head允许我们自己写些js函数)
另外在js中添加一句话来表明我们是在blogger中使用。


SyntaxHighter.config.bloggerMode=true;

好了，大功告成。

也许喜欢怀念你

2009年3月15日星期日

如何在blooger中使用代码着色

没有评论: