prismjs1Loper主题添加prismjs高亮代码,prismjs 是一款轻量可扩展的代码语法高亮库,使用现代化的Web 标准构建,使用Prismjs可以快速为网站添加代码高亮功能,拽立网,支持超过113中编程语言,还支持多种插件,是简洁、高效的代码高亮解决方案。科技爱好者博客就是使用了Prism.js 实现漂亮的代码语法高亮功能,今天我把Loper主题添加prismjs高亮代码方法分享给大家,请看以下操作!
高亮效果演示图片!
1.登陆你的后台管理,选择【外观】-【编辑】-【loper: 模板函数 (functions.php)】
直接添加下面全部代码:
/*-----------------------------------------------------------------------------------*/
/* Prism.js实现漂亮的代码语法高亮
/*-----------------------------------------------------------------------------------*/
function add_prism() {
wp_register_style('prismCSS',
get_stylesheet_directory_uri() . '/prismjs/prism.css' //自定义路径
);
wp_register_script('prismJS',
get_stylesheet_directory_uri() . '/prismjs/prism.js' //自定义路径
);
wp_enqueue_style('prismCSS');
wp_enqueue_script('prismJS');
}
add_action('wp_enqueue_scripts', 'add_prism');
2.然后直接用FTP上传【prismjs】文件夹到你主题目录里!
里面包含了prism.css和prism.js文件!
我会打包好给大家下载,使用前必须解压!在最下面下载!
3.高亮使用方法:编辑文章时,使用文本模式,输入下面的代码:
不显示【行号】:
<pre><code class="language-php"> 填写你放的代码 </pre></code>
显示【行号】:
<pre class="line-numbers"><code class="language-php"> 填写你放的代码 </code></pre>
5.高亮代码使用方法演示:我自定义了4种支持!
CSS代码演示:
<pre class="line-numbers"><code class="language-css"> 填写你放的代码 </code></pre>
PHP代码演示:
<pre class="line-numbers"><code class="language-php"> 填写你放的代码 </code></pre>
JS代码演示:
<pre class="line-numbers"><code class="language-js"> 填写你放的代码 </code></pre>
默认演示:
<pre class="line-numbers"><code class="language-markup"> 填写你放的代码 </code></pre>
6.loper主题冲突不显示代码序号问题修复:禁止CSS冲突,删除也行!
.post-content blockquote,.post-content code {
/* clear: both; */
/* display: block; */
/* overflow: auto; */
/* width: auto; */
/* font-size: 12px; */
}
这2个CSS问题!
.post-content code {
/* margin: 10px 0;*/
/* padding: 10px 10px;*/
/* outline: 1px dashed #222;*/
/* background: url(images/codebg.gif) repeat;*/
/* color: #FAFAFA;*/
/* font-family: "Lucida Console", Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;*/
/* line-height: 20px;*/
}
提示:2个CSS可以删除,禁止也行,随便你处理!
提示:可以修改你喜欢的颜色,自己修改prism.css就行了!
提示:如果你不喜欢我这种模式,可以去官方网自定义高亮代码!http://prismjs.com/download.html

版权声明:本站原创文章,于2017年04月6日,由 拽立网 发表,共 2072 字。
打赏



讲道理这个
里面的这个language后面的php是描述语言种类的,可以换成html,shell,c++,c#,css之类的,你看你的css代码就基本没效果了,换成css说不定效果就出来了
@繁夜: 给我备注了,以前是排列123没效果,跟主题有冲突,这样好了!等下我会把全部修改好类型!
管理员回复