Dean’s FCKEditor For WordPress 3.31编辑器中加入WP-Syntax代码高亮快速添加

最近用wordpress新建了一个博客，记录一些生活的点点滴滴。对于我来说wordpress是一个陌生的程序。

我在写博文的时候偶尔会加一些代码进去。一天，一个朋友在QQ上说。你怎么不让代码以高亮的方式展现呢。这样看都没发看清楚。于是乎我在网上搜了一下最后还是觉得用WP-Syntax这个插件。这个插件唯一不好的地方就是每次都要手动去源码中加标签。这样很不方便。网上逛了一阵，发现并没有最新版 的两个插件的整合实例。

   呵呵，还是自己动手，丰衣足食。在网上看过一些老的例子，是利用快捷样式下拉来实现。呵呵，借鉴一下，我也这么做得了。经过一番努力，最后终于搞定了。

步凑只有二个：

首先找到：

wp-content/plugins/fckeditor-for-wordpress-plugin/ckeditor/plugins/stylescombo/styles/default.js

然后将里面的代码替换为以下内容：

CKEDITOR.addStylesSet('default',[{name:'Blue Title',element:'h3',styles:{color:'Blue'}},{name:'php',element:'pre',attributes:{lang:'php',line:'1',escaped:'true'}},{name:'html',element:'pre',attributes:{lang:'html',line:'1',escaped:'true'}},{name:'css',element:'pre',attributes:{lang:'css',line:'1',escaped:'true'}},{name:'javascript',element:'pre',attributes:{lang:'javascript',line:'1',escaped:'true'}},{name:'sql',element:'pre',attributes:{lang:'sql',line:'1',escaped:'true'}},{name:'Red Title',element:'h3',styles:{color:'Red'}},{name:'Marker: Yellow',element:'span',styles:{'background-color':'Yellow'}},{name:'Marker: Green',element:'span',styles:{'background-color':'Lime'}},{name:'Big',element:'big'},{name:'Small',element:'small'},{name:'Typewriter',element:'tt'},{name:'Computer Code',element:'code'},{name:'Keyboard Phrase',element:'kbd'},{name:'Sample Text',element:'samp'},{name:'Variable',element:'var'},{name:'Deleted Text',element:'del'},{name:'Inserted Text',element:'ins'},{name:'Cited Work',element:'cite'},{name:'Inline Quotation',element:'q'},{name:'Language: RTL',element:'span',attributes:{dir:'rtl'}},{name:'Language: LTR',element:'span',attributes:{dir:'ltr'}},{name:'Image on Left',element:'img',attributes:{style:'padding: 5px; margin-right: 5px',border:'2',align:'left'}},{name:'Image on Right',element:'img',attributes:{style:'padding: 5px; margin-left: 5px',border:'2',align:'right'}}]);

为了防止代码过长造成页面变形；请将以下代码加入在你使用的css当中：

.wp_syntax {
  color: #100;
  background-color: #f9f9f9;
  border: 1px solid silver;
  margin: 0 0 1.5em 0;
  overflow: auto;width:40%;
}

/* IE FIX */
.wp_syntax {
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: expression(this.scrollWidth > this.offsetWidth ? 15 : 0);
}

.wp_syntax table {
  table-layout:fixed;
  overflow:hidden;
  text-overflow:ellipsis;
  WORD-BREAK: break-all;
  WORD-WRAP: break-word;
  border-collapse: collapse;
}

.wp_syntax div, .wp_syntax td {
  vertical-align: top;
  padding: 2px 4px;
}

.wp_syntax .line_numbers {
  text-align: right;
  background-color: #def;
  width:30px;
  color: gray;
  overflow: visible;
  font-family: 'Lucida Grande',
  'Trebuchet MS', Verdana, Helvetica, Arial, sans-serif;
}

/* potential overrides for other styles */
.wp_syntax pre {
  margin: 0;
  width: fixed;
  float: none;
  clear: none;
  WORD-BREAK: break-all;
  WORD-WRAP: break-word;
  overflow: visible;
  font-size:8pt;
  font-family: Courier New;
}

以上代码我只加了几种脚本，如果你需要其他的可以安装格式添加；