Emlog代码高亮增加复制按钮插件教程

发布日期:2018-04-18 22:36:02 作者:冬镜SEO

  • 正文内容
  • 相关推荐
原创

今天重庆SEO长朋友们讲解Emlog代码高亮如何不用插件实现(文章尾部提供插件下载)

看效果的直接看本站就行

Emlog代码高亮增加复制按钮插件

找到模版文件夹下的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>
然后添加CSS美化代码,加到CSS文件里面就行了,只要你在header模版里面调用就行
.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; }

上面这个方式是用纯代码的方式来实现的,相信对懒人来说不是一个福音,下面是冬镜为懒人提供的插件,安装直接使用就行

这是一个为代码高亮添加复制代码功能的插件,你只要用pre标签包含代码内容,就会自动添加一个复制按钮

点击复制按钮就会自动复制pre标签内的内容到剪贴板

你可以点击这个复制按钮试试便知

提示:如果你安装了插件不起作用,那请看看你的页面是否引用的Jquery支持库

管理员设置回复可下载

特别声明

本文为 冬镜SEO 原创发布,仅代表作者观点,不代表冬镜博客网的观点或立场,冬镜博客网仅提供信息发布平台,合作供稿、侵权删除、反馈建议请联系520@520xx.cc

分享SEO优化技术及网站优化教程,一个权威的SEO博客.

标签:

标题:Emlog代码高亮增加复制按钮插件教程

链接:http://uqseo.com/emlog/41.html

版权:若无特殊标注皆为 冬镜SEO 原创版权,转载请以链接形式注明作者及原始出处

发表评论

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

评论

31条评论
  1. avatar

    若离风 Lv.1 Chrome 70.0.3538.80 Chrome 70.0.3538.80 Android 9 Android 9 回复

    试试

    云南省昆明市 移动GSM/TD-SCDMA/LTE全省共用出口

    1. avatar

      锟斤拷锟斤拷 Lv.1 Sogou Explorer Sogou Explorer Windows 7 Windows 7 回复

      感谢!!

      广东省东莞市 电信

      1. avatar

        腾讯视频 Lv.5 Chrome 75.0.3770.142 Chrome 75.0.3770.142 Windows Windows 回复

        好东西 不解释啊

        云南省昆明市 电信

        1. avatar

          亦安 Lv.1 Chrome 77.0.3865.120 Chrome 77.0.3865.120 Windows Windows 回复

          谢谢博主分享

          云南省楚雄州 联通

          1. avatar

            晴川门户网 Lv.4 Chrome 62.0.3202.94 Chrome 62.0.3202.94 Windows 7 x64 Edition Windows 7 x64 Edition 回复

            3我去俄第五代颇为得唔得达维多娃达维多娃

            浙江省宁波市 电信