【wordpress】文章无插件实现高亮代码

2017-06-07、原创共计 23217 字、浏览 3,708 views

  • 需求场景

    作为一个IT行业Dog，技术博文少不了代码实例的展示；为了排版整洁，突出代码结构，并防止代码转意执行造成的排版错乱、代码成了特效类似的狗血事件，一款代码高亮代码的插件是很重要的；但是插件有时候并不好用，对一些个性主题很不友好啊！所以能够不用插件来实现代码高亮功能的技能还是很牛掰的！

友情提示

其实，博主很中意百度的那款UEdit编辑器的，其功能之完善在国内堪称完美，可惜本人不才尝试几次都失败了；不过博主有幸意外的得到了【拽立网】博主大神的无私分享：博客个人主题prism loper的高亮代码；下面也将把使用过程分享出来，并新增了按钮功能；

原文摘自：Loper主题增加高亮代码免插件

♠操作过程♠

①、首先是prism高亮功能的js和css样式：

♦js代码可以直接复制到prism.js文件中 【显示↓/↑隐藏】

♦css代码可以直接复制到prism.css文件中 【显示↓/↑隐藏】

 

特别注意

这里贵友可直接到上面给的链接文章中下载文件，本站暂不支持附件加载，所以就把代码贴出来供大家使用；建议复制粘贴到两个文件中并放到贵友博客主题目录的css和js目录中；

 ②、调用上面的两个文件：

友链博文中的那段调用代码，本博主试了好像不好用，不生效；

索性，由于博主也仅仅在文章页面需要这个高亮效果，所以直接在single.php文件中调用；

<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/css/prism.css" />
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/prism.js"></script>

③、高亮代码使用方法：

和原文一样，这个时候我们已经可以直接使用了，在文本编辑模式下输入；

♦直接显示高亮，不显示行号：

<pre><code class="language-markup"> 填写你放的代码 </code></pre>

♦显示行号，并使用php代码演示：

<pre class="line-numbers"><code class="language-php"> 填写你放的代码 </code></pre>

♦同理，如果我们需要css、js等样式直接修改language就可以：

<pre class="line-numbers"><code class="language-css"> 填写你放的代码 </code></pre>
<pre class="line-numbers"><code class="language-js"> 填写你放的代码 </code></pre>
特别注意

这里很有必要告诉你，我们知道wp文章编辑可以支持html标签的，而这个必须在文本模式下输入才能生效；同理，如上我输入高亮代码的pre和code标签会被识别，这正是我们想要的，但当我们在上面“填写你放的代码”的地方，输入了我们要放的代码，且在文本编辑模式下，那么当我们发布时，本来我们是想要展示的代码也会被浏览器识别并执行的；要怎么做呢？代码方法一定有的但本人能力有限，下面提供一人为性的操作方案；

④、为想要展示的代码转义：

我们知道几个简单的html符号转意：

特此参考
字符 十进制 转义字符
" &#34; &quot;
& &#38; &amp;
< &#60; &lt;
> &#62; &gt;
不断开空格(non-breaking space) &#160; &nbsp;

方法有两个，最简单的是，在文本编辑模式输入高亮标签pre、code，然后在展示代码出随意填写几个字母代替，切换到可视化编辑界面，粘贴需要展示的代码并删除砂上面随意输的几个字符，再次切换到文本编辑界面，你会发现，如“<”“>”字符已经被转义为转义字符了；

另一个方法就是，手动修改字符转义，但是这仅适用在几行代码的情况下，手动输入；

而一些插件会在可视化编辑窗口添加高亮按钮，其本来就是在可视化界面添加的代码自然没有问题的；

当然本博主也在此基础上添加了按钮功能，不过是集成在文本编辑工具栏中的，所以也要有如上操作！

⑤、文章文本编辑添加高亮功能按钮：

function appthemes_add_pre_core() {
?><script type="text/javascript">// <![CDATA[ 
QTags.addButton( 'pre_core>','pre_core','<pre class="line-numbers"><code class="language-markup">','展示代码处</code></pre>' );
// ]]></script><?php }
add_action('admin_print_footer_scripts', 'appthemes_add_pre_core' );

如此便可在文本编辑模式下，点击两次按钮，并切换到可视化窗口，键入要展示的代码放在展示代码处；

⑥、由个人主题样式引起的冲突问题：

我们知道高亮功能终究也是通过js和css来改变文本的样式，如果个人主题样式中如style.css文本中有关于pre、code标签的样式定义，很可能引起冲突，从而达到效果不理想或以前文章中pre代码出现混乱；

如本博主的样式，如果是pre+code则是如上的高亮特效，如果是直接<pre></pre>则是下面这种灰色方框的效果，这得益于主题样式文件style.css中的如下代码；

code, pre {
 display: block;
 font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
 line-height: 0.8em;
 word-break: break-all;
 word-wrap: break-word;
 white-space: pre;
 white-space: pre-wrap;
}
pre {
 background:#f5f5f5;
 border: 1px solid #d6d6d6;
 padding: 2em;
 line-height: 1.5em;
 margin: 0 0 1.5em;
 -webkit-border-radius: 3px;
 -moz-border-radius: 3px;
 border-radius: 3px;
}

所幸，博主的主题代码pre样式和prism高亮功能并不影响；如果影响找到它并注释或删除即可；

如此看来，prism高亮还是很炫酷的，此外其在右上脚注释了代码语言类别和复制功能，代码注释处还有小圆点高亮特效，再次感谢拽立网博主大神的大爱！

2017-09-11日更新

提示：如果你不喜欢这种模式，可以去官方网自定义高亮代码！http://prismjs.com/download.html

本文第⑤小节在后台编辑器添加高亮功能按钮有错误；

参考博文：【wordpress】Uncaught ReferenceError: QTags is not defined

更新如下：

function appthemes_add_pre_core() {
?><script type="text/javascript">if ( typeof QTags != 'undefined' ) {
QTags.addButton( 'pre_core>','pre_core','<pre class="line-numbers"><code class="language-markup">','展示代码处</code></pre>' );
}</script><?php }
add_action('admin_print_footer_scripts', 'appthemes_add_pre_core' );

(好的就分享到这里，如果您有高见或好的分享，记得留言哦！）

Edit@bigmouth【原创博文】®【经验汇总】

原创文章，转载请注明：转自于公牛博客

本文链接地址:【wordpress】文章无插件实现高亮代码

标签:
9
赞 福祝福我们的祖国繁荣昌盛 享
    • 请尽情挥洒您的笔墨！
    点击这里给我发消息

    QQ在线

    表情
    点击这里给我发邮件

    邮件留言

    欢迎来到公牛博客更多分享更多精彩记录美丽点亮生活

    公牛博客·统计碑运行：3061 D
    博文：215 P
    评论：452 S