自己动手添加EMLOG高亮代码



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


QQ图片20141229212216.jpg


关于高亮代码,EMLOG的插件有很多,我也试用了几个,但是都感觉不太好,没有达到自己想要的要求



当然自己一直想修改下高亮代码,也是一直没时间修改。


前段时间看到网上有关于高亮代码的一些说明,当时好像也弄了,但是没太专心弄这个,所以也就不了了之了。


这两天把模板更换完成之后,剩下的主要就是这些细节了,所以这个高亮代码就是重点了!


刚刚也说了,之前我试过了,没有成功,今天好像开窍了一般,把这个源码添加成功了!


注:自己要手动添加的话,需要先把其它的高亮插件关闭,然后再自己添加修改,要不然可能会跟插件冲突。


下面我就跟大家介绍下 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>


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

QQ截图20141229204946.jpg


修改好源码之后,把这个文章上传到你的空间里。


打开看下你的源码怎么样

QQ截图20141229205410.jpg


这是在我本机环境里测试的。有同学说了,这高亮是高亮了,但是就这样的效果?还不如没高亮呢!你先别急,重点都在下面呢!

我之前就是犯了这个错误,看到这样,还不如不弄,以为是文件的错误或者修改的不对,也就放弃了。

现在明白了,还有CSS文件没修改!


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

 或 main.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; }


添加代码、保存、上传。


然后再看下你现在的 代码 是怎么样的


QQ图片20141229212216.jpg


效果还不错的吧!如果感觉图片看的不清楚的话,也可以直接看下本文的高亮代码。


PS:要把代码复制到编辑器中的“插入程序代码”对话框中,这样代码才会高亮显示。

QQ截图20141229234927.jpg


JS文件下载地址:



高亮代码JS下载地址


高亮代码JS下载地址 提取码:d4d0


高亮代码JS下载地址





感谢 骑猪看月亮 网站分享的 高亮代码 :http://www.qzkyl.cn/post-81.html  在这里要表示感谢!


标签: 高亮代码

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.vxia.net/post-377.html

相关推荐

评论

  1. 土豆侠
    2017-08-31 10:21
    跪求小仓鼠整体代码! 蟹蟹~~~ 万分感谢!!!   onesuccessful@qq.com
    1. 2017-09-01 17:25
      @土豆侠:只是一个FLASH文件而已。
      http://www.vxia.net/image/vnu.swf
  1. 2016-12-01 18:54
    带html标签的显示不出来啊,怎么解决
    1. 2016-12-01 21:24
      @千变郎君:具体详情可在群中反馈交流
  1. 2015-06-27 12:40
    楼主你的下载样式是什么插件
    1. 2015-06-27 20:24
      @Liangge:下载样式?具体是指哪个?
    1. 2015-06-29 15:07
      @℡若兮相言:就是百度云盘下载 360云盘下载那个
    1. 2015-06-29 15:08
      @℡若兮相言:就是百度云盘下载 360云盘下载那个
  1. 2015-04-08 21:10
    这个要支持。一直想做 au3代码的高亮,但一点这高亮方式的概念都没有
    1. 2015-04-10 20:23
      @绿色风:我也是不懂,从网上借鉴的别人的JS文件
  1. 2014-12-30 07:02
    大力支持!!!
    1. 2014-12-30 15:19
      @王语双个人:感谢支持~添加代码高亮之后视觉上会更美观些
  1. 2014-12-29 23:47
    {~}不错 哦,博主亲自帮我测试的
    1. 2014-12-29 23:50
      @青春博客:要把代码复制到编辑器中的“插入程序代码”对话框中,这样代码才会高亮显示。
  1. 2014-12-29 23:22
    试用了一下   不好使啊    不知道是不是css冲突了
    1. 2014-12-29 23:28
      @青春博客:可能跟模板方面的CSS有关,你审查元素具体看下
    1. 2014-12-29 23:34
      @青春博客:对了的,如果自己添加的话,需要把其它的的高亮插件先关闭,要不然可能会存在冲突。
  1. 2014-12-29 23:07
    谢谢分享{微笑}{大笑}{惊}{献花}
    1. 2014-12-29 23:15
      @易淘金股票池:共同交流学习~~

你肿么看?

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。