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. 保存文章，刷新页面，就可以看到代码已经被高亮了。

　　注意事项

　　1. 在使用pre标签实现代码高亮时，需要手动添加class属性，并在主题的style.css文件中设置样式。

　　2. 在使用highlight.js实现代码高亮时，需要在主题的functions.php文件中添加代码，并在文章编辑器中使用pre标签，并为pre标签添加class属性。

　　3. 如果你的主题已经使用了jQuery库，那么可以将highlight.js的脚本和样式表替换为jQuery插件jquery.highlight.js。

　　4. 如果你的主题已经使用了Bootstrap框架，那么可以使用Bootstrap的代码高亮组件。

　　5. 无论是使用pre标签还是highlight.js，都需要注意代码的缩进和格式，否则可能会导致代码高亮效果不佳。

　　6. 如果你的网站需要支持多种语言的代码高亮，那么建议使用highlight.js。


　　7798
 

版权声明：本站所有文章皆为原创，欢迎转载或转发，请保留网站地址和作者信息。