软讯网络 > 软件时空 > 软件相关 > 在 cublog 中应用 CSS 进行语法高亮

【标题】：在 cublog 中应用 CSS 进行语法高亮
【关键字】：cublog,CSS
【来源】：http://www.cublog.cn/u/23408/showart.php?id=248142

在 cublog 中应用 CSS 进行语法高亮

last-edit-by: lungangfang 02-17-2007 12:01>

终于给自己的 blog 加上代码高亮了，挖哈哈！

我现在都用 Emacs Muse 写 blog，发布成 html 页面时，其中的代码就自动高亮了。我选择的是单独 CSS 文件，这样更换界面风格方便：把 CSS 文件一改就行了。但是把这些页面复制到 cublog 上后，因为没有相应的 CSS 定义，所有的高亮就都没了。

其实给 cublog 加上 CSS 很简单，就是普通的 XSLT 修改。对 cublog 来讲有点小遗憾，就是不能选择新的 html 模板，必须选择原来的 XSLT 模板来定制。具体步骤如下：

在 blog 的 “控制面板 -> 选择模板 -> XLST 模板” 中选择一个模板并保存。
点击左上角的 “自定义模板”，再选中“显示高级自定义”。这时会出来“首页”、“文章”、“正文”等选项。点击“正文”就会出来一个 XSLT 的编辑框。

编辑这个 XSLT 模板，加入你的 CSS 并保存即可。

注意不能像在 html 源码中一样把 CSS 作为注释。我没学过 XSLT，一开始就犯了这个错, 搞得莫名其妙的。

以下是我所作的修改：

在代码:

<head>
<meta http-equiv='Content-Type' content='text/html; charset=gb2312' />

<link rel='stylesheet' href='../../templates/tech/index.css'></link>

之后加上如下 CSS 代码：

<style type="text/css">
      .src, .example {
        padding: 10px;
        border: 1px solid;
      }

      .comment {
        /* font-lock-comment-face */
        color: #b22222;
      }
      .constant {
        /* font-lock-constant-face */
        color: #5f9ea0;
      }
      .function-name {
        /* font-lock-function-name-face */
        color: #0000ff;
      }
      .keyword {
        /* font-lock-keyword-face */
        color: #a020f0;
      }
      .preprocessor {
        /* font-lock-preprocessor-face */
        color: #5f9ea0;
      }
      .string {
        /* font-lock-string-face */
        color: #bc8f8f;
      }
      .type {
        /* font-lock-type-face */
        color: #228b22;
      }
      .variable-name {
        /* font-lock-variable-name-face */
        color: #b8860b;
      }

      .warning {
        /* font-lock-warning-face */
        color: #ff0000;
        font-weight: bold;
      }
</style>