纯代码给 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 条评论
登录 后参与评论

相关文章

来自专栏Python爬虫与算法进阶

如何在微信公众号编辑Python代码?

直接引用代码完全没法看,后来在群里听说chrome有一个神器:markdownhere 安装过程就不说了,下面说一说如何使用。 markdown语法说明 粘贴一...

3665
来自专栏我和未来有约会

SplashScreenSource的妙用

默认初始屏幕体验 在托管 API 下为 Silverlight 定义的默认体验是:超出某一时间阈值(约为 0.5 秒)的任何加载都将在内容区域中显示基于 XA...

1846
来自专栏更流畅、简洁的软件开发方式

【小试身手】几个自定义控件的组合应用,实现简单的“增删改查”功能(有源码)

     分页控件、查询控件、显示数据的控件和表单控件,终于把这几个控件结合在一起了,和在一起之后就可以让“增删改查”变的非常的简单和容易了,当然还需要数据访问...

2379
来自专栏liulun

学习WPF——了解路由事件

入门 我们先来看一个例子 前台代码: 后台代码: 点击按钮的运行效果 第一个弹出窗口 第二个弹出窗口: ...

2057
来自专栏進无尽的文章

基础篇-Welcome to Xcode

Command + Shift + K:清除工程: Command + B :构建应用 commond + r 启动模拟器 commond + . 停止模...

911
来自专栏我和未来有约会

SplashScreenSource的妙用

默认初始屏幕体验 在托管 API 下为 Silverlight 定义的默认体验是:超出某一时间阈值(约为 0.5 秒)的任何加载都将在内容区域中显示基于 XA...

2147
来自专栏我和未来有约会

CaseStudy(showcase)类库篇-用agTweener来实现动画效果

做silvelight也有一段时间了,相册、游戏,刚刚完成的showcase这个小程序算是一个阶段了。这里就以showcase这个项目来做一下CaseStudy...

19310
来自专栏马洪彪

C#仪器数据文件解析-RTF文件

RTF格式文件大家并不陌生,但RTF文件的编码、解码却很难,因为RTF文件是富文本格式的,即文件中除了包含文本内容,还包含文本的格式信息,而这些信息并没有像后来...

3124
来自专栏做全栈攻城狮

Windows桌面软件开发-Winform桌面客户端开发神器

这是小白学习软件开发系列课程,旨在帮助对电脑编程感兴趣的朋友学习并熟悉C#技术。其中基础部分已经讲解完毕,可以查看:C#入门教程(一)–.Net平台技术介绍、C...

3111
来自专栏小狼的世界

Sublime Text 3 提高工作效率的使用技巧

Sublime Text 3对于Sublime Text 2压倒性的优势就是秒启动,启动非常非常快,所以从2012年到2016年我一直用Sublime Text...

1684

扫码关注云+社区

领取腾讯云代金券