wordpress高亮插件Highlight.js手动添加及使用说明

使用WORDPRESS已经有很多年了,作为一个以技术内容为主的网站,经常会在文章内引用到各种语法的代码,在wordpress插件管理中,我们同样能够找到很多关于语法高亮的插件,有的十分完美,体积却异常庞大,比如我之前使用的Crayon Syntax Highlighter,若果博主们对自己的服务器很有信心,又喜欢强大的配置管理,这款插件实在是省事,可是我总觉过于臃肿,因为很多功能用不到,于是后来我找到了另一个插件SyntaxHighlighter Evolved,这款插件相对来讲很简洁,并且它所使用的高亮JS是很多大型网站都在用的,可是不知道为什么我这里看起来感觉怪怪的,并且它使用起来需要用到类似[html][/html]的标签,如果一旦放弃使用这个插件,恐怕就杯具了.虽然之前经过慎重考虑,选用了此插件,但是高亮效果感觉并不满意,最终寻找到了或许更好的或说更适合我的”高亮插件”–Highlight.js(其实wordpress里面有个wp-highlight.js的插件不知道是不是这个js,我没装,只是看了下,其实也是有下文提到的问题的.而且还不精简,所以我就决定手动添加)!

今天我就来简单介绍一下如何使用这个Highlight.js(如果喜欢自己琢磨,可以直接访问官方网站highlight.js查看相关说明)

当然我也是看了官方文档说明,总结给懒人看的.

本地测试

一. 准备必要文件

既然是使用它,那必须是需要一个highlight.js了,这个js可以自定义生成,这一点非常适合我,毕竟我只是一个小小小小的前端工作者,我只需要高亮显示html,css,js,json,最多加个php,sql了.于是,在这里,自定义配置这个js–Custom package,此处勾上自己需要的,然后点击Download按钮,很快一个zip文件就下载好了.

继续阅读wordpress高亮插件Highlight.js手动添加及使用说明

关于Emmet自带的全部snippets简单介绍

用sublime text的同学少不了会安装emmet插件.其实上手简单,但是很多技巧还是需要一些时间来研究的,这次我找到了emmet插件内的snippets.json文件,一般是位于..\(目录路径)\Sublime Text 3\Data\Packages\Emmet\emmet(这里使用的是sublime text 3),如果未找到,也可以将..\Data\Installed Packages\Emmet.sublime-package文件解压出来(我直接用7-zip解压,winRAR未测试),解压后找到..\Emmet\emmet\内的snippets.json打开一样可以查看…

为了方便大家查看我将该文件的内容在文章结尾处会贴出来.

因为是简单介绍,我就对其中某些特性说明.大家都知道emmet可以自动补全代码,例如在css文件中的{}内,我想输入position:relative;,我只需要输入por,他会自动提示想要的结果,我们直接按tab或是enter,就会自动出来,这个特性就不用说太多了,但是有时候,会因为输错,而无法高效的编写代码,所以,我们需要熟悉究竟最佳的缩写方式是什么,看这个文件就一目了然了.

为什么有时候无法提示出我们想要的代码?有可能是因为,他未能识别当前文件的语法条件.snippets.json同样写得很清楚,在css环境下,其中很多复杂的css3写法可以轻松输出,例如输入animtfc,他会自动补全很多不同兼容性的CSS3代码,十分方便,大家就自行测试了.

(最近找的EMMET速查手册干货放在前面既要醒目又要低调见Emmet Documentation cheat-sheet,更新日期:2015-06-05强行插入正文: )

继续阅读关于Emmet自带的全部snippets简单介绍

jsfiddle网站被封,大量日志重新修改

最近显示谷歌被封,接着还有一大堆常用的网站都出现了访问不正常,有本事你把github也封了吧~

我这可怜的小站长,只好把现有的201篇日志,花了我将近两个小时从头到尾翻了一遍,找出所有用了jsfiddle的文章,全部注释掉,说明如下:

PS:由于近日(2014年6月)jsfiddle无法正常访问,可能受内网影响,现将之前所有jsfiddle预览去除,不过你仍然可将以上地址拷贝到浏览器预览,或选择尝试以下代码:

近日特作此说明.若有发现遗漏请和部分错误与我联系,毕竟文章数量大,恐怕会有错误,谢谢合作!

漫步者R1200TII简评(EQ调节增强听感)

赶着京东做活动,恰好抢到一张199-100的优惠券,整天带着耳机听,的确不是很方便,于是决定买一对2.0的音箱,虽然说漫步者为了最大限度的利用这张优惠券,必然是买漫步者R1000TC北美版,然而略对音质有要求的我,最终决定买去年年底上市的R1200TII,由于之前用过漫步者的音箱,印象还不错,03年买的一对2.1的,现在除了有点小毛病,基本还能用,所以信任的买了这款R1200TII,上午下单,下午便到了,辛辛苦苦把这个重家伙从公司弄回宿舍,安装了一番,开始试音.

漫步者r1200tii使用感受
漫步者r1200tii使用感受

寒舍简陋,桌子只有一米宽,如何容纳我这2.0音箱,24寸显示器,和15寸笔记本…暂且只能如此摆放.闲话说多了,说正题. 继续阅读漫步者R1200TII简评(EQ调节增强听感)

CSS的通配符*内不能用display属性?

本来是想简单的reset一下,并且做测试,希望所有元素都为块级元素,于是给*加了个display:block属性值结果发现居然就无法正常解析style了…想去搜一下是怎么回事呢,却找不到,本想多测试几个属性,试试这个通配符是否还有其他属性无法使用,结果也没试出来,就此抛下疑问?难道不能这样写

<!DOCTYPE html>
<html>
<head>
<title>css * cannot use display property</title>
</head>
<style type="text/css">
* {display: block;border: 1px solid #f00;padding: 10px;margin-bottom: 10px;}
body {background-color: #fc0;}
</style>
<body>
<p>body with background color but styles come out too! we dont want this happen!</p>
<span>you can also try it yourself :)</span>
<img src="#" width="300" height="300" />
<a href="#">all blocks now?!</a>
</body>
</html>

而,假设这样的话,不同浏览器效果更是离谱,这里以IE6,7,8,CHROME,IE11为例.测试结果如图:

通配符有了display属性的结果
通配符有了display属性的结果

暂不提这个IE6连HTML节点也算进去了(注意滚动条边框),就说这个不同浏览器的效果,也值得研究下了.

关于火狐的文字换行问题思考

遇到这个问题,可以说是巧合吧,由于场景可能过于复杂我也不不方便进行大量测试,我做的CMS模板中,正好有一处读取18个字符长度,而这个长度在中英文和特殊字符混排的时候是多变的,所以并不固定,不过一般情况下我会保守留一个比较宽的宽度,让一行内可以不出意外的容纳下任何混排的标题.

先来看看问题图片:

关于FF和CHROME在行内文字换行测试(附IE6测试)
关于FF和CHROME在行内文字换行测试(附IE6测试)

事实上,并不顺利~我将其代码片段弄下来做了个demo,大家测试一下(说明:chrome版本34, firefox版本29,IE6可以尝试测试word-wrap:break-word;同时对其进行hasLayout测试观察变化).

<!DOCTYPE html>
<html>
<head>
	<title>关于FF和CHROME在行内文字换行测试(附IE6测试)</title>
</head>
<style type="text/css">
.width-346px {width: 346px;}
.font-style {font:bold 18px/2 "Microsoft YaHei";/*word-wrap:break-word;overflow:hidden; zoom: 1;*/}
</style>
<body>
<h1>这是关于火狐和谷歌浏览器的区别测试</h1>
<div class="width-346px">
	<a href="#" class="font-style">Intel打响反击战 Computex2014平板综述</a>
	<span class="font-style">Intel打响反击战 Computex2014平板综述</span>
	<p class="font-style">Intel打响反击战 Computex2014平板综述</p>
</div>
</body>
</html>

虽然我写了三行不同标签,相同样式的文字,其实跟标签名没什么关系了,有人可能会怀疑我没有做css reset,这点可以排除我为了减少代码量就没有写,实际上写上CSS RESET一样在火狐下会换行,我尝试使用word-wrap:break-word;等属性也是无效的.因此,这个火狐浏览器对于此处换行的解释我也无从得知,但是可以肯定一点,虽然外层我限制了width-346px,实际上从火狐的开发者工具上来看,内部三行内容的真实宽度也依然是346px,因此并不是内部内容宽度大于父级导致换行!原因不明!

最后,没有办法,只好给父级加宽了1px,火狐就显得正常了…若有人有兴趣看到此问题,望共同讨论研究下ff的兼容性问题.


2014年6月16日15:03:25

在Bob的提醒下,的确是这个问题,加一个white-space:nowrap;即可,不过你属性名敲掉了个字母哦~最后献上解决方案:

<!DOCTYPE html>
<html>
<head>
    <title>关于FF和CHROME在行内文字换行测试(附IE6测试)-解决!</title>
</head>
<style type="text/css">
.width-346px {width: 346px;}
.font-style {font:bold 18px/2 "Microsoft YaHei";white-space:nowrap;}
</style>
<body>
<h1>这是关于火狐和谷歌浏览器的区别测试</h1>
<div class="width-346px">
    <a href="#" class="font-style">Intel打响反击战 Computex2014平板综述</a>
    <span class="font-style">Intel打响反击战 Computex2014平板综述</span>
    <p class="font-style">Intel打响反击战 Computex2014平板综述</p>
</div>
</body>
</html>

以后遇到莫名其妙的换行问题,可要多多注意.参考来自Bob的word-break、word-wrap、word-space、white-space对比图

wordpress默认主题引用google fonts导致访问速度过慢解决

这几天博客访问量下降,虽然本来每天就不多,这下可好,发现网站直接打不开,明白的人,都知道谷歌的服务器受影响了,所以博客就打不开了,估计很多wordpress中枪,临时解决方案就是将那些引用自谷歌服务器的文件取消,可是如何才能取消呢,小弟无才,自己未能解决,最终从网上找到两篇,一篇是cnblogs上的,写的好像很不错,不过没试成功,另一篇,更离谱,修改functions.php的一段代码,我却都没找到,也不知道是什么版本的.

最终还是用了插件,总算舒服了些,其实我不太喜欢给wordpress安装一大堆插件,等过几日有时间再来研究一下这个或许跟调用twentytwelve_get_font_url有关的函数吧.

有需要的可以安装此插件,插件名称: Disable Google Fonts

安装后启用即可,生在中国,要么忍要么…算了不想说了.还是乐观点吧.