使用 Prism 实现代码高亮

WordPress · 网站 / / 5 条评论 /

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

什么是 Prism ?

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

使用方法

        在 下载页 上选择所喜欢的风格、需要使用到的语言以及其他附加功能后点击 DOWNLOAD JS 和 DOWNLOAD CSS 分别下载 prism.js 和 prism.css 文件。
        在需要使用 Prism 的页面的 <head> 内调用 prism.js 和 prism.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

除特殊说明，本站原创内容（包括但不限于文章、图像等）采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可。 本站文章除注明转载外，均为原创文章。商业转载请联系作者获得授权，非商业转载请注明：转载自： 使用 Prism 实现代码高亮 。

5 条评论

发表回复

*

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