wordpress下KindEditor代码高亮与行号显示
发布:smiling 来源: PHP粉丝网 添加日期:2014-03-23 22:06:39 浏览: 评论:0
wordpress自带的编辑器不符合中国国情,一直使用的都是kindeditor编辑器,该编辑器自带有google prettyprint 代码高亮,通过改造后,完全可以实现SyntaxHighlighter插件的显示效果,而且更轻巧快速.
一、代码自动行号功能
kindeditor默认未开启代码行号显示功能的,可以通过在html视图下,将需要显示行号的代码做如下更改:
<pre class="prettyprint'//改为:<pre class="prettyprint linenums'
不过虽然这样自定义很强,不过想在实现增加行号每次都手工添加还是比较麻烦,有没有一劳永逸的办法呢?当然可以的,可以修改wp-contentpluginskindeditor-for-wordpresspluginscodecode.js文件,代码如下:
html = '<pre class="prettyprint' + cls + '">n' + K.escape(code) + '</pre> ';
更改为 html = '<pre class="prettyprint linenums' + cls + '">n' + K.escape(code) + '</pre> ';
以后每次再插入程序代码的时候就自动带有行号.
二、主题及prettify.css修改
本身我的prettify.css使用的并不是默认插件自带,也是自改过,改过的效果有点类似SyntaxHighlighter插件的显示效果,不过在增加完行号后,发现在行号左侧多了两个绿色竖线,严重影响美观,现做如下调整。
1、修改prettify.css高亮格式代码,修改后的内容如下:
- pre.prettyprint {
- margin-left: 5px;
- padding-left: 18px;
- border-left: 3px solid #6CE26C;
- font-family: Monaco, 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Lucida Console', monospace !important;
- overflow: auto;}
- /*font-family: Monaco, 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Lucida Console', monospace !important;*/
- /*font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;*/
- pre.prettyprint.linenumstrigger {
- margin-left: 0px;
- padding-left: 0px;
- border-left: 0px; }
- pre.prettyprint
- ol li { margin-left: 18px;
- padding-left: 18px;
- border-left: 3px solid #6CE26C; }
- pre ol li.highlighttrigger {
- background-color: #DAD7FF; }
- .str { color: #080; }
- .kwd { color: #008; font-weight: bold; }
- .com { color: #800; }
- .typ { color: #606; font-weight: bold; }
- .lit { color: #066; }
- .pun { color: #660; }
- .pln { color: #000; }
- .tag { color: #008; }
- .atn { color: #606; }
- .atv { color: #080; }
- .dec { color: #606; }
- @media print {
- .str { color: #060; }
- .kwd { color: #006; font-weight: bold; }
- .com { color: #600; font-style: italic; }
- .typ { color: #404; font-weight: bold; }
- .lit { color: #044; }
- .pun { color: #440; }
- .pln { color: #000; }
- .tag { color: #006; font-weight: bold; }
- .atn { color: #404; }
- .atv { color: #060; }}
修改完成后,虽然还是两条绿色竖线,不过两条线变成了在行号两边了,根据公司美工的建议,左边去掉线的效果在主题里禁用比较方便.
2、修改主题css
打开wp-contentthemesinove_whitestyle.css文件,在最后增加 pre.prettyprint{border-left:none},这样改后,左边的竖线是没了,不过左边的边框也没了,和代码框另外三边显的不协调,把该行代码修改为:
pre.prettyprint{border-left:1px dashed #CCC;}
ok,效果实现,和SyntaxHighlighter插件的显示效果一样,而且更轻巧快速.
Tags: wordpress KindEditor 代码高亮
相关文章
- ·WordPress初级教程1:什么是博客?(2013-11-11)
- ·WordPress初级教程-2: 什么是WordPress?(2013-11-11)
- ·WordPress初级教程-3: WordPress的功能和特点(2013-11-11)
- ·WordPress初级教程-4: 选择WordPress博客的主机和域名(2013-11-11)
- ·WordPress初级教程-5: 安装WordPress(2013-11-11)
- ·WordPress初级教程-6: 本地安装WordPress(2013-11-11)
- ·WordPress初级教程-7: 一个数据库中安装多个WordPress博客(2013-11-11)
- ·WordPress初级教程-8: WordPress控制面板/ Dashboard(2013-11-11)
- ·WordPress初级教程-9: WordPress用户设置/ Users(2013-11-11)
- ·WordPress初级教程-10: WordPress博客配置/ Settings(2013-11-11)
- ·关于wordpress上传图片不显示的原因(2013-11-11)
- ·WordPress程序的脆弱点你知道吗 (2013-11-11)
- ·总结八大Wordpress网站百度收录实现秒收的方法绝招 (2013-11-11)
- ·WordPress如何网站投稿者也可以上传图片(2014-03-18)
- ·WordPress怎么修改新用户注册邮件内容(2014-03-18)
- ·WordPress怎么添加前台注册功能(2014-03-18)
推荐文章
热门文章
最新评论文章
- 写给考虑创业的年轻程序员(10)
- PHP新手上路(一)(7)
- 惹恼程序员的十件事(5)
- PHP邮件发送例子,已测试成功(5)
- 致初学者:PHP比ASP优秀的七个理由(4)
- PHP会被淘汰吗?(4)
- PHP新手上路(四)(4)
- 如何去学习PHP?(2)
- 简单入门级php分页代码(2)
- php中邮箱email 电话等格式的验证(2)