Loper主题添加prismjs高亮代码

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 字。

转载注明：Loper主题添加prismjs高亮代码 | 拽立网

赞 1

打赏