『WordPress』SyntaxHighlighter:无需插件的语法高亮解决方案

qq21-syntaxhighlighter-graphicsview

引言

需要用到代码的博客常常需要解决语法高亮的问题。方案通常有两种,第一是插件,第二是自动生成HTML高亮代码的网站。这二者各有其优缺点:

1、插件
不具体介绍,搜索一下能找到很多。
优点:生成代码简洁无冗余,使用方便,变更样式容易。
缺点:许多插件通过short-code的方式实现高亮,如果移除插件则样式失效。
2、网站
比如知名的发芽网
优点:通过纯HTML标记实现,样式能持久保存。
缺点:生成代码复杂,更改样式麻烦。

以上两种是目前常用的语法高亮方式,这里都不赘述,为了规避上述方式的缺陷,本站决定另辟蹊径,采取引用第三方JS和CSS的方法解决代码高亮问题,即SyntaxHighlighter。

安装

基本步骤

为WordPress添加SyntaxHighlighter支持只需遵循一下步骤:

  1. 为页面新增对基础文件的引用:shCore.js和shCore.css。
  2. 添加合适的笔刷文件,每种语言对应一个笔刷文件。
  3. 引用shCore.css和shThemeDefault.css。
  4. 调用SyntaxHighlighter.all()函数,完成。

具体到WordPress上,只需在主题header.php文件中的<head />标签内加入以下代码:

<!-- Syntax Highlighter -->
<!-- Include required JS files -->
<script type="text/javascript" src="https://alexgorbatchev.com/pub/sh/current/scripts/shCore.js"></script>
<!--Include a brush for every language you want to highlight -->
<script type="text/javascript" src="https://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js"></script>
<script type="text/javascript" src="https://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js"></script>
<!-- Include *at least* the core style and default theme -->
<link href="http://alexgorbatchev.com/pub/sh/current/styles/shCore.css" rel="stylesheet" type="text/css" />
<link href="http://alexgorbatchev.com/pub/sh/current/styles/shThemeEmacs.css" rel="stylesheet" type="text/css" />
<!-- Finally, to actually run the highlighter, you need to include this JS on your page -->
<script type="text/javascript">
SyntaxHighlighter.all()
</script>

没错,以上EMACS编辑器高亮效果即是用本文介绍的方案实现的,除此之外还有多种高亮主题可供选择。

<pre />标签方法

pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。<pre /> 标签的一个常见应用就是用来表示计算机的源代码。

优势:简单易用;如果高亮方法出现问题,不会对已有样式造成大的影响;在RSS阅读器中显示为普通<pre />标签的效果。

问题:必须对尖括号使用转义字符。即,“<”用“&lt;”,“>”用“&gt;”替换。

SyntaxHighlighter会自动搜寻以适当class属性修饰的<pre />标签,然后调用相应的笔刷进行渲染,达到语法高亮的效果。class中唯一需要写入的参数是brush(详见配置),取值为笔刷短码

以高亮php代码为例,使用时只需为代码段添加

<pre class="brush: php"></pre>

标签就能实现高亮。

结语

除了<pre />方法之外,还有一种<script />方法,在此不做介绍。

本方法的优点包括:

  1. 代码简洁无冗余,只需添加几行对JS和CSS的引用即可。
  2. 样式持久保存,不依赖short-code解析。
  3. 变更样式容易,只需修改一行代码更换加载的CSS主题。
  4. 使用方便,无需每次手工粘贴代码到网站去生成HTML标记,只需给代码段增加pre标签。

作者:Keefe Dunn

a dreamer, a learner, a lawful beginner.

1条评论

发表评论

您的电子邮箱地址不会被公开。