自己动手添加EMLOG高亮代码

技术教程 2年前 (2018) Mgo
1

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

类似

function MyObj(men1,men2,men3)
{
this.men1=men1;//属性
this.men2=men2;//属性
this.men3=men3;//属性
this.all=fuckall;//方法
}
function fuckall ()
{
return this.men1+String(this.men2)+this.men3;
}
function OX(what,time,temp)//返回自定义对象
{
var sb=new MyObj(what,time,temp);
return sb;
}
function OXOX(what,time,temp)//调用自定义对象
{
var sb=new MyObj(what,time,temp);
return sb.all();
}//JS自定义对象掩演示

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

首先大家要做的就是就是把代码高亮 JS 文件放入到你的模板 【站长聚集地首发】文件夹 JS文件夹(如果没有就新建一个)里。老规矩,JS文件下载站长聚集地下载会放到文章的最下面。


然后把一段高亮添加到EMLOG的博文中,也就是echo_log.php (如果你的博客不是EMLOG,就选择添加到显示博客文章的PHP文件)


代码如下:

<!-- 代码高亮 -->
<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>

放到任意可以执行js的位置。然后保存。


接着将下面的css代码保存到你的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; }

最后下载js 放到你的服务器 并且修改相关路径

下载站长聚集地下载链接: https://pan.baidu.com/s/1gf2a2d1 密码: 7uqa

版权声明:Mgo 发表于 2018-10-23 16:49:43。
转载请注明:自己动手添加EMLOG高亮代码 | 站长聚集地

1 条评论

  • 米扑博客

    非常赞的分享,正在研究学习 谢谢。

    回复