专栏首页沈唁志纯代码给 WordPress 文章编辑器上增加 Prism.js 代码高亮的快捷按钮

纯代码给 WordPress 文章编辑器上增加 Prism.js 代码高亮的快捷按钮

之前发过文章说过:使用 Prism.js 实现漂亮的代码语法高亮,本博客也使用的是它

直接写代码发布的话,灰茫茫一片,很丑,所以有了 Prism.js 引用的代码片段就变得有了好看的样式

<?php
echo 'Hello,World!';
?>

但是作为技术博客,每篇文章基本上都会有代码,而 Prism 使用语义化的 <pre> 元素和 <code> 元素来标记代码区块,每次都要手动敲的话还是很麻烦的

所以这篇文章就是一个小技巧,怎么在 WordPress 文章编辑器上增加 Prism.js 代码高亮的快捷按钮

打开你的 functions.php 文件,加入以下代码

// 自定义代码高亮按钮
function appthemes_add_quicktags() {
    if (wp_script_is('quicktags')){
        ?>
        <script type="text/javascript">
            QTags.addButton( 'syz_PHP', 'PHP', '<pre><code class="language-php">', '</code></pre>', 'z', 'PHP 代码高亮');
            QTags.addButton( 'syz_HTML', 'HTML', '<pre ><code class="language-markup">', '</code></pre>', 'h', 'HTML 代码高亮');
            QTags.addButton( 'syz_CSS', 'CSS', '<pre><code class="language-css">', '</code></pre>', 'c', 'CSS 代码高亮');
            QTags.addButton( 'syz_Js', 'JavaScript', '<pre><code class="language-javascript">', '</code></pre>', 'j', 'JavaScript 代码高亮');
            QTags.addButton( 'syz_Bash', 'Bash', '<pre><code class="language-bash">', '</code></pre>', 'b', 'Bash 代码高亮');
        </script>
        <?php
    }
}
add_action( 'admin_print_footer_scripts', 'appthemes_add_quicktags' );

然后保存,这样一来,我们在编辑文章的时候,切换到文本模式

纯代码给 WordPress 文章编辑器上增加 Prism.js 代码高亮的快捷按钮

直接点击编辑器上的按钮,就可以添加对应的片段,不用每次费事的一个一个敲了

沈唁志,一个PHPer的成长之路! 原创文章采用CC BY-NC-SA 4.0协议进行许可,转载请注明:转载自:纯代码给 WordPress 文章编辑器上增加 Prism.js 代码高亮的快捷按钮

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 警惕盗取QQskey利用其发生盗号行为

    内容都是一些网站啊,美名曰什么突破百度云限速,不限速百度网盘等等,结果都没什么用,你下载了打开就会拿到你的QQskey

    沈唁
  • PHP开发规范之使用phpcbf脚本自动修正代码格式

    在前段时间的文章:在PhpStorm中安装使用PHP_CodeSniffer编码规范检查工具中提到过phpcbf脚本

    沈唁
  • 使用宝塔面板如何自动备份数据库和网站代码

    基础操作是:宝塔自带的定时任务当中就有备份数据库和网站代码啊 ? 然后就直接选择了备份到服务器磁盘

    沈唁
  • 高级综合工具StratusHLS学习笔记(4)

    对于指数位宽和尾数位宽,为每一个浮点数都具有的参数,不用过多解释;对于精确度,具有多种选项,每种选项具有不同的精度-代价折中,如下表所示:

    月见樽
  • 12306系统高并发探讨

    铁道部的12306网上购票系统着实“火”了一把,在中国境内可谓是无人不知无人不晓,曾有人在网上戏称12306为“史上最牛电商”。12306购票系统的初衷是系统通...

    后端技术探索
  • 如何把思维导图秒变成幻灯?

    (由于微信公众号外部链接的限制,文中的部分链接可能无法正确打开。如有需要,请点击文末的“阅读原文”按钮,访问可以正常显示外链的版本。)

    王树义
  • 为什么越来越多的企业选择自助式BI软件?

    BI,即商业智能(Business Intelligence),是对商业信息的搜集、管理和分析过程,目的是使企业的各级决策者获得知识或洞察力,促使他们做出对企业...

    数据前沿
  • Spring 中,@Autowired 和@Resource 的区别是什么?

    首先,@Resource 是 JSR-250 标准的注释,不属于 Spring 中的标准注解,而@Autowired 属于 Spring 中的注解。

    水货程序员
  • Angular学习(03)--lint检查规范和WebStorm小技巧

    在开始讲 Angular 各个核心知识点之前,想先来讲讲开发工具 WebStorm 的一些配置以及相应配置文件如 tslint.json 的配置。

    请叫我大苏
  • hibernate查询的一些优化写法

    jeremyxu

扫码关注云+社区

领取腾讯云代金券