WordPress作为一款广受欢迎的内容管理系统，为网站开发者和博客作者提供了强大的功能和灵活的扩展性。其中，展示代码区块是许多技术类文章不可或缺的一部分。为了让代码更加清晰易读，我们可以借助Hightlight.js插件来实现代码的高亮显示。
Hightlight.js是一个轻量级的JavaScript库，用于在网页上高亮显示各种编程语言的代码。它支持多种语法高亮，包括常见的JavaScript、HTML、CSS，以及更多的编程语言和标记语言。
在WordPress中，我们可以创建一个小插件注入Highlight.js以实现高亮显示代码区块，以下是具体步骤：
步骤1：创建Hightlight.js插件
- 导航到 WordPress 安装的 wp-content 目录
- 打开plugins目录
- 创建一个新目录并以highlightjs命名
- 打开新插件highlightjs目录
- 创建一个新的 PHP 文件，命名为highlightjs.php，文件完整路径为wp-content/plugins/highlightjs/highlightjs.php
- 编辑highlightjs.php，输入以下代码并保存
<?php
/*
* Plugin Name: Hightlight.js
* Plugin URI: https://github.com/tlxxzj/wp-highlightjs
* Version: 0.0.1
* Author: Lang Tian
*
*/
// Prevent direct access
if ( ! defined( 'WPINC' ) ) {
die;
}
// Load Highlight.js assets
function enqueue_highlight_assets() {
// Load Highlight.js
wp_enqueue_script(
"highlight.min.js",
"https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/highlight.min.js",
);
// Load Highlight.js CSS
wp_enqueue_style(
"highlight.min.css",
"https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/styles/default.min.css",
);
// Load Highlight.js inline script
wp_add_inline_script(
"highlight.min.js",
"hljs.highlightAll();"
);
}
// Add action to enqueue assetss
add_action("wp_enqueue_scripts", "enqueue_highlight_assets");步骤2：启用Hightlight.js插件
- 登录到WordPress后台
- 打开插件管理页面
- 找到Hightlight.js插件，点击启用
发表回复