SyntaxHighlighter去掉右上角帮助图标的正确方法
先贴出问题图片: 关于这个问题。网上有很多的帖子,说了三种方法,经过测试,发现其中有些方法是有问题的,有的方法虽然能过解决问题,但是却会带来其他的错误。现在说明如下:
网上的原话:
syntaxhighlighter可以高亮着色显示几乎所有语言形式的源代码,还可以显示行号,是一款深受网站建设人员喜爱的工具,并且它还是免费的。 使用免费产品就有帮它宣传的义务,所以,在使用该工具时,会自动显示一个帮助图标,点击它会提示访问官方网站并呼吁捐款,付费后可以去掉该图标。 官方的做法无可非议,不过如果我们想取消这个看起来比较碍眼的图标,又不想付费,那有什么办法呢?如下是我获知的三种方法:
方法一 在网页前面,通常是在里加上如下代码:
方法二 在pre的class里加上“toolbar:false;”(粗体部分),如下所示:
注意:有的着色代码标记符号是textarea,那么方法是一样的。如:
方法三 syntaxhighlighter的使用形式有很多,在某些情况下,会发现如上两种方法都无效,那么可以使用直接修改css的方法来去掉右上角的问号图标: 首先找到shCore.css这个文件(通常是在style这个文件夹下),打开它,在里面找到“.syntaxhighlighter .toolbar {”(粗体部分),然后在这个类的最后加上“display:none;”(粗体部分),就可以了。 实例如下:
<script type="text/javascript">SyntaxHighlighter.defaults['toolbar'] = false;</script>
<pre class="brush: js;toolbar:false;">这里放着色代码</pre>
<textarea class="brush: js;toolbar:false;">这里放着色代码</textarea>
.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;如下: 保存即可。下载打开界面发现即去除了帮助图片。而且在谷歌浏览器的审查元素里面也没有错误了。