wordpress tinymce编辑器codesample代码高亮插件 设置自定义编程语言Bash,Json5,Nginx

NO.1
插件启用

进入wordpress管理后台

点击外观->主题文件编辑器->模版函数(function.php)

添加以下代码

function code_sample_add_external_plugin( $mce_plugins ) {
  $mce_plugins['codesample'] = 'https://cdn.jsdelivr.net/npm/[email protected]/plugins/codesample/plugin.min.js';
  return $mce_plugins;
}
function code_sample_button( $mce_buttons ) {
  $mce_buttons[] = 'codesample';
  return $mce_buttons;
}
add_filter( 'mce_external_plugins', 'code_sample_add_external_plugin', 999, 1 );
add_filter( 'mce_buttons', 'code_sample_button', 999, 1 );

NO.2
默认效果

插件启动后,实际的样式

默认只有HTML,JavaScript,CSS,PHP,Ruby,Python,Java,C,C#,C++

NO.3
修改模版

本文使用的插件版本v4.9.11

https://cdn.jsdelivr.net/npm/[email protected]/plugins/codesample/plugin.min.js

可以下载并修改plugin.js中的代码

默认代码

var getLanguages$1 = function (editor) {
      var defaultLanguages = [
        {
          text: 'HTML/XML',
          value: 'markup'
        },
        {
          text: 'JavaScript',
          value: 'javascript'
        },
        {
          text: 'CSS',
          value: 'css'
        },
        {
          text: 'PHP',
          value: 'php'
        },
        {
          text: 'Ruby',
          value: 'ruby'
        },
        {
          text: 'Python',
          value: 'python'
        },
        {
          text: 'Java',
          value: 'java'
        },
        {
          text: 'C',
          value: 'c'
        },
        {
          text: 'C#',
          value: 'csharp'
        },
        {
          text: 'C++',
          value: 'cpp'
        }
      ];

修改后的代码

var getLanguages$1 = function (editor) {
      var defaultLanguages = [
        { text: 'Bash', value: 'Bash' },
        { text: 'powershell', value: 'powershell' },
        { text: 'HTML/XML', value: 'markup' },
        { text: 'JavaScript', value: 'javascript' },
        { text: 'Python', value: 'python' },
        { text: 'Java', value: 'java' },
        { text: 'CSS', value: 'css' },
        { text: 'JSON5', value: 'json5' },
        { text: 'nginx', value: 'nginx' },
        { text: 'PHP', value: 'php' },
        { text: 'Ruby', value: 'ruby' },
        { text: 'C', value: 'c' },
        { text: 'C#', value: 'csharp' },
        { text: 'C++', value: 'cpp' }
      ];

修改完把plugin.js上传到自己的资源站,并引用

支持的语言参考官方网站

官方文档:https://prismjs.com/

本文添加了Bash,powershell,JSON5,nginx

因为常使用docker命令,需要Bash高亮代码

NO.4
最终效果

默认语言模版已改变

实际代码展示(Bash)

ls -a
NO.5
引入Prism

tinymce插件官方文档

https://www.tiny.cloud/docs-4x/plugins/codesample/#usingprismjsonyourwebpage

需要将 Prism.js 和 prism.css 添加到页面中才能使语法高亮工作。请参阅以下说明以了​​解如何执行此操作

在wordpress管理后台

设置:外观->主题文件编辑器->主题页眉(Head.php)

引入prism的js和css资源

<link rel="stylesheet" href="https://xxx.domain.com/prism.css">
<script async src="https://xxx.domain.com/prism.js"></script>

NO.6
Tips

目前复制文章代码到微信公众号,会导致变形,暂时没有好的解决方案

例如,docker-compose格式的代码,复制后到公众号后,全部没有了代码间距和换行

END.