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支持库

管理员设置回复可下载

搜一下

标签:

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

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

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

发表评论

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

评论

23条评论
  1. avatar

    唔! Lv.1 Chrome 63.0.3239.26 Chrome 63.0.3239.26 Windows 7 x64 Edition Windows 7 x64 Edition 回复

    多谢分享

    表情 骚年,我怀疑你写了一篇假的文章!

    浙江省杭州市 电信

    1. avatar

      技术张儿 Lv.1 Chrome 70.0.3538.67 Chrome 70.0.3538.67 Windows Windows 回复

      表情 写得好好哟,我要给你生猴子!

      亚太地区

      1. avatar

        游戏人生 Lv.2 Chrome 63.0.3239.132 Chrome 63.0.3239.132 Windows 7 x64 Edition Windows 7 x64 Edition 回复

        滴!学生卡!打卡时间:下午4:36:59,请上车的乘客系好安全带~

        浙江省温州市 电信

        1. avatar

          小王先森 Lv.1 Chrome 72.0.3626.121 Chrome 72.0.3626.121 Windows 7 x64 Edition Windows 7 x64 Edition 回复

          表情 写得好好哟,我要给你生猴子!

          贵州省 移动

          1. avatar

            AIAXC Lv.1 Chrome 63.0.3239.132 Chrome 63.0.3239.132 Windows Windows 回复

            滴!学生卡!打卡时间:上午1:22:39,请上车的乘客系好安全带~

            广东省广州市 鹏博士长城宽带