拒绝插件可视化代码高亮整合到wordpress主题中
     2016-12-18    +4°    740  

代码高亮的插件很多,但每次都得装上插件很麻烦,自己总是琢磨将其整合到主题之中。
网上的整合教程很多,也都一一尝试过,基本都是通过将代码转译,然后加入到文章中,然后通过加入CSS代码来美化它。这种方式虽然去掉了插件,但用起来还是很麻烦。

今天给大家介绍一个整合高亮代码的教程,后台直接可视化加入代码,非常方便。

拒绝插件可视化代码高亮整合到wordpress主题中

代码语法高亮库Prism

首先给大家介绍一个轻量、可扩展的代码语法高亮库Prism。

Prism.js的优点:

极致易用
引用prism.css和prism.js,使用合适的HTML5标签(code.language-css),搞定!
天生伶俐
语言的 CSS 类是可继承的,所以你只需定义一次就能应用到多个代码片段。
轻如鸿毛
代码压缩后只有 1.6KB。每添加一个语言平均增加 0.3-0.5KB,主题在 1KB 左右。
快如闪电
如果可能,支持通过 Web Workers 实现并行。
轻松扩展
定义新语言或扩展现有语法,或者新增功能都非常简单。
丰富样式
所有的样式通过 CSS 完成,并使用合理的类名如:.comment,.string,.property等。

拒绝插件可视化代码高亮整合到wordpress主题中
拒绝插件可视化代码高亮整合到wordpress主题中

如何使用:

你只需要在页面上引入prism.cssprism.js文件:

<!DOCTYPE html>
<html>
<head>
	...
	<link href="themes/prism.css" rel="stylesheet" />
</head>
<body>
	...
	<script src="prism.js"></script>
</body>
</html>

遵循 HTML5 标准,Prism 使用语义化的<pre>元素和<code>元素来标记代码区块:

<pre><code class="language-css">p { color: red }</code></pre>

如果你感兴趣,可以查看更多官方示例或者在线试用

这个语法库很方便,你可以自己挑选需要的功能及主题,然后下载相应的JS和CSS文件,加入到自己的网站中。它能够解决我们高亮所有种类语言的需求,而且小巧易用。

高亮插件Pure-Highlightjs

再给大家介绍一款代码高亮插件:Pure-Highlightjs(支持可视化下插入代码),相信很多人都知道这个插件。
Pure-Highlightjs一个基于Highlightjs实现的WordPress代码高亮插件,支持N多种语言高亮,还提供多种主题。支持在 WordPress 可视化编辑模式下插入代码。

使用方法就不多说了,总之插件很优秀,如果嫌整合麻烦,这个插件是不错的选择!

虽然这两个代码高亮的东西都很好,但各有不足,要是两者结合在一起整合到主题中就完美了。我的主题中整合了这个功能,自我感觉还不错,在这个里分享给大家。

整合教程

1、引入转译代码的JS和可视化插入JS

将下面代码加入到function.php文件最后?>前面。

add_action( 'admin_enqueue_scripts', 'pure_highlightjs_admin_assets' );
function pure_highlightjs_admin_assets() {
    global $hook_suffix;

    if ( in_array( $hook_suffix, array(
            'index.php', # dashboard
            'post.php',
            'post-new.php',
            'settings_page_pure-highlightjs-config',
        ) ) ) {
        wp_enqueue_script( 'pure-highlightjs', get_template_directory_uri(). '/js/pure-highlight.js', array(), '0.1.0', true );
        wp_enqueue_script( 'pure-highlightjs-pack', get_template_directory_uri(). '/js/highlight.pack.js', array(), '0.9.2', true );
        wp_localize_script( 'pure-highlightjs', 'PureHighlightjsTrans', array(
            'title' => __( "插入代码", 'pure-highlightjs' ),
            'language' => __( "语言", 'pure-highlightjs' ),
            'code' => __( "代码", 'pure-highlightjs' ),
        ));
    }
}
add_filter('mce_external_plugins', 'pure_highlightjs_mce_plugin');
function pure_highlightjs_mce_plugin( $mce_plugins ) {
    $mce_plugins['purehighlightjs'] = get_template_directory_uri(). '/js/tinymce.js';
    return $mce_plugins;
}
add_filter('mce_buttons', 'pure_highlightjs_mce_buttons', 101);
function pure_highlightjs_mce_buttons( $buttons ) {
    if (! in_array('PureHighlightjsInsert', $buttons) ){
        $buttons[] = 'PureHighlightjsInsert';
    }
    return $buttons;
}

2、将highlight.pack.jstinymce.js两个文件放入到主题的JS文件夹里面。

这时后台已经有了可视化插入代码的功能了,但是代码插入后还没有高亮,现在就需要引入高亮代码了。

3、将前文说到的prism.cssprism.js两个文件引入到主题中。

<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_url'); ?>/css/prism.css"/>
<script src="<?php bloginfo('template_directory'); ?>/js/prism.js"></script>

整合完成,赶紧试试吧。

整合所需文件下载

  网盘云盘下载

整合所需文件 | 密码: ycze