当前位置: 首页 > 图文教程 > 网络编程 > 网页编辑器 > Windows Live Writer 实现代码高亮

网页编辑器
fckeditor在php中的用法(添加于修改写成了函数)
关于CKeditor的非主流个性应用的设置
dedecms5.5 最新版ckeditor编辑器整合教程
javascript 网页编辑框及拖拽图片的问题
asp.net FCKeditor 2.6.3 配置说明
轻松实现 CKfinder进驻CKEditor3.0
将CKfinder 整合进 CKEditor3.0的方法
ASp.net下fckeditor配置图片上传最简单的方法
ckeditor 简单配置方法
asp.net CKEditor和CKFinder的应用
FCKEDITOR 的高级功能和常见问题的解决方法
CuteEditor 编辑器的字体样式无法控制的解决方法
fckeditor 修改记录添加行距功能插件
SyntaxHighlighter 语法高亮插件的使用教程

网页编辑器 中的 Windows Live Writer 实现代码高亮


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2010-01-10   浏览: 49 ::
收藏到网摘: n/a

有时会包含大量代码,如果能在文章中高亮显示代码文章的可读性肯定会好很多。 为了实现代码高亮,之前找了很多插件,但是效果都不是很理想。经过研究终于找到一个完美的解决方案,这个解决方案具有如下优点:
    1. 代码简洁,用<pre>标签实现代码高亮,不会生成太多Html标签。
    2. 支持多种语言,包括c#,c++,php,python等10多种语言。
    3. 扩充方便,可以通过简单二次开发实现对其它语言的支持。
    4. 使用方便,把代码复制到代码高亮转换窗口即可。

下面一步步介绍如何配置WLW+wordpress的代码高亮解决方案:

1.准备工作:

下载

下载成功后得到一个名为PreCodePlugin_4.0.2.msi的文件

下载

下载成功后得到一个名为syntaxhighlighter_2.0.296.zip文件。

2.安装:

关闭Windows Live Writer,安装PreCodePlugin_4.0.2.msi。安装成功后启动WLW,此时在插件列表里应该出现一项名为PreCode Snippet的插件。

将syntaxhighlighter_2.0.296.zip解压缩至wordpress的活动主题目录,例如:\www\wp\wp-content\themes\lutuzhi\

3.在header.php 中,在<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />下方添加:

复制代码 代码如下:

<script type="text/javascript" src="scripts/shCore.js"></script>
02.<script type="text/javascript" src="scripts/shBrushBash.js"></script>
03.<script type="text/javascript" src="scripts/shBrushCpp.js"></script>
04.<script type="text/javascript" src="scripts/shBrushCSharp.js"></script>
05.<script type="text/javascript" src="scripts/shBrushCss.js"></script>
06.<script type="text/javascript" src="scripts/shBrushDelphi.js"></script>
07.<script type="text/javascript" src="scripts/shBrushDiff.js"></script>
08.<script type="text/javascript" src="scripts/shBrushGroovy.js"></script>
09.<script type="text/javascript" src="scripts/shBrushJava.js"></script>
10.<script type="text/javascript" src="scripts/shBrushJScript.js"></script>
11.<script type="text/javascript" src="scripts/shBrushPhp.js"></script>
12.<script type="text/javascript" src="scripts/shBrushPlain.js"></script>
13.<script type="text/javascript" src="scripts/shBrushPython.js"></script>
14.<script type="text/javascript" src="scripts/shBrushRuby.js"></script>
15.<script type="text/javascript" src="scripts/shBrushScala.js"></script>
16.<script type="text/javascript" src="scripts/shBrushSql.js"></script>
17.<script type="text/javascript" src="scripts/shBrushVb.js"></script>
18.<script type="text/javascript" src="scripts/shBrushXml.js"></script>
19.<link href="styles/shCore.css" type="text/css" rel="stylesheet" />
20.<link href="styles/shThemeEmacs.css" type="text/css" rel="stylesheet" />
21.<script type="text/javascript">SyntaxHighlighter.config.clipboardSwf = 'scripts/clipboard.swf';SyntaxHighlighter.all();</script>

如此配置之后,通过Windows Live Writer插入的代码,在wordpress中可以十分优雅的显示出来。