WordPress主题使用 Prism.js 实现代码高亮效果

Prism.js直达连接:https://prismjs.com/download.html

首先我们在主题目录下function.php中添加如下代码:

//Prism.js开始 
 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');
//Prism.js结束

然后添加后台编辑器快捷按钮,同样在function.php总添加代码:

//自定义编辑器添加快捷键
<pre class="line-numbers"><code class="language-php">
//自定义编辑器添加快捷键
function appthemes_add_quicktags() {
?> 
<script type="text/javascript"> 
QTags.addButton( 'codeHighlight', 'HTML', 'n[pre class="line-numbers">[code class="language-markup"]n HTML代码n[/code][/pre]n' );
QTags.addButton( 'php', 'PHP', 'n[pre class="line-numbers">[code class="language-php"]n PHP代码n[/code][/pre]n' );
QTags.addButton( 'python', 'Python', 'n[pre class="line-numbers">[code class="language-python"]n Python代码n[/code][/pre]n' );
QTags.addButton( 'css', 'CSS', 'n[pre class="line-numbers">[code class="language-css"]n CSS代码n[/code][/pre]n' );
QTags.addButton( 'js', 'JavaScript', 'n[pre class="line-numbers">[code class="language-javascript"]n JavaScript代码n[/code][/pre]n' );
QTags.addButton( 'bash', 'bash', 'n[pre class="line-numbers"><code class="language-bash"]n Bash代码n[/code][/pre]n' );
</script>
<?php
}
add_action('admin_print_footer_scripts', 'appthemes_add_quicktags' );
//添加快捷键结束

修改[]为<>

最后保存一下,编辑文字点击编辑器上的按钮,就可以添加对应的片段,实现代码高亮了!

给TA买糖
共{{data.count}}人
人已赞赏
wordpress

WordPress 主题 美化网站底部信息

2020-4-7 17:37:25

wordpress

WordPress 主题 无插件实现 SMTP 邮件发送

2020-4-10 12:10:59

⚠️
Golurending上的部份代码及教程来源于互联网,仅供网友学习交流,未经Golurending作者或上传书面授权,请勿作他用。
若您的权利被侵害,请联系站长 邮箱codesns#163.com(#-@) 或 点击右侧 私信:管理员 反馈,我们将尽快处理。
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索