DKF – Digital Knowledge Factory

标签： syntaxhighlighter

  • 『WordPress』条件加载JavaScript脚本实现SyntaxHighlighter语法高亮

    在前不久发布的《SyntaxHighlighter：无需插件的语法高亮解决方案》一文中，我们介绍了Syntax Highlighter的用法，通过调用远程javascript脚本实现了语法高亮效果。接下来我们要谈谈如何对其进行优化。

    syntax-highlighter-conditional-loading

    场景

    考虑到代码高亮仅在特定场合使用，亦即，仅当页面存有需要高亮展示的代码时。因此，我们只需在相应页面加载渲染用的javascript脚本即可，而无需在全部页面调用，如此一来可以进一步优化页面加载时间。

    分析

    于是我们的问题转化为：如何对带有代码的页面进行判断呢？以本站为例，与代码有关的文章都归属在分类“程序人生”及其子目录下，因而，我们可以在加载javascript时，对这一条件进行判断，然后选择是否进行Syntax Highlighter脚本的调用。我们通过WordPress提供的Conditional Tags不难解决这个问题。

    方案

    整个解决方案分两大步骤进行：

    1. 判断日志是否归属于某一分类或其子目录。
      这里我们需要构造一个做出此条件判定的函数。幸运的是，WordPress已经给出了答案，即： 
      function post_is_in_descendant_category( $cats, $_post = null )
{
	foreach ( (array) $cats as $cat ) {
		// get_term_children() accepts integer ID only
		$descendants = get_term_children( (int) $cat, 'category');
		if ( $descendants && in_category( $descendants, $_post ) )
			return true;
	}
	return false;
}

      我们只需将此函数附加到主题的function.php文件中即可。

    2. 修改header.php，利用上述函数判断并加载Syntax Highlighter的javascript脚本。

      首先我们利用WordPress的wp_enqueue_script函数，加上上面的条件判断函数，加载JS脚本，注意参数为分类ID： 

      // 仅当显示指定目录或其子目录下的日志时才加载脚本。
if ( in_category(100) || post_is_in_descendant_category(100) ) {
	wp_enqueue_script('shCore', 'http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js');
	wp_enqueue_script('shBrushPhp', 'http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js');
	wp_enqueue_script('shBrushSql', 'http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js');
	wp_enqueue_script('shBrushXml', 'http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js');
}

      然后象往常一样加载CSS并调用使Syntax Highlighter生效的all()函数： 

      <!-- Syntax Highlighter CSS -->
<?php if ( in_category(100) || post_is_in_descendant_category(100) ) { ?>
<link rel="stylesheet" type="text/css" href="http://alexgorbatchev.com/pub/sh/current/styles/shCore.css" />
<link rel="stylesheet" type="text/css" href="http://alexgorbatchev.com/pub/sh/current/styles/shThemeEmacs.css" />
<?php } ?>

<script type="text/javascript">
	SyntaxHighlighter.all();
</script><!-- End of Syntax Highlighter -->

    至此我们就完成了语法高亮的条件加载，节约了页面载入时间。

  • 『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标签。