AIDE技术官网
AIDEZY.COM

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

AIDE技术网-aidezy.com
Emlog代码高亮增加复制按钮插件教程

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

前言:

今天AIDE技术网给长朋友们讲解Emlog代码高亮如何不用插件实现。

正文:

效果图:

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

<!-- 代码高亮 -->
<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标签内的内容到剪贴

搜一下

赞(0) 打赏
AIDE技术网-aidezy.com 广告
AIDE技术网-aidezy.com 广告

来都来了!评论一下呗! 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址 (选填)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

Q Q 登 录
切换登录

注册