纯代码WordPress免插件实现代码高亮显示

建站 13 浏览 1 分钟阅读

要在WordPress中纯代码实现代码高亮显示,您可以按照以下步骤进行操作:

1、编辑主题文件:登录WordPress后台,打开外观(Appearance)> 编辑器(Editor)。

2、选择主题文件:选择当前正在使用的主题。通常需要编辑主题的functions.php文件和style.css文件。

3、添加样式:在style.css文件中,添加用于代码高亮显示的CSS样式。

/ 代码高亮样式 /
pre {
   backgroundcolor: #f7f7f7;
   padding: 10px;
   border: 1px solid #e1e1e1;
   overflowx: auto;
}
 
code {
   fontfamily: Monaco, Consolas, "Courier New", monospace;
   fontsize: 14px;
   color: #333;
}

4、编辑functions.php:在functions.php文件中,添加下列代码,它将启用WordPress支持代码高亮显示:

// 启用代码高亮显示
add_action('wp_enqueue_scripts', 'add_custom_highlightjs');
function add_custom_highlightjs() {
   wp_enqueue_script('highlightjs', 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/highlight.min.js', array(), null, true);
   wp_enqueue_style('highlightjsstyle', 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/styles/default.min.css', array(), null);
}

5、使用代码高亮:在文章或页面中,使用pre、code标签来包装代码块,然后添加适当的类以指定代码语言,例如:

	// 这里是您的PHP代码

6、保存并更新:保存您所做的更改,并在需要的页面上更新或发布文章。

现在,网站应该能够使用纯代码实现代码高亮显示,无需插件。如果希望本地托管第三方库(如Highlight.js)文件,可以下载它们添加到主题目录中,然后在functions.php中使用本地文件的路径。

0

  1. This post has no comment yet

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

相关文章

© 2026 卖家学习笔记