SyntaxHighlighter去掉右上角帮助图标的正确方法

先贴出问题图片: 关于这个问题。网上有很多的帖子,说了三种方法,经过测试,发现其中有些方法是有问题的,有的方法虽然能过解决问题,但是却会带来其他的错误。现在说明如下:

网上的原话:
syntaxhighlighter可以高亮着色显示几乎所有语言形式的源代码,还可以显示行号,是一款深受网站建设人员喜爱的工具,并且它还是免费的。 使用免费产品就有帮它宣传的义务,所以,在使用该工具时,会自动显示一个帮助图标,点击它会提示访问官方网站并呼吁捐款,付费后可以去掉该图标。 官方的做法无可非议,不过如果我们想取消这个看起来比较碍眼的图标,又不想付费,那有什么办法呢?如下是我获知的三种方法:
方法一 在网页前面,通常是在里加上如下代码:
<script type="text/javascript">SyntaxHighlighter.defaults['toolbar'] = false;</script>
方法二 在pre的class里加上“toolbar:false;”(粗体部分),如下所示:
<pre class="brush: js;toolbar:false;">这里放着色代码</pre>
注意:有的着色代码标记符号是textarea,那么方法是一样的。如:
<textarea class="brush: js;toolbar:false;">这里放着色代码</textarea>
方法三 syntaxhighlighter的使用形式有很多,在某些情况下,会发现如上两种方法都无效,那么可以使用直接修改css的方法来去掉右上角的问号图标: 首先找到shCore.css这个文件(通常是在style这个文件夹下),打开它,在里面找到“.syntaxhighlighter .toolbar {”(粗体部分),然后在这个类的最后加上“display:none;”(粗体部分),就可以了。 实例如下:
.syntaxhighlighter .toolbar {
position: absolute !important;
right: 1px !important;
top: 1px !important;
width: 11px !important;
height: 11px !important;
font-size: 10px !important;
z-index: 10 !important;     //原版到这里结束
display: none;     //想关掉?添加这行就可以
}

我最开始使用的是第一种方法,将代码插入到footer.php或者header.php中都可以,因为都是全局的嘛,然后开始使用的时候发现没有什么问题,确实能够解决问题,但是后来打开谷歌浏览器审查元素的时候发现有一个错误: 网上找了找解决办法,未果。果断放弃。 第二种方法我看着都麻烦,就没有测试。 第三种方法看着是修改CSS代码。我估计都可能解决这个问题。于是开始测试,怎么添加代码呢?因为这个是插件嘛,所以肯定只有在cpanel面板中去找了,于是打开public_html/wp-content/plugins/syntaxhighlighter/这个目录,发现有两个版本: 怎么知道自己使用的是那个版本呢?首先去到WordPress管理面板,找到插件的设置界面查看自己的版本: 我使用的是3,所以打开3那个文件夹,来到相应的目录public_html/wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/styles,找到shCore.css,打开编辑,添加display:none;如下: 保存即可。下载打开界面发现即去除了帮助图片。而且在谷歌浏览器的审查元素里面也没有错误了。

posted @ 2015-12-20 16:06  申杰博客  阅读(908)  评论(0编辑  收藏  举报