SyntaxHighLighter：最流行的轻量级WordPress代码高亮

文章目录[隐藏]

前言
第一步
第二步
第三步
最后效果
后语

SyntaxHighLighter 代码高亮的在线工具+代码方法

前言

[v_organge]代码高亮的方法有很多，今天云落介绍一个基于 SyntaxHighLighter 的代码高亮方法，其实很简单，主要就是基于浏览器用样式给代码进行着色[/v_organge]

第一步

首先进入这个代码高亮在线工具

http://gaoliang.lanbing.org/my.php

选择一个自己喜欢的样式，比如我选的就是 MDUltra 样式，为了加快速度，我们最好把这个样式文件下载到本地，反正我是下载了

<link rel='stylesheet' type='text/css' href='http://gaoliang.lanbing.org/styles/shCoreDefault.css'/>

将这个样式链接放在 single.php 里面，具体链接换成你自己的。样式方面就 OK 了。

第二步

进入在线工具网站，将代码贴进去，选择语言，选择生成 HTML，因为行号有点问题，所以不要选，然后选择自己的代码样式，然后高亮。

第三步

全选自动生成的 HTML，然后粘贴在 WordPress 编辑框，就可以了。

最后效果

PHP

//fancybox 图片灯箱效果
add_filter('the_content', 'fancybox');
function fancybox ($content)
{ global $post;
$pattern = "/<a(.*?)href=('|")([^>]*).(bmp|gif|jpeg|jpg|png|swf)('|")(.*?)>(.*?)</a>/i";
$replacement = '<a$1href=$2$3.$4$5 rel="box" class="fancybox"$6>$7</a>';
$content = preg_replace($pattern, $replacement, $content);
return $content;
}

javascript

document.onmouseup = function(event) {
  if (event.which !== 1) {
    return;
  }
  if (GetOpt('Ctrl_st') && !event.ctrlKey) {
    return;
  }
  popData.lxe = event;
  return setTimeout(ShowBar, 10);
};

CSS

/* AGENT_SHEET */
@namespace html url(http://www.w3.org/1999/xhtml);
@namespace xul url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
 
/*----- SITES TO EXCLUDE -----*/
@-moz-document regexp("https?://(?!(www.your.sites.here.com|forum.example.com)).*"), url-prefix(ftp://), url-prefix(about), url-prefix(javascript) { html {background: 
 
 
     /***** COPY AND PASTE THE URL OF YOUR BACKROUND-IMAGE INSIDE THE "": *****/