主机参考_WordPress技巧分享_纯代码WordPress免插件实现代码突出显示

Wordpress6年前 (2019)发布 SUYEONE

2K 0 0

在WordPress技术博客中，经常需要展示代码片段，然而WordPress默认的代码高亮功能可能不尽如人意。因此，这里我们介绍一种无需安装插件的方法，利用Prismjs来实现高效的代码高亮显示。Prismjs是一个优秀的开源项目，专注于代码高亮，其特点是轻量、快速、高效，支持超过127种编程语言，并且仅需一个JS文件和一个CSS文件。

**使用Prismjs在WordPress中实现代码高亮的步骤如下：**

1. **准备Prismjs文件**：
首先，从Prismjs官网下载压缩包，然后将其上传到你的主题根目录。

2. **注册和加载Prismjs资源**：
接下来，你需要将以下代码添加到你的主题的`functions.php`文件中。这段代码会注册并加载Prismjs的CSS和JS文件：

“`php
function enable_prism_highlighting() {
wp_register_style(‘prism_css’, get_template_directory_uri() . ‘/path/to/prism/prism.css’); // 替换为你的Prismjs CSS路径
wp_register_script(‘prism_js’, get_template_directory_uri() . ‘/path/to/prism/prism.js’); // 替换为你的Prismjs JS路径
wp_enqueue_style(‘prism_css’);
wp_enqueue_script(‘prism_js’);
}
add_action(‘wp_enqueue_scripts’, ‘enable_prism_highlighting’);
“`

3. **添加编辑器快捷键**：
为了方便在编辑器中插入代码块，你可以创建几个快捷按钮。将以下代码也添加到`functions.php`，以便在后台编辑器中添加代码高亮、PHP和Python的快捷键：

“`php
function add_custom_quicktags() {
?>

QTags.addButton(‘code_highlight’, ‘Code Highlight’, ‘\n

HTML代码

\n’);
QTags.addButton(‘php_button’, ‘PHP’, ‘\n

PHP代码

\n’);
QTags.addButton(‘python_button’, ‘Python’, ‘\n

Python代码

\n’); // 将【】替换为<

<?php
}
add_action('admin_print_footer_scripts', 'add_custom_quicktags');
“`

4. **处理预格式化标签中的HTML转义**：
最后，我们需要确保`

`标签内的HTML不会被自动转义。为此，添加以下代码到`functions.php`：

   ```php
   function preprocess_codeblocks($content) {
       return preg_replace_callback('|(.*?)
|isU', 'unescape_html_in_pre', $content);

   }

   add_filter('the_content', 'preprocess_codeblocks', 0);
   function unescape_html_in_pre($matches) {

       return str_replace($matches[3], htmlspecialchars($matches[3]), $matches[0]);

   }

   ```
完成以上步骤后，你就可以在WordPress博客文章中使用Prismjs进行代码高亮显示了。记得将上述代码中的路径替换为你实际存放Prismjs文件的位置。