prismjs1Loper主题添加prismjs高亮代码prismjs 是一款轻量可扩展的代码语法高亮库,使用现代化的Web 标准构建,使用Prismjs可以快速为网站添加代码高亮功能,拽立网,支持超过113中编程语言,还支持多种插件,是简洁、高效的代码高亮解决方案。科技爱好者博客就是使用了Prism.js 实现漂亮的代码语法高亮功能,今天我把Loper主题添加prismjs高亮代码方法分享给大家,请看以下操作!

高亮效果演示图片!

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

Loper主题添加prismjs高亮代码
版权声明:本站原创文章,于2017年04月6日,由 拽立网 发表,共 2072 字。
打赏