Emlog代码高亮+复制功能 纯代码技术教程

近期有不少emlog的站长在群问代码怎么高亮,写的文章中有一部分是代码如何区分开?怎么能让别人快速的复制?今天,就在emlog网给大家讲解如何利用存代码的方式实现代码高亮+复制功能。


Emlog代码高亮教程

emlog想要实现代码高亮其实很简单,而且可以不需要通过插件的形式(插件的弊端:插件安装越多,网站打开越卡)。


1、文章模版添加如下js代码,默认路径:content/templates/模版名称/echo_log.php

<script src="https://www.cnhack.me/content/templates/p4Devise/js/prettify.js?ver=2.1" type="text/javascript"></script>  <script type="text/javascript">  $(function() {  $('pre').addClass('prettyprint linenums').attr('style', 'overflow:auto');  window.prettyPrint && prettyPrint();  });  </script>

Emlog代码高亮+复制功能 纯代码技术教程,61070485759bf028.jpg,分享,教程,建站,经验,百度,Emlog教程,技术,图文教程,图文,Emlog插件,第1张

2、增加css美化样式,放在公共调用的css样式文件中即可(可以在header里面查看公共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;  }

Emlog代码高亮+复制功能 纯代码技术教程,8e69cc483cad8be3.jpg,分享,教程,建站,经验,百度,Emlog教程,技术,图文教程,图文,Emlog插件,第2张

完成以上两步即可实现emlog代码高亮,至于想要实现emlog代码复制功能,建议采用插件的实现,复制会涉及到js,而且还需要Jquery支持库,所以我会在下一节教大家如何使用插件实现代码复制功能。


好了,关于Emlog代码高亮教程,就分享到这里,如果你还有什么不懂的,欢迎评论区留言交流。

相关文章

您需要 登录账户 后才能发表评论

发表评论 取消回复

电子邮件地址不会被公开。 必填项已用*标注