代码高亮插件Crayon Syntax的问题及解决

Chinese_medicine_pills
最近在吃的中药药丸,每天两颗,味道苦死了,还怪怪的。不知道有没有西游记中提到的马兜铃、百草霜什么的,呕……
还剩下两颗,周六再吃俩就吃完了,终于可以松口气了。上图

好吧,这篇文章不是讨论这个不知道什么东西团成的球球的,下面进入正题。

绪论

我的博客代码高亮插件由wp-syntax更换为Crayon Syntax Highlighter很长时间了,选这个的是因为其显示效果非常出众同时对于一段代码中存在多种语言的支持很好。

但是经常出现的一个问题不得不让我纠结。

鉴于使用Crayon本身提供的代码编辑器,会把php、python之类的代码中出现的<、&等符号直接转义为&lt;、&amp;
因此我在文章中加入代码一律使用<pre lang=”c”></pre>的形式

问题描述

于是问题来了。例如下面的代码:

crayon_syntax_highlighter-1

在Chrome却显示成:

crayon_syntax_highlighter-2

 

解决方法

感谢Aram Kocharyan帮忙找到问题所在:

It’s caused by CSS:

You have this in your style.css:

.st {
float:left;margin:15px 0 0 16px;
}

This conflicts with the “statement” element in Crayon. I’ll fix this shortly.

Cheers,
Aram Kocharyan – aramk.com

原来是因为css冲突,在我的博客目前使用的主题中,搜索框的位置是由class为st的span决定的,而Crayon Syntax Highlighter这个插件同样使用了这个:

crayon_syntax_highlighter-4crayon_syntax_highlighter-5

那么把搜索框的类名由st改为stt,同时修改对应的css就可以了。

问题圆满解决。

同时aramkocharyan也更新了插件。Commit History:All language css classes are prefixed with “crayon-” to prevent conflicts

教训

以后无论是做插件还是弄主题,定义变量时千万不要偷懒使用一两位字母的名字了,免得与别人的冲突。加个前缀leniy什么的就好了。

作者: Leniy

Do not , for one repulse , give up the purpose that you resolved to effect . 本文著作版权归Leniy所有,并受法律保护。 转载、使用整体或任何部分的内容(包含但不限于各个页面的标题、评论框提示语)须经过Leniy的授权。 CopyRight © 2006-2017 Leniy.org all rights reserved.

61 thoughts on “代码高亮插件Crayon Syntax的问题及解决

  1. 冬小寒

    我晕 我一直没有高亮插件。。。。更不会用 有了给我发个 教教我怎么用

  2. wp-syntax这个我好像用过~ 不过好久没贴过代码了~
    感觉不怎么贴代码的话,在线的比如发芽感觉也可以~

发表评论

电子邮件地址不会被公开。 必填项已用*标注