wordpress无插件实现sublime代码高亮显示 阅读·734

码字不易,转载请注明本文链接 http://ymblog.net/2016/07/24/wordpress无插件实现sublime代码高亮显示/

之前一直在用crayon-syntax-highlighter代码高亮插件,很好用,唯一就是加载的js和css太多了,感觉真浪费,第一次加载页面需要8s左右的时间,太慢了,虽然做了缓存之后感觉还好,是2s左右,但还是不放心。

Prism.js就可以实现我想象中的功能

111111111111111

进入到官网里面,点击 download会提示你选择想要高亮的语言以及js功能插件,并自动生成合并为目标代码提供下载。这一步操作完成之后,在文章详情的页面,我这里是post-single.php文件,手动引入prism.css和prism.js即完成了第一步。

<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/css/3.0.css">
<script src="<?php bloginfo('template_url'); ?>/prism/prism.js"></script>

如果你是用的sass,就可以将样式文件合并到一起。

在官网中还看到,使用的代码块需要作如下包裹才会高亮显示:


<pre><code class="language-css">p { color: red }</code></pre>
 

为了简便操作,不可能每次贴代码都要手工写这些进去吧,所以可以为编辑器添加自定义按钮:



//添加HTML编辑器自定义快捷标签按钮
function bolo_after_wp_tiny_mce($mce_settings) {
?>
<script type="text/javascript">
QTags.addButton( 'code-block', '插入代码块', '<pre class="line-numbers"><code class="language-css">', "</code></pre>" );
</script>
<?php
}
add_action('after_wp_tiny_mce', 'bolo_after_wp_tiny_mce');

函数QTags.addButton( ‘ 按钮ID‘, ‘按钮显示名‘, ‘点一下输入内容‘, ‘点一下关闭内容‘ );

这样就会在编辑器的文本模式中看到你添加的内容了。

还是发现有个坑,在文本模式中添加的代码块真心不方便,光标及代码标签会转义。

相关文章
ES6箭头函数常见用法阅读·463 次 移动端自适应布局方案尝试阅读·804 次 git切换分支,创建,删除分支,合并分支操作阅读·359 次 简析JS对象深拷贝阅读·537 次 wordpress优化之结合prism.js为编辑器自定义按钮转化代码阅读·669 次 由js命名空间想到的函数声明预解析阅读·442 次 实现移动端网页图片按需加载阅读·1374 次 由移动端页面点击穿透想到的阅读·1111 次 jquery的deffered和promise方法阅读·839 次 由js图片预览想到的阅读·781 次
JMingZI

Jming依然 / 杭州

react.js/vue.js /pc端/ wordpress

博文分类

放荡不羁爱自由

博客信息

为了更美好的明天
日志总数:111篇
网站运行:888天
最后更新:2017年5月25日

站长统计: