wordpress怎么改代码

WPJAM「代码高亮」：一键实现 WordPress 页面代码高亮显示

WPJAM「代码高亮」插件特别之处

现在大部分代码高亮的插件都是使用 prism 这个代码高亮 JS 库来实现的，WPJAM「代码高亮」插件也是，只是之前是纯代码方式写到主题里面，今天就把它整理了一下，做成一个插件。

整个插件自己写的代码只有不到 30 行，就是利用 WordPress 的 wp_enqueue_scripts 接口让页面加载 prism 的样式和脚本代码。

然后插件也兼容 WPJAM「静态文件」插件，不单独加载 prism 的样式和脚本代码，把 prism 的样式和脚本代码合并到整个站点唯一的样式和脚本文件中：

所以这个从另外一个侧面说明 WPJAM 出品的插件，不是装的越多越慢，反而相互之间会配合的，最优化去处理问题。

使用 WPJAM「代码高亮」插件

怎么使用 WPJAM「代码高亮」插件呢？非常简单，首先根据你使用不同编辑器略用不同。

如果你使用古腾堡编辑器的话，先点击选择创建一个代码块：

然后输入代码，选择该该区块：

点击右侧区块属性框，在额外的CSS类中输入：language-php，如果你的代码是 JS 则，输入 language-javascript，CSS 则输入 language-css，HTML：language-markup，其他语言尝试一下：language-语言的英文名。

如果是经典编辑器，则切换到代码模式，然后把代码放到：<pre class="language-php"><code> 和 </code></pre> 之间即可，如下图所示：

pre 标签的 class 定义就是语言，如何设置，和上面古腾堡的设置方式是一样的，自己灵活处理一下，个人感觉还是古腾堡编辑器方便一点。

WordPress自定义插件：代码高亮，允许内联样式，显示隐藏按钮

NO.1创建插件

在wp-content/plugins目录下创建一个文件夹，名称为tinymceSet（名称随意取）

新建一个与文件夹同名的php文件tinymceSet.php

初始代码如下

<?php/** *Plugin Name: TinymceSet *Description: 自定义tinymce插件. */

在管理后台-插件，刷新可以看到新注册的插件

如显示未启用，则点击启用

NO.2经典编辑器

添加区块，选择经典

初始tinymce编辑器只显示少数几个功能按钮，还有一些按钮默认隐藏，需要使用代码启用

启用方式，在tinymceSet.php中添加代码

function add_mce_buttons($buttons){ array_unshift($buttons, 'cut', 'copy', "paste", "image", "fontselect", "fontsizeselect", "styleselect", "sub", "sup", "backcolor", "forecolorpicker", "backcolorpicker", "visualaid", "anchor", "newdocument", "cleanup", "code", "selectall");return $buttons;}// 添加隐藏按钮add_filter('mce_buttons', 'add_mce_buttons');

保存后，刷新页面，就会发现按钮已经出现了

官方文档

#toolbarcontrols

NO.3经典编辑器

允许内联样式

本文的红蓝标题样式复制到WordPress TinyMCE后，style属性丢失

这个原因是TinyMCE的安全策略，对script标签和style属性等进行内容过滤

解决方法

在tinymceSet.php中添加代码

function custom_tinymce_config($init){// 允许所有标签和样式以及脚本（辅助style不被过滤） $init['extended_valid_elements'] = '*[*]'; $init['valid_elements'] = '*[*]'; $init['valid_children'] = '*[*]'; $init['extended_valid_elements'] = 'style,link[href|rel],script'; $init['custom_elements'] = 'style,link,~link,script'; $init['verify_html'] = false;// 这个属性决定了style属性不会被过滤 $init['paste_webkit_styles'] = "all";return $init;}// 初始化编辑器之前（当前tinymce版本为4.9.11）add_filter('tiny_mce_before_init', 'custom_tinymce_config');

刷新后就可以复制标题等样式了，包括word文档内容样式

NO.4代码高亮

WordPres的古腾堡编辑器和经典编辑器的代码块，样式都很简洁

公众号的代码块也相对简洁，对比highlightjs和prismjs，我更喜欢后者的样式

官方文档

可以自行选择样式和语言

自行选择插件

因为本文是TinyMCE v4.9.1的版本

文档地址

@4.9.11/plugins/codesample/

在tinymceSet.php中添加代码

其中一个是plugin.js

其他两个是prism官网按照你自己的喜好配置下载的prism.css和prism.js

function code_sample_add_external_plugin($mce_plugins){// 参考@4.9.11/plugins/codesample/plugin.min.js $mce_plugins['codesample'] = ''; // return $mce_plugins;}function code_sample_button($mce_buttons){ $mce_buttons[] = 'codesample';return $mce_buttons;}function code_sample_wp_scripts(){ wp_enqueue_style('prismjs-css', '', array(), null); wp_enqueue_script('prismjs-js', '', array(), null, true);}// 添加代码高亮add_filter('mce_external_plugins', 'code_sample_add_external_plugin', 999, 1);add_filter('mce_buttons', 'code_sample_button', 999, 1);add_action('wp_enqueue_scripts', 'code_sample_wp_scripts');

细节优化

如果不指定下拉语言，那么下拉语言只会有默认的选项和顺序

如果想要添加语言和调整顺序

在tinymceSet.php中添加代码，上文的custom_tinymce_config方法中增加

// 设置代码高亮 $init['codesample_languages'] = "[ { text: 'Bash/Shell', value: 'bash' }, { text: 'JavaScript', value: 'javascript' }, { text: 'PHP', value: 'php' }, { text: 'Python', value: 'python' }, { text: 'HTML/XML', value: 'markup' }, { text: 'CSS', value: 'css' }, { text: 'Java', value: 'java' }, { text: 'C', value: 'c' }, { text: 'C#', value: 'csharp' }, { text: 'C++', value: 'cpp' }, { text: 'SQL', value: 'sql' } ]";

最终完整的函数

function custom_tinymce_config($init){// 允许所有标签和样式以及脚本（辅助style不被过滤） $init['extended_valid_elements'] = '*[*]'; $init['valid_elements'] = '*[*]'; $init['valid_children'] = '*[*]'; $init['extended_valid_elements'] = 'style,link[href|rel],script'; $init['custom_elements'] = 'style,link,~link,script'; $init['verify_html'] = false;// 这个属性决定了style属性不会被过滤 $init['paste_webkit_styles'] = "all";// 设置代码高亮 $init['codesample_languages'] = "[ { text: 'Bash/Shell', value: 'bash' }, { text: 'JavaScript', value: 'javascript' }, { text: 'PHP', value: 'php' }, { text: 'Python', value: 'python' }, { text: 'HTML/XML', value: 'markup' }, { text: 'CSS', value: 'css' }, { text: 'Java', value: 'java' }, { text: 'C', value: 'c' }, { text: 'C#', value: 'csharp' }, { text: 'C++', value: 'cpp' }, { text: 'SQL', value: 'sql' } ]";return $init;}

NO.5Tips

本文的TinyMCE版本为v4.9.1

前几年写WordPress面临编辑器二选一的问题，现在古腾堡里面内置了经典编辑器，省去了很多麻烦，也解决了以前使用插件插入简码特殊效果和很难插入HTML代码的问题

END

WordPress使用Prism进行代码高亮

一直在寻找一个比较好看漂亮的代码高亮格式，最终对比发现Prism比较好用而且好看，就利用了这个工具。

Prism

1.Prism简介

Prism is a lightweight, extensible syntax highlighter, built with modern web standards in mind. It’s used in thousands of websites, including some of those you visit daily.

Prism是一种轻量级，可扩展的语法高亮显示器，以现代网络标准为基础构建。它已在数千个网站中使用，包括您每天访问的一些网站。

Prism可以提供多种样式的代码高亮，支持非常多的语言，而且还可以使用一些扩展功能，例如显示行号，显示复制按钮，显示语言等，可以说是非常方便。

2.Prism下载

使用Prism需要将 prism.css和prism.js文件 包含在你需要的页面中。第一步需要先在Prism官网下载 prism.css和prism.js文件 。这两个文件是根据你的选择变化的，可以选择主题、选择语言、选择插件。

3.Prism使用

根据自己的需要下载完成后，将得到的prism.css和prism.js文件放到你的wordpress主题对应的文件夹内，可以单独创建一个prism文件夹，将prism.js和prism.css文件放入该文件夹，也可以直接放在根目录中，只需要在下面的路径中填写正确就行。

然后修改funcations.php文件，将一下代码加到funcations.php文件中，其中的自定义路径就是prism.js和prism.css文件的存放路径。

function add_prism() { wp_register_style( 'prismCSS', get_stylesheet_directory_uri() . 'prism/prism.css' //自定义路径 ); wp_register_script( 'prismJS', get_stylesheet_directory_uri() . 'prism/prism.js' //自定义路径 ); wp_enqueue_style('prismCSS'); wp_enqueue_script('prismJS'); }add_action('wp_enqueue_scripts', 'add_prism');

OK！在你的代码前面使用 <pre class="language-python"><code class="language-python">，在代码最后加上 </code></pre> 即可。例如：

效果如下：

以上就是今天给大家分享的内容了，如果大家喜欢我分享的内容，别忘了关注点赞评论转发哦！如果大家有什么问题可以在评论区留言，大家一起探讨交流。后期我会分享更多精彩内容，欢迎大家持续关注！

想要了解更多有趣的技术分享，欢迎大家点击下方链接关注我的个人网站。