自己动手添加EMLOG高亮代码

  • 2016-05-03
  • 0


由 ?若兮相言 于 2014-12-29 21:04 Monday 发表，已有1212人观看。

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

QQ图片20141229212216.jpg

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

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

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

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

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

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

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

首先大家要做的就是就是把代码高亮 JS 文件放入到你的模板文件夹 JS文件夹（如果没有就新建一个）里。老规矩，JS文件下载地址会放到文章的最下面。

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

代码如下： 

    
	
	
  1. 
		<!-- 代码高亮 -->
	
    2. 

	
  2. 
		<script src="<?php echo TEMPLATE_URL; ?>js/prettify.js?url=ycyjkj.com" type="text/javascript"></script>
	
    3. 

	
  3. 
		<script type="text/javascript">
	
    4. 

	
  4. 
		$(function() {
	
    5. 

	
  5. 
		$(’pre’).addClass(’prettyprint linenums’).attr(’style’, ’overflow:auto’);
	
    6. 

	
  6. 
		window.prettyPrint && prettyPrint();
	
    7. 

	
  7. 
		});
	
    8. 

	
  8. 
		</script>
	
    9.

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

QQ截图20141229204946.jpg

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

打开看下你的源码怎么样

QQ截图20141229205410.jpg

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

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

现在明白了，还有CSS文件没修改！

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

 或 main.css

代码： 

    
	
	
  1. 
		.prettyprint,
	
    2. 

	
  2. 
		pre.prettyprint {
	
    3. 

	
  3. 
		background-color: #272822;
	
    4. 

	
  4. 
		border: 1px solid #272822;
	
    5. 

	
  5. 
		overflow: hidden;
	
    6. 

	
  6. 
		padding: 8px;
	
    7. 

	
  7. 
		}
	
    8. 

	
  8. 
		.prettyprint.linenums,
	
    9. 

	
  9. 
		pre.prettyprint.linenums {
	
    10. 

	
  10. 
		-webkit-box-shadow: inset 40px 0 0 #39382E, inset 41px 0 0 #464741;
	
    11. 

	
  11. 
		-moz-box-shadow: inset 40px 0 0 #39382E, inset 41px 0 0 #464741;
	
    12. 

	
  12. 
		box-shadow: inset 40px 0 0 #39382E, inset 41px 0 0 #464741;
	
    13. 

	
  13. 
		}
	
    14. 

	
  14. 
		.prettyprint.linenums ol,
	
    15. 

	
  15. 
		pre.prettyprint.linenums ol {
	
    16. 

	
  16. 
		margin: 0 0 0 33px;
	
    17. 

	
  17. 
		}
	
    18. 

	
  18. 
		.prettyprint.linenums ol li,
	
    19. 

	
  19. 
		pre.prettyprint.linenums ol li {
	
    20. 

	
  20. 
		padding-left: 12px;
	
    21. 

	
  21. 
		color: #bebec5;
	
    22. 

	
  22. 
		line-height: 20px;
	
    23. 

	
  23. 
		margin-left: 0;
	
    24. 

	
  24. 
		list-style: decimal;
	
    25. 

	
  25. 
		}
	
    26. 

	
  26. 
		.prettyprint .com { color: #93a1a1; }
	
    27. 

	
  27. 
		.prettyprint .lit { color: #AE81FF; }
	
    28. 

	
  28. 
		.prettyprint .pun,
	
    29. 

	
  29. 
		.prettyprint .opn,
	
    30. 

	
  30. 
		.prettyprint .clo { color: #F8F8F2; }
	
    31. 

	
  31. 
		.prettyprint .fun { color: #dc322f; }
	
    32. 

	
  32. 
		.prettyprint .str,
	
    33. 

	
  33. 
		.prettyprint .atv { color: #E6DB74; }
	
    34. 

	
  34. 
		.prettyprint .kwd,
	
    35. 

	
  35. 
		.prettyprint .tag { color: #F92659; }
	
    36. 

	
  36. 
		.prettyprint .typ,
	
    37. 

	
  37. 
		.prettyprint .atn,
	
    38. 

	
  38. 
		.prettyprint .dec,
	
    39. 

	
  39. 
		.prettyprint .var { color: #A6E22E; }
	
    40. 

	
  40. 
		.prettyprint .pln { color: #66D9EF; }
	
    41. 

	
  41. 
		 
	
    42.

添加代码、保存、上传。

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

QQ图片20141229212216.jpg

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

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

QQ截图20141229234927.jpg

JS文件下载地址：

高亮代码JS下载地址

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

高亮代码JS下载地址

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

Theme by Qzhai