首页 > 其他分享 >wordpress整合 Prism.js实现代码高亮 切图网自用

wordpress整合 Prism.js实现代码高亮 切图网自用

时间:2023-12-10 15:56:12浏览次数:35  
标签:高亮 QTags 切图 代码 js addButton Prism syz

Prism.js是一个简约漂亮的代码高亮插件,就冲简单 好用就值得一用,如何把它整合到wordpress,附代码,也是切图网自己再用的。

代码添加到主题的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' );

标签:高亮,QTags,切图,代码,js,addButton,Prism,syz
From: https://www.cnblogs.com/qietuwang/p/17892737.html

相关文章

  • A sample of JSON RPC service
    ThisisasampleserviceprogramwhichshowhowtoimplementaJSONRPC.TheRPCserviceincludedtwofunctionswhichusedforRSAsignandverify.Ifyouwanttobuildthesourcecode,youneedinstallorbuildthreeopensorucelibraries:Libevent,cJSON......
  • Vue学习之node.js环境下利用Vue-cli脚手架搭建Vue项目
    目录第一个Vue-cli应用什么是vue-cli?vue-cli主要功能:搭建需要的环境1、nvm-windows下载2、安装nvm3、修改nvm环境变量4、通过nvm安装node5、安装全局npm6、一些替代npm的方式安装vue-cli第一个脚手项目配置命令行运行Vue项目IDEA运行Vue项目第一个Vue-cli应用之前练习了Vue一些......
  • Js判断数组中是否存在某个元素
    ......
  • Spring Boot学习随笔- 集成JSP模板(配置视图解析器)、整合Mybatis(@MapperScan注解的使用
    学习视频:【编程不良人】2021年SpringBoot最新最全教程第五章、JSP模板集成5.1引入JSP依赖<!--引入jsp解析依赖--><!--C标签库--><dependency><groupId>jstl</groupId><artifactId>jstl</artifactId><version>1.2</version></depen......
  • 【Python爬虫案例】抖音下载视频+X-Bogus参数JS逆向分析
    接口分析获取接口地址选择自己感兴趣的抖音博主,本次以“经典老歌【车载U盘】”为例每次请求的页面会有很多接口,需要对接口进行筛选:第一步筛选XHR筛选第二步筛选URL中带有post通过筛选play_add值找到视频的地址分析请求头通过对比两次请求发现只有X-Bogus数值会有变化,m......
  • 动手实现基于 JSON 和 OData 两种数据模型的 Web 应用表格控件行项目的添加和删除
    文章标题描述的需求是笔者在工作和网络上经常收到的前端开发领域的咨询话题之一。Web应用的表格控件,在切换到编辑模式下之后,给用户提供了行项目的添加和删除功能。基于MVC和MVVM框架的前端控件,都离不开Model即数据模型层。笔者工作中使用最多的模型层实现技术,即JSON模型......
  • javaScript/js 【call,apply,bind】
    在JavaScript中,call、apply和bind都是用于改变函数执行上下文(this的值)的方法。它们在不同的情境下有不同的用途。call方法:call方法允许你调用一个函数,并指定该函数内部的this值,以及将参数以单独的参数传递给函数。functiongreet(name){console.log(`Hello,${name}!Ia......
  • vue 格式化JSON
    第一步:安装npmibin-code-editor-S#oryarnaddbin-code-editor第二步:在main.js中引入//引入vueimportVuefrom'vue';//引入bin-code-editor相关插件和样式importCodeEditorfrom'bin-code-editor';import'bin-code-editor/lib/styles/index.css�......
  • Python 输入输出与文件处理: io、pickle、json、csv、os.path 模块详解
    Python提供了强大的输入输出和文件处理工具,通过io、pickle和json等模块,开发者可以轻松处理文件、序列化和反序列化数据,并在不同格式之间进行转换。在本文中,我们将深入介绍这些模块的用法和实际示例。1.io模块:强大的输入输出工具io模块提供了对文件I/O进行灵活处理的能力......
  • Python 输入输出与文件处理: io、pickle、json、csv、os.path 模块详解
    Python提供了强大的输入输出和文件处理工具,通过io、pickle和json等模块,开发者可以轻松处理文件、序列化和反序列化数据,并在不同格式之间进行转换。在本文中,我们将深入介绍这些模块的用法和实际示例。1.io模块:强大的输入输出工具io模块提供了对文件I/O进行灵活处理的能力......