wordpress代码高亮(免插件实现代码高亮)_WordPress教程-网站建设知识

WordPress是一款非常流行的开源博客系统，它的插件生态非常丰富，但是有时候我们并不想安装过多的插件来实现一些简单的功能，比如代码高亮。本文将介绍一种免插件实现WordPress代码高亮的方法。

使用pre标签实现代码高亮

要实现代码高亮，我们可以使用HTML的pre标签，它可以保留文本中的空格、换行和Tab等格式，同时我们可以为pre标签添加class属性，来设置代码高亮的样式。

1. 首先，在文章编辑器中，将需要高亮的代码放在pre标签中，同时为pre标签添加class属性，例如：class="code-highlight"。

2. 在主题的style.css文件中，添加以下代码：

code {
    font-family: Consolas, Monaco, 'Andale Mono', monospace;
    font-size: 14px;
    line-height: 1.5;
}
pre.code-highlight {
    background-color: #f7f7f7;
    border: 1px solid #ddd;
    line-height: 1.6;
    margin-bottom: 1.6em;
    padding: 1em;
    overflow: auto;
    word-wrap: normal;
}

3. 保存style.css文件，刷新页面，就可以看到代码已经被高亮了。

使用highlight.js实现代码高亮

除了使用pre标签，我们还可以使用第三方库highlight.js来实现代码高亮。highlight.js是一个轻量级的JavaScript库，它支持多种语言的代码高亮。

1. 首先，在主题的functions.php文件中，添加以下代码：

function add_highlightjs() {
    wp_enqueue_script( 'highlightjs', get_template_directory_uri() . '/js/highlight.min.js', array(), '9.15.6', true );
    wp_enqueue_style( 'highlightjs-style', get_template_directory_uri() . '/css/highlight.min.css', array(), '9.15.6' );
}
add_action( 'wp_enqueue_scripts', 'add_highlightjs' );

2. 在文章编辑器中，将需要高亮的代码放在pre标签中，并为pre标签添加class属性，例如：class="hljs"。

3. 保存文章，刷新页面，就可以看到代码已经被高亮了。