子曰: 工欲善其事,必先利其器.作为码农一枚,再加上站长这个已经不再光鲜的称呼,岂能没有一款经济实用.操作简单.而且功能必须强大.样式也必须好看的Wordpress代码高亮插件?!作为一个视代码如生命的码农,把代码整的漂漂亮亮是一件多么神圣和伟大的事情啊! 今天就给大家推荐一款这样的代码高亮插件:SyntaxHighlighter Evolved.相信我, 功这款插件能强足够大.并且简单易用,绝对值得推荐.本站就是用的这款插件,大家可以看看“生病的JavaScript代码”,这就是最好的例子.插

这一篇我将介绍如何让kindeditor4.x整合SyntaxHighlighter代码高亮,因为SyntaxHighlighter的应用非常广泛,所以将kindeditor默认的prettify替换为SyntaxHighlighter代码高亮插件 上一篇"让kindeditor显示高亮代码"中已经说过,高亮代码主要用的是class,所以 第一步:首先修改kindeditor代码高亮写入pre标签时的class类名: 打开/kindeditor4/plugins/code/code.j

IT类文章博客,代码高亮美化插件-----SyntaxHighlighter 最近在做一个类似个人博客的网站,因为文章中会用到各种代码,主要是Javascript,CSS,PHP,XML等.这些代码如果单纯的用html&css来处理,稍显繁琐.于是,在网上搜索了一些关于文章中代码如何美化高亮的信息,找到有关于SyntaxHighlighter和Google-Code-Prettify的资料.鉴于SyntaxHighlighter已经是一个相对比较成熟稳定的老牌语法高亮插件了,而且还支持复制.在新

SyntaxHighlighter是根据代码中的换行符分配行号的.但是,如果一行代码或者注释比较长,在页面显示时需要分成多行显示,这时行号就对不上了.如下图: 通过下面的css强制不换行,可以避开这个问题. .syntaxhighlighter .line { white-space: pre !important; } 但这样会出现横向滚动条,而不想出现横向滚动条,css要改为这样: .syntaxhighlighter .line { white-space: pre-wrap !impor

[Date]2013-09-21 [Environment]SyntaxHighlighter 3.0.83 [Author]wintys (wintys@gmail.com) http://wintys.cnblogs.com [Content]: 1.下载 SyntaxHighlighter 3.0.83 : http://alexgorbatchev.com/SyntaxHighlighter 2.配置 (1) SyntaxHighlighter解析的默认标签,默认为pre SyntaxH

SyntaxHighlighter++这个插件的最大的优点就是可以在编辑器的下方有一个输入框,里面可以输入代码,然后插入到文章中.就不用编辑文章的时候,在可视化和文本之间来回切换了.非常适合不熟悉html的博主. 支持的语言有AppleScript.AS3.Bash.C.C++.C#.ColdFusion.CSS.Delphi.Diff.Erlang.Groovy.HTML.Java.JavaFX.JavaScript.Perl.PHP.Plain.PowerShell.Python.Ruby.

1  下载UEditor : http://ueditor.baidu.com/website/download.html 下载SyntaxHighlighter :https://github.com/syntaxhighlighter/syntaxhighlighter (版本:3.0.83) 2 UEditor的功能太多,根本就不用向用户开放这么多功能. 首先,UEditor的元素路径就不用显示给用户看了,没这个必要, 打开ueditor.config.js.如下图所示,将关于元素路径的第

CKEditor整合SyntaxHighlighter实现代码高亮显示 1,版本说明 CKEditor:ckeditor_4.0.1_standard.zipSyntaxHighlighter:syntaxhighlighter_3.0.83.zip 2,解压syntaxhighlighter_3.0.83.zip,将得到的目录syntaxhighlighter_3.0.83复制到站点目录下,我的是放在/plugins目录下(可以是其它目录,或者根目录),结果得到目录结构/plugins/syn

Open Live Writer(以下简称OLW),作为一个在本地写博文,然后发布到各个博客网站的客户端,在使用上个人觉得还是比较好用的.但是其对IT博文中代码部分的内容样式支持不是很友好.下面是本人添加代码样式功能的方式,供大家参考. 首先,需要下载OLW代码样式插件文件,下载地址http://www.cnblogs.com/memento/p/5995173.html 第二步,右键电脑桌面的OLW快捷方式,选择属性,在弹出的属性窗口中,点击"打开文件位置"按钮,在弹出的窗口中,双击

SyntaxHighlighter.js是一个代码高亮的JS插件,使用也很简单,但是由于是浏览器段执行JS代码来着色,会出现视觉上闪一下的效果.比如你的20行代码网页打开显示高度为100px,但是SyntaxHighlighter高亮后该区域高度变为120px 加上颜色的变化,这样的体验特别不好. 解决原理:把pre标签的样式定义为 高亮后的样式即可 解决方法:在shCoreDefault.css文件加上如下样式 pre { line-height:22px !important; backgr

记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前端群里还发现以上观点类似的奇葩聊天,真是*** 其实,也是在很久以前,看了腾讯ISUX的一位前端工程师-麦时分享的一篇技术文章(个人站点已失效,就不贴出来了),才了解到真正的css选择器权重计算. 以下是css选择器权重计算精华所在,翻译自国外的文档(记得是W3C给出的计算规则) 如果一个声明来自s

1.BootStrap指定的四种屏幕尺寸: ①超大PC屏幕--lg(large):w>=1200px: ②中等PC屏幕--md(medium):1200px>w>=992px: ③Pad屏幕--sm(small):992px>w>=768px: ④Phone屏幕--xs(extra small):768px>w:2.BootStrap中的两种容器: ①定宽容器:.container--1170px(lg).970px(md).750px(sm).100%(xs): ②变

Css :层叠样式表 (Cascading Style Sheets),定义了如何显示HTML元素. 目录 1. 选择器的分类:介绍ID.class.元素名称.符合.层次.伪类.属性选择器. 2. 样式调用方式:介绍外部.内部.内联等调用方式. 3. 样式的优先级:介绍调用样式的优先级. 1. 选择器的分类 语法结构 1.1 Id选择器 1.1.1 格式 #id :#+元素的id:id是区分大小写. 1.1.2 示例 #title1 {background-color:Blue;border-w

这两天学习UWP开发,发现一个很有趣的问题,就是我题目中的描述的. 我习惯了在ResourceDictionary中写样式文件,但是发现用x:Bind时会有问题 如果是写在Style里,则提示 “x:bind不支持样式文件” 如果是写在DataTemplate里,则提示在编译时会提示“此Xaml文件必须又代码隐藏类才能使用{x:Bind}” 不管哪种提示,都是不能用的. 这就很奇怪了,毕竟在XAML页面里正常写是不会有问题的. 查了近小半天的资料,最后发现了原因,还得是我伟大的MSDN呀 深入了

默认的上传样式我们总觉得不太好看,根据需求总想改成和上下结构统一的风格…… 实现方法和思路: 1.在input元素外加a超链接标签 2.给a标签设置按钮样式 3.设置input[type='file']为透明,并定位,覆盖在a上面 html代码: <a class="input-file input-fileup" href="javascript:;"> + 选择文件<input size="100" type="f

第一种画刷,渐变画刷GradientBrush (拿线性渐变画刷LinearGradientBrush(其实它涵盖在GradientBrush画刷内.现在拿他来说事.),还有一个圆心渐变画刷RadialgradientBrush,两者用法相同): 我想象中的button的总体样式大体结构应该如下: <Style TargetType="Button">         <Setter Property="Template">        

最近在研读一本巨著<JavaScript忍者秘籍>,里面有一篇文章提到了这3个概念. 书中的源码可以在此下载.我将源码放到了线上,如果不想下载,可以直接访问在线网址,修改页面名就能访问到相应示例代码. 一.DOM特性和DOM属性 attribute(特性),是我们赋予某个事物的特质或对象,attribute是HTML标签上的特性,它的值只能够是字符串 property(属性),是早已存在的不需要外界赋予的特质,property是DOM中的属性,是JavaScript里的对象 在访问元素特性值时

工作中常会有需求向用户发送邮件,需要前端工程师来制作html格式的邮件,但是由于邮件客户端对样式的支持有限,要兼容很多种浏览器需要注意很多原则: 1.邮件使用table+css布局 2.邮件主要部分在body内部,所以样式一定要写成内嵌的,不能在head标签中写style,也不能外联. 如: <table border="0" cellspacing="0" cellpadding="0" style="font-family:'

先说结论: 前几天写了几个非常简单的移动端小游戏,其中一个拼图游戏让我郁闷了一段时间.因为要获取每张图片的位置,用`<style>`标签写的样式,直接获取计算后样式再用来交换位置,结果就悲剧了,出现了一些不理解的情况.这个错误比较低级,不过还是被我遇到了,就拿来记录一下. 注意: 在交换每张图片位置的时候,我对它们设置了CSS中transition属性,有了缓冲动画效果,这样一来,每次打乱图片的时候,用getComputedStyle获取计算后样式,但是,动画有时长,而获取样式在触发时就完成了

采用bootstrap框架样式 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title