使用 Prism 实现代码高亮

        以前用过几款代码高亮插件,总感觉体积太大,界面不美观,找了一下,选择了轻量级的 Prism 高亮代码。

什么是 Prism ?

        Prism 是一款轻量级,可扩展的代码高亮 Javascript 类库,默认支持 HTML/CSS/Javascript 三种语言,可以在官网上很方便的自定义添加其它语言支持及多种功能。

使用方法

        在 下载页 上选择所喜欢的风格、需要使用到的语言以及其他附加功能后点击 DOWNLOAD JS 和 DOWNLOAD CSS 分别下载 prism.jsprism.css 文件。
        在需要使用 Prism 的页面的 <head> 内调用 prism.jsprism.css 文件。
        使用 WordPress 撰写文章的时候编辑器里面使用下面的格式就可以高亮代码了:

<pre><code class="language-X">...这里是代码...</code></pre>

格式中的 X 表示语言类型,比如 language-css 等。

        如果认为每次手动输入过于繁琐,可以在文本模式编辑器上添加一个快捷按钮。在 function.php 文件内添加如下内容:

//快捷键入 Prism 标签按钮。
function mxthemes_add_quicktags() { ?>
<script type="text/javascript">
QTags.addButton( 'Prism', 'Prism', '\n<pre><code class="language-php">', '</code></pre>\n' ); 
</script>
<?php }
add_action('admin_print_footer_scripts', 'mxthemes_add_quicktags' );

        文本模式插入 HTML 和 PHP 等代码的尖括号没转义成符号好恶心,搜索半天,没什么好的办法,只能在可视化模式下先贴上代码再切换一下文本模式,让尖括号转义之后再用高亮代码包起来。

Prism 官网 | 代码示例 | 在线测试 | 立即下载 | GitHub

5 条评论

Michael进行回复 取消回复

*

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据