终于搞定SyntaxHighlighter!

最后,终于搞定SyntaxHighlighter这个代码高亮插件。

历时两天,零php基础,累死人了!最后用源码查看,看了自己有调用SyntaxHighlighter的页面源码和其他能够正确显示高亮的页面源码,终于发现是调用的路径设置错误,然后自己找到了相对路径的实现方法,解决了问题。

以下为解决详细安装过程(网上的教程和官方教程都是坑爹):

1.安装SyntaxHighlighter

在WordPress后台查找SyntaxHighlighter插件,安装,然后启用插件。

2.添加js文件引用

在WordPress后台点“外观”,然后点编辑。

选择编辑主题为当前主题。

在右边的“模板”中选择“顶部(header.php)”或者是”底部(footer.php)”。

在编辑区域找到“</head>”或者是“</body>”,并在该标签前面插入以下代码:

<!-- 调用SyntaxHighlighter开始 -->
&lt;script type=&quot;text/javascript&quot; src=&quot;/wp-content/plugins/syntax-highlighter/3.0.83/js/shCore.js"&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;/wp-content/plugins/syntax-highlighter/3.0.83/js/shBrushCSharp.js"&gt;
&lt;link type=&quot;text/css&quot; rel=&quot;stylesheet&quot; href=&quot;/wp-content/plugins/syntax-highlighter/3.0.83/css/shCoreRDark.css"/&gt;
&lt;link type=&quot;text/css&quot; rel=&quot;stylesheet&quot; href=&quot;/wp-content/plugins/syntax-highlighter/3.0.83/css/shThemeRDark.css"/&gt;
SyntaxHighlighter.all();
<!-- 调用SyntaxHighlighter结束 -->

下载
说明 :

1)<!– 调用SyntaxHighlighter开始 –>为注释。

2)第一行代码为调用必需js文件。

3)第二行为调用brush,因为我只用来高亮c#代码,所以只调用了shBrushCSharp.js,如有需要高亮其他语言,请修改为其他的brush。参考官方的brush文件说明

4)第四行、第五行为高亮代码主题css文件,参考wp-content/plugins/syntax-highlighter/3.0.83/css目录下的主题。

5)第五行为实现高亮效果的代码。

6)<?php bloginfo(‘wpurl’); ?>为WordPress博客站点的相对路径,/wp-content/plugins/syntax-highlighter/3.0.83/为插件目录。我一开始就没有设置对,用的官网示例上的src="js/shCore.js"……就是这东西折腾了我两天Orz。

3.实现代码高亮

具体实现时,切换到html显示方式写博客,在要高亮的代码前面加上

<pre class="brush: csharp">,后面加上</pre>。其中brush:后面的是brush的代码的类型,该例为高亮C#代码。关于代码高亮样式的brush别名,brush的js文件名,对应的语言,还是参考官方的说明。更对高级设置,还是要看插件的官网。完毕。
4.其他参考资料:

5.以上都是错的。

没这么麻烦……直接[language] 和 [/language]中间加代码就行……以上方法是针对网站,单独的网页的。坑爹啊!!!我说没教程,教程那么复杂呢!插件是日本人改的,原始SyntaxHighlighter(大概)是米国人写的!!!我点了插件说明中那个原始SyntaxHighlighter作者的主页!!!

发表评论

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