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

2024-09-22 57 0

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

  1. 编辑主题文件:首先,登录到WordPress后台,进入外观(Appearance)> 编辑器(Editor)。
  2. 选择主题文件:在编辑器中,选择您当前正在使用的主题。通常,您需要编辑主题的functions.php文件和style.css文件。
  3. 添加样式:在style.css文件中,添加用于代码高亮显示的CSS样式。您可以使用一种CSS预处理器,如Sass或Less,来更轻松地管理样式。
/ 代码高亮样式 /
pre {
   backgroundcolor: #f7f7f7;
   padding: 10px;
   border: 1px solid #e1e1e1;
   overflowx: auto;
}
 
code {
   fontfamily: Monaco, Consolas, "Courier New", monospace;
   fontsize: 14px;
   color: #333;
}

编辑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);
}

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

相关文章

分享一款与某权益同款的网站模板引导页面
WordPress媒体库缩略图的详细解说或优化
Wordpress,免插件添加自定义设置上传头像功能
都说荒天帝苦、可他哪有我苦?
沙雕动画素材丨很难找全的!186.9GB沙雕熊猫人动画素材!
本站所使用的主题Once下载包

发布评论