Windows Live Writer 实现代码高亮

为了实现代码高亮，之前找了很多插件，但是效果都不是很理想。经过研究终于找到一个完美的解决方案，这个解决方案具有如下优点：

    1. 代码简洁，用<pre>标签实现代码高亮，不会生成太多Html标签。
    2. 支持多种语言，包括c#,c++,php,python等10多种语言。
    3. 扩充方便，可以通过简单二次开发实现对其它语言的支持。
    4. 使用方便，把代码复制到代码高亮转换窗口即可。

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

1.准备工作：

下载 precode code snippet manager

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

下载 SyntaxHighlighter2.0

下载成功后得到一个名为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\syntaxhighlighter

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中可以十分优雅的显示出来。

赞 (0)

相关推荐

  • jQuery live

    也能绑定自定义事件.目前支持 click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, keydown, keypress, keyup. 还不支持 blur, focus, mouseenter, mouseleave, change, submit 与bind()不同的是,live()一次只能绑定一个事件. 这个方法跟传统的bind很像,区别在于用live来绑定事件会给所有当前以及将来在页面上的元素绑定事件(使用

  • jquery(live)中File input的change方法只起一次作用的解决办法

    错误写法 复制代码 代码如下: $("#uploadImg").click(function(){ do something }); 正确写法 复制代码 代码如下: $("#uploadImg").live('change',function(){ do something });

  • jQuery live( type, fn ) 委派事件实现

    目前支持 click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, keydown, keypress, keyup. 还不支持 blur, focus, mouseenter, mouseleave, change, submit 与bind()不同的是,live()一次只能绑定一个事件. 这个方法跟传统的bind很像,区别在于用live来绑定事件会给所有当前以及将来在页面上的元素绑定事件(使用委派的方式).比如说

  • jQuery中live方法的重复绑定说明

    解决:使用die()方法,在live()方法绑定前,将此元素上的前面被绑定的事件统统解除,然后再通过live()方法绑定新的事件. 复制代码 代码如下: //先通过die()方法解除,再通过live()绑定 $("#selectAll").die().live("click",function(){ //事件运行代码 }); die()方法简介: 复制代码 代码如下: die([type], [fn])<SPAN style="WHITE-SPACE

  • JQuery live函数

    摘自 jQuery 1.4.1 中文参考: 事件委托 .live() 方法能对一个还没有添加进DOM的元素有效,是由于使用了事件委托:绑定在祖先元素上的事件处理函数可以对在后代上触发的事件作出回应.传递给 .live() 的事件处理函数不会绑定在元素上,而是把他作为一个特殊的事件处理函数,绑定在 DOM 树的根节点上.在我们的例子中,当点击新的元素后,会依次发生下列步骤: 生成一个click事件传递给 <div> 来处理 由于没有事件处理函数直接绑定在 <div> 上,所以事件冒泡

  • jQuery中的.bind()、.live()和.delegate()之间区别分析

    jQuery中的.bind()、.live()和.delegate()之间区别分析

    DOM树 首先,可视化一个HMTL文档的DOM树是很有帮助的.一个简单的HTML页面看起来就像是这个样子: 事件冒泡(又称事件传播) 当我们点击一个链接时,其触发了链接元素的单击事件,该事件则引发任何我们已绑定到该元素的单击事件上的函数的执行. 复制代码 代码如下: $('a').bind('click',function(){alert('that tickles!')}) 因此一个单击操作会触发alert函数的执行. click事件接着会向树的根方向传播,广播到父元素,然后接着是每个祖先元素

  • JQuery下的Live方法和$.browser方法使用代码

    复制代码 代码如下: $(function(){ Ajaxload("?Uid=1<%= Yan.GET_Dict(id, 8, TableName)%>") $("#ThreeM a:first").addClass("addBg"); $(".pageP2 a").live("click",function(){var NewUrl=$(this).attr("href"

  • jQuery的.live()和.die() 使用介绍

    什么是 .live() .live方法类似于.bind(),除此之外,它允许你将事件绑定到DOM元素上,可以将事件绑定到DOM中还不存在的元素上,看看下面的例子: 比方说当用户在点击链接时及想提示他们正在离开站点. 复制代码 代码如下: $(document).ready( function() { $('a').click( function() { alert("You are now leaving this site"); return true; }); }); 注意,.cl

  • Windows Live Writer 实现代码高亮

    为了实现代码高亮,之前找了很多插件,但是效果都不是很理想.经过研究终于找到一个完美的解决方案,这个解决方案具有如下优点: 代码简洁,用<pre>标签实现代码高亮,不会生成太多Html标签. 支持多种语言,包括c#,c++,php,python等10多种语言. 扩充方便,可以通过简单二次开发实现对其它语言的支持. 使用方便,把代码复制到代码高亮转换窗口即可. 下面一步步介绍如何配置WLW+wordpress的代码高亮解决方案: 1.准备工作: 下载 precode code snippet ma

  • 使用C#创建Windows服务的实例代码

    使用C#创建Windows服务的实例代码

    本文介绍了使用C#创建Windows服务的实例代码,分享给大家 一.开发环境 操作系统:Windows 10 X64 开发环境:VS2015 编程语言:C# .NET版本:.NET Framework 4.0 目标平台:X86 二.创建Windows Service 1.新建一个Windows Service,并将项目名称改为"MyWindowsService",如下图所示: 2.在解决方案资源管理器内将Service1.cs改为MyService1.cs后并点击"查看代码&

  • 如何实现正则表达式的JavaScript的代码高亮

    今天想改一下JS的高亮的配色,憋了一下午憋出了这个这个正则表达式. 下面这老长老长了的玩意儿是个正则表达式,看到了别吓坏了. 复制代码 代码如下: /(\/\/.*|\/\*[\S\s]+?\*\/)|((["'])(?:\\.|[^\\\n])*?\3)|\b(break|continue|do|for|in|function|if|else|return|switch|this|throw|try|catch|finally|var|while|with|case|new|typeof|in

  • ckeditor syntaxhighlighter代码高亮插件配置分享

    ckeditor syntaxhighlighter代码高亮插件配置分享

    最近由于自己想做一个网站形式的代码库,自已写一个在线文本编辑器,对于现在的我来,确实是很不切实际,呵呵!再说了,现在有一个非常好的在线文本编辑器(ckeditor)了,我和必再去费这等功夫呢!有现成的,拿过用就是的呗!正所谓的拿来主义!不过这个在线文本编辑器,对于我们程序员来说有一个算是缺陷吧!没有代码高亮的功能!这样把代码贴上去,很不好看!今天晚上,我总是把他给弄出来了.当然也采在别人的肩膀上做成的.在此感谢他们的分享!费话不多说了!咱们进入正题吧! 首先去官方网站下载个ckeditor 其次

  • CKEditor中加入syntaxhighlighter代码高亮插件

    从官网 下载ckeditor,我下载的是CKEditor 3.3.1 .CKEditor与原来的FCKeditor有太大的不同了,作为开发人员,在做自己的博客的时候总是需要贴代码的,只好给它先做一个插入代码的插件了.高亮代码用的是"SyntaxHighlighter ". 1.在"ckeditor/plugins/"目录下新建一个"insertcode"目录,然后在"insertcode"目录下新建一个"plugin

  • 果断收藏9个Javascript代码高亮脚本

    果断收藏9个Javascript代码高亮脚本

    代码高亮很有用,特别是在需要在网站或者blog中显示自己编写的代码的时候,或者给其他人查看或调试语法错误的时候.我们可以将代码高亮,以便阅读者可以十分方便的读取代码块,增加用户阅读代码的良好体验. 目前,有很多免费而且有用的代码高亮脚本.这些脚本大多是由Javascript语言编写,也有些使用其它语言(比如java.Phyton或Ruby)等写的. 下面来推荐最受欢迎.最实用的9个Javascript代码高亮脚本. 1.SyntaxHighlighter 我相信这是最普遍代码高亮代码.它支持多种

  • prettify 代码高亮着色器google出品

    在<head></head>标签之间加入这两行代码: 复制代码 代码如下: <link href="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css" rel="stylesheet" type="text/css"/> <script src="http://google-code-prettify.go

  • 2014最热门的JavaScript代码高亮插件推荐

    2014最热门的JavaScript代码高亮插件推荐

    对于喜欢写技术博客的同学来说,一定对代码高亮组件非常熟悉.一款优秀的JavaScript代码高亮插件,将会帮助你渲染任何一种编程语言,包括一些关键字的着色,以及每行代码的缩进等.今天我们要来分享一些高性能的JavaScript代码高亮插件,这些JavaScript代码高亮插件将非常有效地帮你实现在网页上的代码编辑和展示. 1.SyntaxHighlighter – 最优秀的JavaScript代码高亮插件 SyntaxHighlighter 是一款完全基于JavaScript的代码高亮插件,Sy

  • FCKeditor 和 SyntaxHighlighter 代码高亮插件的整合

    FCKeditor 和 SyntaxHighlighter 代码高亮插件的整合

    Introduction(简介) This is a dialog-based plugin to handle formatting of source code for FCKeditor 2.5.x. It WON'T work with the new CKEditor (yet).(CKEditor 是FCKEditor 的升级版,不过,SyntaxHighlighter 还不能在 CKEditor 中实现代码高亮) It makes use of the SyntaxHighligh

  • CSDN 博客的代码高亮问题自己修复

    没办法,自己看看吧. CSDN 的代码高亮用的是一个 jquery 扩展.因为我基本上只贴 java 代码,所以把当中有用的提取出来,把这段脚本放在了公告栏中: 复制代码 代码如下: $(function() { $.getScript("http://hi.images.csdn.net/js/blog/SyntaxHighlighter/Scripts/shCore.js", function(){ eval(this); $("head").append(&q

随机推荐