Hexo-博客代码块样式美化
下⾯的代码修改基于matery主题，不同的主题可能存在⼀些差异，但也相差⽆⼏，⾃⼰琢磨琢磨；另外，如果原有关于代码块配置代码，请删掉，不然可能会发⽣冲突导致⽆法展⽰效果。
1】预览
直接看效果：
2】配置
1.⾸先在themes/matery/source/libs下创建⼀个codeBlock⽂件夹，后⾯在该⽂件夹下创建五个.js⽂件
创建codeBlockFuction.js⽂件夹，写⼊下⾯代码：
// 代码块功能依赖
$(function(){
$('pre').wrap('<div class="code-area" ></div>');
});
创建codeBLang.js⽂件夹，写⼊下⾯代码：
// 代码块语⾔识别
$(function(){
var $highlight_lang =$('<div class="code_lang" title="代码语⾔"></div>');
$('pre').after($highlight_lang);
$('pre').each(function(){
var code_language =$(this).attr('class');
if(!code_language){
return true;
};
var lang_name = place("line-numbers","").trim().replace("language-","").trim();
/
/ ⾸字母⼤写
lang_name = lang_name.slice(0,1).toUpperCase()+ lang_name.slice(1);
$(this).siblings(".code_lang").text(lang_name);
});
});
创建codeCopy.js⽂件夹，写⼊下⾯代码：
// 代码块⼀键复制
$(function(){
var $copyIcon =$('<i class="fa fa-copy code_copy" title="复制代码" aria-hidden="true"></i>');
$('.code-area').prepend($copyIcon);
new ClipboardJS('.fa-copy',{
target:function(trigger){
ElementSibling;
}
});
});
创建clipboard.min.js⽂件夹，写⼊下⾯代码：
/*!
* clipboard.js v2.0.4
* zenorocha.github.io/clipboard.js
*
* Licensed MIT © Zeno Rocha
*/
!function(t, e){
"object"==typeof exports &&"object"==typeof module ? ports =e():"function"==typeof define && define.amd ?define([], e):"object"==type of exports ? exports.ClipboardJS =e(): t.ClipboardJS =e()
}(this,function(){
return function(n){
var o ={};
function r(t){
if(o[t])return o[t].exports;
var e = o[t]={
i: t,
l:!1,
exports:{}
};
return n[t].ports, e, e.exports, r), e.l =!0, e.exports
}
return r.m = n, r.c = o, r.d=function(t, e, n){
r.o(t, e)|| Object.defineProperty(t, e,{
enumerable:!0,
get: n
})
}, r.r=function(t){
"undefined"!=typeof Symbol && StringTag && Object.defineProperty(t, StringTag,{
value:"Module"
}), Object.defineProperty(t,"__esModule",{
value:!0
})
}, r.t=function(e, t){
if(1& t &&(e =r(e)),8& t)return e;
if(4& t &&"object"==typeof e && e && e.__esModule)return e;
var n = ate(null);
if(r.r(n), Object.defineProperty(n,"default",{
enumerable:!0,
value: e
}),2& t &&"string"!=typeof e)
for(var o in e) r.d(n, o,function(t){
return e[t]
}.bind(null, o));
return n
}, r.n=function(t){
var e = t && t.__esModule ?function(){
return t.default
}:function(){
return t
};
return r.d(e,"a", e), e
return r.d(e,"a", e), e
}, r.o=function(t, e){
return Object.prototype.hasOwnProperty.call(t, e)
}, r.p ="",r(r.s =0)
}([function(t, e, n){
"use strict";
var r ="function"==typeof Symbol &&"symbol"==typeof Symbol.iterator ?function(t){
return typeof t
}:function(t){
return t &&"function"==typeof Symbol && t.constructor === Symbol && t !== Symbol.prototype ?"symbol":typeof t
},
i=function(){
function o(t, e){
for(var n =0; n < e.length; n++){
var o = e[n];
}
return function(t, e, n){
return e &&o(t.prototype, e), n &&o(t, n), t
}
}(),
a =o(n(1)),
c =o(n(3)),
u =o(n(4));
function o(t){
return t && t.__esModule ? t :{
default: t
}
}
var l=function(t){
function o(t, e){
!function(t, e){
if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")
}(this, o);
var n=function(t, e){
if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
return!e ||"object"!=typeof e &&"function"!=typeof e ? t : e
}(this,(o.__proto__ || PrototypeOf(o)).call(this));
solveOptions(e), n.listenClick(t), n
}
return function(t, e){
if("function"!=typeof e &&null!== e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);
t.prototype = ate(e && e.prototype,{
constructor:{
value: t,
enumerable:!1,
writable:!0,
configurable:!0
}
}), e &&(Object.setPrototypeOf ? Object.setPrototypeOf(t, e): t.__proto__ = e)
}(o, c.default),i(o,[{
key:"resolveOptions",
value:function(){
var t =0< arguments.length &&void0!== arguments[0]? arguments[0]:{};
this.action ="function"==typeof t.action ? t.action :this.defaultAction,this.target ="function"==typeof t.target ? t.target :this. t ="function"== ? t.text :this.ainer ="object"===ainer)? t.container : document.body }
},{
key:"listenClick",
value:function(t){
var e =this;
this.listener =(0, u.default)(t,"click",function(t){
Click(t)
Click(t)
})
}
},{
key:"onClick",
value:function(t){
var e = t.delegateTarget || t.currentTarget;
this.clipboardAction &&(this.clipboardAction =null),this.clipboardAction =new a.default({
action:this.action(e),
target:this.target(e),
(e),
ainer,
trigger: e,
emitter:this
})
}
},{
key:"defaultAction",
value:function(t){
return s("action", t)
}
},{
key:"defaultTarget",
value:function(t){
var e =s("target", t);
if(e)return document.querySelector(e)
}
},{
key:"defaultText",
value:function(t){
js argumentsreturn s("text", t)
}
},{
key:"destroy",
value:function(){
this.listener.destroy(),this.clipboardAction &&(this.clipboardAction.destroy(),this.clipboardAction =null)
}
}],[{
key:"isSupported",
value:function(){
var t =0< arguments.length &&void0!== arguments[0]? arguments[0]:["copy","cut"],
e ="string"==typeo
f t ?[t]: t,
n =!!document.queryCommandSupported;
return e.forEach(function(t){
n = n &&!!document.queryCommandSupported(t)
}), n
}
}]), o
}();
function s(t, e){
var n ="data-clipboard-"+ t;
if(e.hasAttribute(n))Attribute(n)
}
},function(t, e, n){
"use strict";
var o, r ="function"==typeof Symbol &&"symbol"==typeof Symbol.iterator ?function(t){
return typeof t
}:function(t){
return t &&"function"==typeof Symbol && t.constructor === Symbol && t !== Symbol.prototype ?"symbol":typeof t },
i=function(){
function o(t, e){
for(var n =0; n < e.length; n++){
for(var n =0; n < e.length; n++){
var o = e[n];
}
return function(t, e, n){
return e &&o(t.prototype, e), n &&o(t, n), t
}
}(),
a =n(2),
c =(o = a)&& o.__esModule ? o :{
default: o
};
var u=function(){
function e(t){
!function(t, e){
if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")
}(this, e),solveOptions(t),this.initSelection()
}
return i(e,[{
key:"resolveOptions",
value:function(){
var t =0< arguments.length &&void0!== arguments[0]? arguments[0]:{};
this.action = t.ainer = t.itter = t.emitter,this.target = t. = t.igger = t.trigger,this.selected Text =""
}
},{
key:"initSelection",
value:function(){
< ?this.selectFake():this.target &&this.selectTarget()
}
},{
key:"selectFake",
value:function(){
var t =this,
e ="rtl"== Attribute("dir");
veFake()
},this.fakeHandler =ainer.addEventListener("click",this.fakeHandlerCallback)||!0,this.fakeElem = ateElement("textarea"), this.fakeElem.style.fontSize ="12pt",this.fakeElem.style.border ="0",this.fakeElem.style.padding ="0",this.fakeElem.style.margin ="0",this.fakeElem.styl e.position ="absolute",this.fakeElem.style[e ?"right":"left"]="-9999px";
var n = window.pageYOffset || document.documentElement.scrollTop;
this.p = n +"px",this.fakeElem.setAttribute("readonly",""),this.fakeElem.value =,ainer.appendChild(this.fakeEl em),this.selectedText =(0, c.default)(this.fakeElem),pyText()
}
},{
key:"removeFake",
value:function(){
this.fakeHandler &&(veEventListener("click",this.fakeHandlerCallback),this.fakeHandler =null,this.fakeHandlerCallback =nu ll),this.fakeElem &&(veChild(this.fakeElem),this.fakeElem =null)
}
},{
key:"selectTarget",
value:function(){
this.selectedText =(0, c.default)(this.target),pyText()
}
},{
key:"copyText",
value:function(){
var e =void0;
try{
e = Command(this.action)
}catch(t){
e =!1
}
this.handleResult(e)

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。