WordPress

使用Prism.js为WordPress添加代码高亮效果

使用Prism.js为WordPress添加代码高亮效果-优次元

前些天网站需要添加代码,于是百度了一下代码高亮,发现了利用Prism.js实现非常漂亮的代码高亮效果,于是就扒到了网站,具体效果请见本站代码分享处!这里优次元共享给大家!

在之前也分享了一篇 免代码实现WordPress代码高亮显示


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


//Wordpress免插件实现代码高亮 **优次元www.uoo2.com**
//Prism.js开始 **优次元www.uoo2.com**
 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总添加代码:


//自定义编辑器添加快捷键**优次元www.uoo2.com**

<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' );
//添加快捷键结束

修改[]为<>

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

历史上的今天:

(0)

本文由 优次元 作者:芈悦 发表,转载请注明来源!

关键词:, ,

热评文章

发表评论