好玩代码:一段代码让文章插入代码高亮显示,适合emlog等等

本教程不适用于pjax网站  如需适用于pjax网站的教程请点击以下链接：

https://www.00ylw.com/code/137.html

        好的程序员写的代码整洁而规范，视觉上有一种美感。但是如果只是一个颜色的话，未免也会有些枯燥无味。使用高亮代码，可以让我们视觉上有一些美感、更适合阅读和编写代码。这也是很多编辑器工具都使用高亮代码的原因。当然，我们在网站上也可以使用高亮代码。

接下来我就跟大家介绍下 EMLOG添加高亮代码的具体图解教程

代码如下:

<!-- 代码高亮 -->
<script src="<?php echo TEMPLATE_URL; ?>js/prettify.js?url=vxia.net" type="text/javascript"></script>
<script type="text/javascript">
$(function(
) {$('pre').addClass('prettyprint linenums').attr('style', 'overflow:auto');
window.prettyPrint && prettyPrint();}
);
</script>

放到最下面也可以的。如图所示：

以上是PHP文件里面的  下面开始css部分

现在我们要做的就是修改CSS，添加CSS代码！添加到哪里？你模板文件一般不超过三个CSS文件，一般名称为style.css

代码如下：

.prettyprint,pre.prettyprint{background-color: #272822;border: 1px solid #272822;overflow: hidden;padding: 8px;}
.prettyprint.linenums,pre.prettyprint.linenums{-webkit-box-shadow: inset 40px 0 0 #39382E, inset 41px 0 0 #464741;-moz-box-shadow: inset 40px 0 0 #39382E, inset 41px 0 0 #464741;box-shadow: inset 40px 0 0 #39382E, inset 41px 0 0 #464741;}
.prettyprint.linenums ol,pre.prettyprint.linenums ol{margin: 0 0 0 33px;}
.prettyprint.linenums ol li,pre.prettyprint.linenums ol li{padding-left: 12px;color: #bebec5;line-height: 20px;margin-left: 0;list-style: decimal;}
.prettyprint .com{color: #93a1a1;}
.prettyprint .lit{color: #AE81FF;}
.prettyprint .pun,.prettyprint .opn, .prettyprint .clo{color: #F8F8F2;}
.prettyprint .fun{color: #dc322f;}
.prettyprint .str, .prettyprint .atv{color: #E6DB74;}
.prettyprint .kwd, .prettyprint .tag{color: #F92659;}
.prettyprint .typ, .prettyprint .atn, .prettyprint .dec, .prettyprint .var{color: #A6E22E;}
.prettyprint .pln{color: #66D9EF;}

css代码文件基本都是添加的最下面即可

改完之后再下载一个js文件上传到模板的js目录即可实现高亮

js路径和上面的代码里的路径保持一致才可以