最新公告
  • 欢迎您光临小白博客,倾力营造网络新手最佳的学习成长环境和信息资源交流共享平台!立即加入我们
  • Crayon 代码高亮插件的一点美化

    Crayon 代码高亮插件的一点美化

    博客建好后尝试过一些代码高亮插件,因为 Crayon (Crayon Syntax Highlighter) 的功能比较齐全就选了这个。

    因为 Crayon 插件的默认样式太丑,就对它稍微进行了一些美化,一直想发出来,现在终于写好这篇博客了。

    修改了哪些地方

    高亮

    对默认的高亮效果都不太满意,所以用 Seti 主题的配色为 Crayon 做了一个高亮配色方案。

    代码块

    默认的代码块很丑,于是写了一段 CSS 来美化它,样式是仿(chao) 照(xi) Carbon 的。

    字体

    使用 CSS 引入了 “Hack” 字体。

    操作栏

    默认的操作栏也不好看,于是顺带重写了下操作栏,另外增加了复制代码的功能。

    效果

    效果如下

    配色方案

    Crayon 插件支持用户创建和导入自定义的配色方案。

    配色方案是一个 CSS 文件,需要将它放入 /wp-content/uploads/crayon-syntax-highlighter/themes/主题名/主题名.css 中来导入。

    你也可以在 Crayon 后台添加自己的配色方案,插件会自动帮你创建 CSS。

    如果你不喜欢 Seti 配色方案,请跳过这一段。

    下载并导入配色

    1. 下载 Seti CSS 配色文件(在该页面按 Ctrl + S),并将其放入 /wp-content/uploads/crayon-syntax-highlighter/themes/seti/seti.css 文件中。
    2. 在 Crayon 插件设置页面中选择 Seti 主题。

    字体

    如果你不喜欢 Hack 字体,请跳过这一段。

    将以下 CSS 插入页面,来将代码块字体替换为 Hack。

    html div.crayon-syntax , html div.crayon-syntax *{
        font-family: hack,consolas,sans-serif,monospace !important;
    }
    @font-face{font-family:'Hack';font-display:swap;src:url('//cdn.jsdelivr.net/font-hack/2.020/fonts/woff2/hack-regular-webfont.woff2?v=2.020') format('woff2'), url('//cdn.jsdelivr.net/font-hack/2.020/fonts/woff/hack-regular-webfont.woff?v=2.020') format('woff');font-weight:400;font-style:normal;}

    代码块样式

    只是改变了配色方案的代码块还是很丑,写了一段 CSS 来进一步美化代码块。

    在这之前,在 Crayon 插件设置页面中关闭 “显示工具栏” 等选项可以获得更好的效果。

    将这段 CSS 插入页面来美化代码块,你也可以修改该段 CSS 来更改效果。

    html div.crayon-syntax , html div.crayon-syntax *{
        text-rendering: optimizeLegibility;
        letter-spacing: 0.5px;
    }
    .crayon-syntax:not(.crayon-syntax-inline){
        padding: 22px 20px;
        border-radius: 6px;
        box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 20px;
        margin-top: 30px !important;
        margin-bottom: 30px !important;
    }
    .crayon-syntax:not(.crayon-syntax-inline):before {
        content: "";
        background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1NCIgaGVpZ2h0PSIxNCIgdmlld0JveD0iMCAwIDU0IDE0Ij48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEgMSkiPjxjaXJjbGUgY3g9IjYiIGN5PSI2IiByPSI2IiBmaWxsPSIjRkY1RjU2IiBzdHJva2U9IiNFMDQ0M0UiIHN0cm9rZS13aWR0aD0iLjUiPjwvY2lyY2xlPjxjaXJjbGUgY3g9IjI2IiBjeT0iNiIgcj0iNiIgZmlsbD0iI0ZGQkQyRSIgc3Ryb2tlPSIjREVBMTIzIiBzdHJva2Utd2lkdGg9Ii41Ij48L2NpcmNsZT48Y2lyY2xlIGN4PSI0NiIgY3k9IjYiIHI9IjYiIGZpbGw9IiMyN0M5M0YiIHN0cm9rZT0iIzFBQUIyOSIgc3Ryb2tlLXdpZHRoPSIuNSI+PC9jaXJjbGU+PC9nPjwvc3ZnPg==) no-repeat;
        background-position-y: center;
        height: 14px;
        width: 54px;
        margin-bottom: 25px;
        margin-left: 5px;
        display: block;
    }
    .crayon-main:not(.crayon-syntax-inline){
        padding-bottom: 10px !important;
    }
    .crayon-main::-webkit-scrollbar-track, .crayon-plain::-webkit-scrollbar-track {
        border: none;
        background: transparent !important;
    }
    .crayon-main::-webkit-scrollbar-thumb , .crayon-plain::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, .3) !important;
        box-shadow: none !important;
        border: none !important;
        border-radius: 10px;
        transition: background .3s ease;
    }
    .crayon-main::-webkit-scrollbar-thumb:hover , .crayon-plain::-webkit-scrollbar-thumb:hover {
        background: rgba(255, 255, 255, .5) !important;
    }
    .crayon-main::-webkit-scrollbar , .crayon-plain::-webkit-scrollbar {
        background: transparent;
        height: 6px;
    }
    .crayon-table .crayon-nums-content {
        padding-right: 5px !important;
    }
    .crayon-syntax *::selection {
        background-color: rgba(204, 226, 255, 0.2) !important;
    }

    控制按钮

    如果你不想要添加控制按钮,请跳过这一段。

    控制按钮位于代码块右上角,分别可以 切换行号显示,切换自动折行,复制代码。

    需要注意的是如果你的博客是 Pjax 加载的(如 Argon 主题),请特别阅读最后的 “对 Pjax 的额外处理” 这一段。

    1. 将这段 CSS 加入页面来设置控制按钮的样式,你也可以修改该段 CSS 来更改效果。

    注意:需要页面引入 Font Awesome 来正常显示控制按钮的图标。

    .crayon-syntax .crayon-control{
    	width: max-content;
    	width: -moz-max-content;
    	position: absolute;
    	top: 20px;
    	right: 30px;
    	user-select: none;
    	opacity: 0;
    	transition: all .2s ease;
    }
    .crayon-syntax:hover .crayon-control{
    	opacity: .4;
    }
    .crayon-syntax:hover .crayon-control:hover{
    	opacity: 1;
    }
    .crayon-syntax .crayon-control i.fa{
    	font: normal normal normal 14px/1 FontAwesome !important;
    }
    .crayon-control .crayon-control-btn {
    	display: inline-block;
    	opacity: .8;
    	transition: all .2s ease;
    	cursor: pointer;
    	margin-left: 15px;
    	width: 12px;
    	position: relative;
    }
    .crayon-control .crayon-control-btn:hover {
    	opacity: .5;
    }
    .crayon-control-btn:before {
    	position: absolute;
    	top: 22px;
    	left: -40px;
    	width: 97.5px;
    	text-align: center;
    	opacity: 0;
    	pointer-events: none;
    	transition: all .2s ease;
    	font-size: 12px;
    	font-family: sans-serif;
    }
    .crayon-control-btn:hover:before {
    	opacity: 1;
    	top: 25px;
    }
    .crayon-control-togglelinenumber:before {
    	content: "显示行号";
    }
    .crayon-control-togglebreakline:before {
    	content: "自动折行";
    }
    .crayon-control-copy:before {
    	content: "复制";
    }

    2. 将这段 JS 加入页面来给控制按钮添加功能。

    代码使用了 JQuery(因为懒),如果你不想使用 JQuery 可以将其改为无 JQuery 版本。

    注意:请自行将代码注释处的 alert 替换为自己的提示框代码(不替换也没问题,只是不太好看,我在这里用的是 Argon 主题中使用的 iziToast 库来提示)

    function addCrayonControl(){
    	$(".crayon-syntax:not(.crayon-syntax-inline):not(.crayon-control-added)").each(function(){
    		$(this).append("<div class='crayon-control'><div class='crayon-control-btn crayon-control-togglelinenumber' data-target-id='" + $(this).attr("id") + "'><i class='fa fa-list'></i></div><div class='crayon-control-btn crayon-control-togglebreakline' data-target-id='" + $(this).attr("id") + "'><i class='fa fa-align-left'></i></div><div class='crayon-control-btn crayon-control-copy' data-target-id='" + $(this).attr("id") + "'><i class='fa fa-clipboard'></i></div></div>").addClass("crayon-control-added");
    	});
    };
    addCrayonControl();
    $(document).on("click" , ".crayon-syntax .crayon-control .crayon-control-btn" , function(){
    		let $this = $(this);
    		if ($this.hasClass("crayon-control-togglelinenumber")){
    			CrayonSyntax.toggleNums($this.attr("data-target-id"));
    		}
    		if ($this.hasClass("crayon-control-togglebreakline")){
    			CrayonSyntax.toggleWrap($this.attr("data-target-id"));
    		}
    		if ($this.hasClass("crayon-control-copy")){
    			let input = document.createElement('textarea');
    		        document.body.appendChild(input);
            		$(input).val($("#" + $this.attr("data-target-id") + " .crayon-code")[0].innerText);
            		input.setAttribute("readonly", "readonly");
    		        input.setAttribute("style", "opacity: 0;mouse-events:none;");
    		        input.select();
    		        if (document.execCommand('copy')) {
    		            //提示复制成功
    		            alert("复制成功");
    		        } else {
    		            //提示复制失败
    		            alert("复制失败");
    		        }
    		document.body.removeChild(input);
    	}
    });

    对 Pjax 的额外处理

    如果你的博客是 Pjax 加载的(如 Argon 主题),请按照这一段添加对 Pjax 的特别处理。

    1. 将 /wp-content/plugins/crayon-syntax-highlighter/js/min/crayon.min.js 替换为这些 JS 代码

    function crayon_syntax_load_after_pjax_loaded(){
    	window.eval("var jQueryCrayon=jQuery;(function(a){CrayonUtil=new function(){var c=this;var b=null;c.init=function(){b=CrayonSyntaxSettings;c.initGET()};c.addPrefixToID=function(d){return d.replace(/^([#.])?(.*)
    /,\"
    1\"+b.prefix+\"$2\")};c.removePrefixFromID=function(e){var d=new RegExp(\"^[#.]?\"+b.prefix,\"i\");return e.replace(d,\"\")};c.cssElem=function(d){return a(c.addPrefixToID(d))};c.setDefault=function(e,f){return(typeof e==\"undefined\")?f:e};c.setMax=function(e,d){return e<=d?e:d};c.setMin=function(d,e){return d>=e?d:e};c.setRange=function(e,f,d){return c.setMax(c.setMin(e,f),d)};c.getExt=function(e){if(e.indexOf(\".\")==-1){return undefined}var d=e.split(\".\");if(d.length){d=d[d.length-1]}else{d=\"\"}return d};c.initGET=function(){window.currentURL=window.location.protocol+\"//\"+window.location.host+window.location.pathname;window.currentDir=window.currentURL.substring(0,window.currentURL.lastIndexOf(\"/\"));function d(e){e=e.split(\"+\").join(\" \");var h={},g,f=/[?&]?([^=]+)=([^&]*)/g;while(g=f.exec(e)){h[decodeURIComponent(g[1])]=decodeURIComponent(g[2])}return h}window.GET=d(document.location.search)};c.getAJAX=function(d,e){d.version=b.version;a.get(b.ajaxurl,d,e)};c.postAJAX=function(d,e){d.version=b.version;a.post(b.ajaxurl,d,e)};c.reload=function(){var d=\"?\";for(var e in window.GET){d+=e+\"=\"+window.GET[e]+\"&\"}window.location=window.currentURL+d};c.escape=function(d){if(typeof encodeURIComponent==\"function\"){return encodeURIComponent(d)}else{if(typeof escape!=\"function\"){return escape(d)}else{return d}}};c.log=function(d){if(typeof console!=\"undefined\"&&b.debug){console.log(d)}};c.decode_html=function(d){return String(d).replace(/&amp;/g,\"&\").replace(/&lt;/g,\"<\").replace(/&gt;/g,\">\")};c.encode_html=function(d){return String(d).replace(/&/g,\"&amp;\").replace(/</g,\"&lt;\").replace(/>/g,\"&gt;\")};c.getReadableColor=function(g,f){f=a.extend({amount:0.5,xMulti:1,yMulti:1.5,normalizeHue:[20,180],normalizeHueXMulti:1/2.5,normalizeHueYMulti:1},f);var d=tinycolor(g);var e=d.toHsv();var i={x:e.s,y:1-e.v};i.x*=f.xMulti;i.y*=f.yMulti;if(f.normalizeHue&&e.h>f.normalizeHue[0]&&e.h<f.normalizeHue[1]){i.x*=f.normalizeHueXMulti;i.y*=f.normalizeHueYMulti}var h=Math.sqrt(Math.pow(i.x,2)+Math.pow(i.y,2));if(h<f.amount){e.v=0}else{e.v=1}e.s=0;return tinycolor(e).toHexString()};c.removeChars=function(e,f){var d=new RegExp(\"[\"+e+\"]\",\"gmi\");return f.replace(d,\"\")}};a(document).ready(function(){CrayonUtil.init()});a.fn.bindFirst=function(c,e){this.bind(c,e);var b=this.data(\"events\")[c.split(\".\")[0]];var d=b.pop();b.splice(0,0,d)};a.keys=function(d){var c=[];for(var b in d){c.push(b)}return c};RegExp.prototype.execAll=function(c){var f=[];var b=null;while((b=this.exec(c))!=null){var e=[];for(var d in b){if(parseInt(d)==d){e.push(b[d])}}f.push(e)}return f};RegExp.prototype.escape=function(b){return b.replace(/[-[\]{}()*+?.,\\^|#\\s]/g,\"\\\\
    |#\\s]/g,\"\\\\
    &\")};String.prototype.sliceReplace=function(d,b,c){return this.substring(0,d)+c+this.substring(b)};String.prototype.escape=function(){var b={\"&\":\"&amp;\",\"<\":\"&lt;\",\">\":\"&gt;\"};return this.replace(/[&<>]/g,function(c){return b[c]||c})};String.prototype.linkify=function(b){b=typeof b!=\"undefined\"?b:\"\";return this.replace(/(http(s)?:\/\/(\S)+)/gmi,'<a href=\"
    1\"target=\"′+b+′\">
    1</a>')};String.prototype.toTitleCase=function(){var b=this.split(/\s+/);var c=\"\";a.each(b,function(e,d){if(d!=\"\"){c+=d.slice(0,1).toUpperCase()+d.slice(1,d.length);if(e!=b.length-1&&b[e+1]!=\"\"){c+=\" \"}}});return c}})(jQueryCrayon);jqueryPopup=Object();jqueryPopup.defaultSettings={centerBrowser:0,centerScreen:0,height:500,left:0,location:0,menubar:0,resizable:0,scrollbars:0,status:0,width:500,windowName:null,windowURL:null,top:0,toolbar:0,data:null,event:\"click\"};(function(a){popupWindow=function(d,c,f,b){f=typeof f!==\"undefined\"?f:null;b=typeof b!==\"undefined\"?b:null;if(typeof d==\"string\"){d=jQuery(d)}if(!(d instanceof jQuery)){return false}var e=jQuery.extend({},jqueryPopup.defaultSettings,c||{});d.handler=jQuery(d).bind(e.event,function(){if(f){f()}var g=\"height=\"+e.height+\",width=\"+e.width+\",toolbar=\"+e.toolbar+\",scrollbars=\"+e.scrollbars+\",status=\"+e.status+\",resizable=\"+e.resizable+\",location=\"+e.location+\",menuBar=\"+e.menubar;e.windowName=e.windowName||jQuery(this).attr(\"name\");var h=jQuery(this).attr(\"href\");if(!e.windowURL&&!(h==\"#\")&&!(h==\"\")){e.windowURL=jQuery(this).attr(\"href\")}var i,j;var k=null;if(e.centerBrowser){if(typeof window.screenY==\"undefined\"){i=(window.screenTop-120)+((((document.documentElement.clientHeight+120)/2)-(e.height/2)));j=window.screenLeft+((((document.body.offsetWidth+20)/2)-(e.width/2)))}else{i=window.screenY+(((window.outerHeight/2)-(e.height/2)));j=window.screenX+(((window.outerWidth/2)-(e.width/2)))}k=window.open(e.windowURL,e.windowName,g+\",left=\"+j+\",top=\"+i)}else{if(e.centerScreen){i=(screen.height-e.height)/2;j=(screen.width-e.width)/2;k=window.open(e.windowURL,e.windowName,g+\",left=\"+j+\",top=\"+i)}else{k=window.open(e.windowURL,e.windowName,g+\",left=\"+e.left+\",top=\"+e.top)}}if(k!=null){k.focus();if(e.data){k.document.write(e.data)}}if(b){b()}});return e};popdownWindow=function(b,c){if(typeof c==\"undefined\"){c=\"click\"}b=jQuery(b);if(!(b instanceof jQuery)){return false}b.unbind(c,b.handler)}})(jQueryCrayon);(function(f){f.fn.exists=function(){return this.length!==0};f.fn.style=function(B,E,A){var D=this.get(0);if(typeof D==\"undefined\"){return}var C=D.style;if(typeof B!=\"undefined\"){if(typeof E!=\"undefined\"){A=typeof A!=\"undefined\"?A:\"\";if(typeof C.setProperty!=\"undefined\"){C.setProperty(B,E,A)}else{C[B]=E}}else{return C[B]}}else{return C}};var d=\"crayon-pressed\";var a=\"\";var n=\"div.crayon-syntax\";var e=\".crayon-toolbar\";var c=\".crayon-info\";var w=\".crayon-plain\";var o=\".crayon-main\";var m=\".crayon-table\";var v=\".crayon-loading\";var h=\".crayon-code\";var p=\".crayon-title\";var l=\".crayon-tools\";var b=\".crayon-nums\";var j=\".crayon-num\";var q=\".crayon-line\";var g=\"crayon-wrapped\";var s=\".crayon-nums-content\";var u=\".crayon-nums-button\";var k=\".crayon-wrap-button\";var i=\".crayon-expand-button\";var t=\"crayon-expanded crayon-toolbar-visible\";var y=\"crayon-placeholder\";var x=\".crayon-popup-button\";var r=\".crayon-copy-button\";var z=\".crayon-plain-button\";CrayonSyntax=new function(){var I=this;var N=new Object();var ag;var H;var G=0;var Z;I.init=function(){if(typeof N==\"undefined\"){N=new Object()}ag=CrayonSyntaxSettings;H=CrayonSyntaxStrings;f(n).each(function(){I.process(this)})};I.process=function(aD,aE){aD=f(aD);var ar=aD.attr(\"id\");if(ar==\"crayon-\"){ar+=X()}aD.attr(\"id\",ar);CrayonUtil.log(ar);if(typeof aE==\"undefined\"){aE=false}if(!aE&&!aa(ar)){return}var au=aD.find(e);var aC=aD.find(c);var ap=aD.find(w);var aq=aD.find(o);var aB=aD.find(m);var aj=aD.find(h);var aG=aD.find(p);var aA=aD.find(l);var ay=aD.find(b);var av=aD.find(s);var az=aD.find(u);var am=aD.find(k);var ao=aD.find(i);var aF=aD.find(x);var at=aD.find(r);var al=aD.find(z);N[ar]=aD;N[ar].toolbar=au;N[ar].plain=ap;N[ar].info=aC;N[ar].main=aq;N[ar].table=aB;N[ar].code=aj;N[ar].title=aG;N[ar].tools=aA;N[ar].nums=ay;N[ar].nums_content=av;N[ar].numsButton=az;N[ar].wrapButton=am;N[ar].expandButton=ao;N[ar].popup_button=aF;N[ar].copy_button=at;N[ar].plainButton=al;N[ar].numsVisible=true;N[ar].wrapped=false;N[ar].plainVisible=false;N[ar].toolbar_delay=0;N[ar].time=1;f(w).css(\"z-index\",0);var aw=aq.style();N[ar].mainStyle={height:aw&&aw.height||\"\",\"max-height\":aw&&aw.maxHeight||\"\",\"min-height\":aw&&aw.minHeight||\"\",width:aw&&aw.width||\"\",\"max-width\":aw&&aw.maxWidth||\"\",\"min-width\":aw&&aw.minWidth||\"\"};N[ar].mainHeightAuto=N[ar].mainStyle.height==\"\"&&N[ar].mainStyle[\"max-height\"]==\"\";var ak;var ax=0;N[ar].loading=true;N[ar].scrollBlockFix=false;az.click(function(){CrayonSyntax.toggleNums(ar)});am.click(function(){CrayonSyntax.toggleWrap(ar)});ao.click(function(){CrayonSyntax.toggleExpand(ar)});al.click(function(){CrayonSyntax.togglePlain(ar)});at.click(function(){CrayonSyntax.copyPlain(ar)});B(ar);var an=function(){if(ay.filter('[data-settings~=\"hide\"]').length!=0){av.ready(function(){CrayonUtil.log(\"function\"+ar);CrayonSyntax.toggleNums(ar,true,true)})}else{ac(ar)}if(typeof N[ar].expanded==\"undefined\"){if(Math.abs(N[ar].main.outerWidth()-N[ar].table.outerWidth())<10){N[ar].expandButton.hide()}else{N[ar].expandButton.show()}}if(ax==5){clearInterval(ak);N[ar].loading=false}ax++};ak=setInterval(an,300);C(ar);f(j,N[ar]).each(function(){var aJ=f(this).attr(\"data-line\");var aI=f(\"#\"+aJ);var aH=aI.style(\"height\");if(aH){aI.attr(\"data-height\",aH)}});aq.css(\"position\",\"relative\");aq.css(\"z-index\",1);Z=(aD.filter('[data-settings~=\"touchscreen\"]').length!=0);if(!Z){aq.click(function(){A(ar,\"\",false)});ap.click(function(){A(ar,\"\",false)});aC.click(function(){A(ar,\"\",false)})}if(aD.filter('[data-settings~=\"no-popup\"]').length==0){N[ar].popup_settings=popupWindow(aF,{height:screen.height-200,width:screen.width-100,top:75,left:50,scrollbars:1,windowURL:\"\",data:\"\"},function(){F(ar)},function(){})}ap.css(\"opacity\",0);N[ar].toolbarVisible=true;N[ar].hasOneLine=aB.outerHeight()<au.outerHeight()*2;N[ar].toolbarMouseover=false;if(au.filter('[data-settings~=\"mouseover\"]').length!=0&&!Z){N[ar].toolbarMouseover=true;N[ar].toolbarVisible=false;au.css(\"margin-top\",\"-\"+au.outerHeight()+\"px\");au.hide();if(au.filter('[data-settings~=\"overlay\"]').length!=0&&!N[ar].hasOneLine){au.css(\"position\",\"absolute\");au.css(\"z-index\",2);if(au.filter('[data-settings~=\"hide\"]').length!=0){aq.click(function(){T(ar,undefined,undefined,0)});ap.click(function(){T(ar,false,undefined,0)})}}else{au.css(\"z-index\",4)}if(au.filter('[data-settings~=\"delay\"]').length!=0){N[ar].toolbar_delay=500}aD.mouseenter(function(){T(ar,true)}).mouseleave(function(){T(ar,false)})}else{if(Z){au.show()}}if(aD.filter('[data-settings~=\"minimize\"]').length==0){I.minimize(ar)}if(ap.length!=0&&!Z){if(ap.filter('[data-settings~=\"dblclick\"]').length!=0){aq.dblclick(function(){CrayonSyntax.togglePlain(ar)})}else{if(ap.filter('[data-settings~=\"click\"]').length!=0){aq.click(function(){CrayonSyntax.togglePlain(ar)})}else{if(ap.filter('[data-settings~=\"mouseover\"]').length!=0){aD.mouseenter(function(){CrayonSyntax.togglePlain(ar,true)}).mouseleave(function(){CrayonSyntax.togglePlain(ar,false)});az.hide()}}}if(ap.filter('[data-settings~=\"show-plain-default\"]').length!=0){CrayonSyntax.togglePlain(ar,true)}}var ai=aD.filter('[data-settings~=\"expand\"]').length!=0;if(!Z&&aD.filter('[data-settings~=\"scroll-mouseover\"]').length!=0){aq.css(\"overflow\",\"hidden\");ap.css(\"overflow\",\"hidden\");aD.mouseenter(function(){M(ar,true,ai)}).mouseleave(function(){M(ar,false,ai)})}if(ai){aD.mouseenter(function(){D(ar,true)}).mouseleave(function(){D(ar,false)})}if(aD.filter('[data-settings~=\"disable-anim\"]').length!=0){N[ar].time=0}if(aD.filter('[data-settings~=\"wrap\"]').length!=0){N[ar].wrapped=true}N[ar].mac=aD.hasClass(\"crayon-os-mac\");ac(ar);ab(ar);Y(ar)};var aa=function(ai){CrayonUtil.log(N);if(typeof N[ai]==\"undefined\"){N[ai]=f(\"#\"+ai);CrayonUtil.log(\"make \"+ai);return true}CrayonUtil.log(\"no make \"+ai);return false};var X=function(){return G++};var F=function(ai){if(typeof N[ai]==\"undefined\"){return aa(ai)}var aj=N[ai].popup_settings;if(aj&&aj.data){return}var al=N[ai].clone(true);al.removeClass(\"crayon-wrapped\");if(N[ai].wrapped){f(j,al).each(function(){var ao=f(this).attr(\"data-line\");var an=f(\"#\"+ao);var am=an.attr(\"data-height\");am=am?am:\"\";if(typeof am!=\"undefined\"){an.css(\"height\",am);f(this).css(\"height\",am)}})}al.find(o).css(\"height\",\"\");var ak=\"\";if(N[ai].plainVisible){ak=al.find(w)}else{ak=al.find(o)}aj.data=I.getAllCSS()+'<body class=\"crayon-popup-window\" style=\"padding:0; margin:0;\"><div class=\"'+al.attr(\"class\")+' crayon-popup\">'+I.removeCssInline(I.getHtmlString(ak))+\"</div></body>\"};I.minimize=function(al){var ak=f('<div class=\"crayon-minimize crayon-button\"><div>');N[al].tools.append(ak);N[al].origTitle=N[al].title.html();if(!N[al].origTitle){N[al].title.html(H.minimize)}var aj=\"crayon-minimized\";var ai=function(){N[al].toolbarPreventHide=false;ak.remove();N[al].removeClass(aj);N[al].title.html(N[al].origTitle);var am=N[al].toolbar;if(am.filter('[data-settings~=\"never-show\"]').length!=0){am.remove()}};N[al].toolbar.click(ai);ak.click(ai);N[al].addClass(aj);N[al].toolbarPreventHide=true;T(al,undefined,undefined,0)};I.getHtmlString=function(ai){return f(\"<div>\").append(ai.clone()).remove().html()};I.removeCssInline=function(ak){var aj=/style\s*=\s*\"([^\"]+)\"/gmi;var ai=null;while((ai=aj.exec(ak))!=null){var al=ai[1];al=al.replace(/\b(?:width|height)\s*:[^;]+;/gmi,\"\");ak=ak.sliceReplace(ai.index,ai.index+ai[0].length,'style=\"'+al+'\"')}return ak};I.getAllCSS=function(){var ak=\"\";var aj=f('link[rel=\"stylesheet\"]');var ai=[];if(aj.length==1){ai=aj}else{ai=aj.filter('[href*=\"crayon-syntax-highlighter\"], [href*=\"min/\"]')}ai.each(function(){var al=I.getHtmlString(f(this));ak+=al});return ak};I.copyPlain=function(ak,al){if(typeof N[ak]==\"undefined\"){return aa(ak)}var aj=N[ak].plain;I.togglePlain(ak,true,true);T(ak,true);var ai=N[ak].mac?\"\u2318\":\"CTRL\";var am=H.copy;am=am.replace(/%s/,ai+\"+C\");am=am.replace(/%s/,ai+\"+V\");A(ak,am);return false};var A=function(aj,al,ai){if(typeof N[aj]==\"undefined\"){return aa(aj)}var ak=N[aj].info;if(typeof al==\"undefined\"){al=\"\"}if(typeof ai==\"undefined\"){ai=true}if(L(ak)&&ai){ak.html(\"<div>\"+al+\"</div>\");ak.css(\"margin-top\",-ak.outerHeight());ak.show();Q(aj,ak,true);setTimeout(function(){Q(aj,ak,false)},5000)}if(!ai){Q(aj,ak,false)}};var B=function(ai){if(window.devicePixelRatio>1){var aj=f(\".crayon-button-icon\",N[ai].toolbar);aj.each(function(){var al=f(this).css(\"background-image\");var ak=al.replace(/\.(?=[^\.]+$)/g,\"@2x.\");f(this).css(\"background-size\",\"48px 128px\");f(this).css(\"background-image\",ak)})}};var L=function(ai){var aj=\"-\"+ai.outerHeight()+\"px\";if(ai.css(\"margin-top\")==aj||ai.css(\"display\")==\"none\"){return true}else{return false}};var Q=function(al,ak,aj,an,am,ap){var ai=function(){if(ap){ap(al,ak)}};var ao=\"-\"+ak.outerHeight()+\"px\";if(typeof aj==\"undefined\"){if(L(ak)){aj=true}else{aj=false}}if(typeof an==\"undefined\"){an=100}if(an==false){an=false}if(typeof am==\"undefined\"){am=0}ak.stop(true);if(aj==true){ak.show();ak.animate({marginTop:0},ah(an,al),ai)}else{if(aj==false){if(ak.css(\"margin-top\")==\"0px\"&&am){ak.delay(am)}ak.animate({marginTop:ao},ah(an,al),function(){ak.hide();ai()})}}};I.togglePlain=function(al,am,aj){if(typeof N[al]==\"undefined\"){return aa(al)}var ai=N[al].main;var ak=N[al].plain;if((ai.is(\":animated\")||ak.is(\":animated\"))&&typeof am==\"undefined\"){return}ae(al);var ao,an;if(typeof am!=\"undefined\"){if(am){ao=ai;an=ak}else{ao=ak;an=ai}}else{if(ai.css(\"z-index\")==1){ao=ai;an=ak}else{ao=ak;an=ai}}N[al].plainVisible=(an==ak);N[al].top=ao.scrollTop();N[al].left=ao.scrollLeft();N[al].scrollChanged=false;C(al);ao.stop(true);ao.fadeTo(ah(500,al),0,function(){ao.css(\"z-index\",0)});an.stop(true);an.fadeTo(ah(500,al),1,function(){an.css(\"z-index\",1);if(an==ak){if(aj){ak.select()}else{}}an.scrollTop(N[al].top+1);an.scrollTop(N[al].top);an.scrollLeft(N[al].left+1);an.scrollLeft(N[al].left)});an.scrollTop(N[al].top);an.scrollLeft(N[al].left);ab(al);T(al,false);return false};I.toggleNums=function(am,al,ai){if(typeof N[am]==\"undefined\"){aa(am);return false}if(N[am].table.is(\":animated\")){return false}var ao=Math.round(N[am].nums_content.outerWidth()+1);var an=\"-\"+ao+\"px\";var ak;if(typeof al!=\"undefined\"){ak=false}else{ak=(N[am].table.css(\"margin-left\")==an)}var aj;if(ak){aj=\"0px\";N[am].numsVisible=true}else{N[am].table.css(\"margin-left\",\"0px\");N[am].numsVisible=false;aj=an}if(typeof ai!=\"undefined\"){N[am].table.css(\"margin-left\",aj);ac(am);return false}var ap=(N[am].table.outerWidth()+J(N[am].table.css(\"margin-left\"))>N[am].main.outerWidth());var aq=(N[am].table.outerHeight()>N[am].main.outerHeight());if(!ap&&!aq){N[am].main.css(\"overflow\",\"hidden\")}N[am].table.animate({marginLeft:aj},ah(200,am),function(){if(typeof N[am]!=\"undefined\"){ac(am);if(!ap&&!aq){N[am].main.css(\"overflow\",\"auto\")}}});return false};I.toggleWrap=function(ai){N[ai].wrapped=!N[ai].wrapped;Y(ai)};I.toggleExpand=function(ai){var aj=!CrayonUtil.setDefault(N[ai].expanded,false);D(ai,aj)};var Y=function(ai,aj){aj=CrayonUtil.setDefault(aj,true);if(N[ai].wrapped){N[ai].addClass(g)}else{N[ai].removeClass(g)}E(ai);if(!N[ai].expanded&&aj){V(ai)}N[ai].wrapTimes=0;clearInterval(N[ai].wrapTimer);N[ai].wrapTimer=setInterval(function(){if(N[ai].is(\":visible\")){O(ai);N[ai].wrapTimes++;if(N[ai].wrapTimes==5){clearInterval(N[ai].wrapTimer)}}},200)};var ad=function(ai){if(typeof N[ai]==\"undefined\"){aa(ai);return false}};var J=function(aj){if(typeof aj!=\"string\"){return 0}var ai=aj.replace(/[^-0-9]/g,\"\");if(ai.length==0){return 0}else{return parseInt(ai)}};var ac=function(ai){if(typeof N[ai]==\"undefined\"||typeof N[ai].numsVisible==\"undefined\"){return}if(N[ai].numsVisible){N[ai].numsButton.removeClass(a);N[ai].numsButton.addClass(d)}else{N[ai].numsButton.removeClass(d);N[ai].numsButton.addClass(a)}};var E=function(ai){if(typeof N[ai]==\"undefined\"||typeof N[ai].wrapped==\"undefined\"){return}if(N[ai].wrapped){N[ai].wrapButton.removeClass(a);N[ai].wrapButton.addClass(d)}else{N[ai].wrapButton.removeClass(d);N[ai].wrapButton.addClass(a)}};var W=function(ai){if(typeof N[ai]==\"undefined\"||typeof N[ai].expanded==\"undefined\"){return}if(N[ai].expanded){N[ai].expandButton.removeClass(a);N[ai].expandButton.addClass(d)}else{N[ai].expandButton.removeClass(d);N[ai].expandButton.addClass(a)}};var ab=function(ai){if(typeof N[ai]==\"undefined\"||typeof N[ai].plainVisible==\"undefined\"){return}if(N[ai].plainVisible){N[ai].plainButton.removeClass(a);N[ai].plainButton.addClass(d)}else{N[ai].plainButton.removeClass(d);N[ai].plainButton.addClass(a)}};var T=function(aj,ai,al,ak){if(typeof N[aj]==\"undefined\"){return aa(aj)}else{if(!N[aj].toolbarMouseover){return}else{if(ai==false&&N[aj].toolbarPreventHide){return}else{if(Z){return}}}}var am=N[aj].toolbar;if(typeof ak==\"undefined\"){ak=N[aj].toolbar_delay}Q(aj,am,ai,al,ak,function(){N[aj].toolbarVisible=ai})};var R=function(ak,ai){var aj=f.extend({},ak);aj.width+=ai.width;aj.height+=ai.height;return aj};var P=function(ak,ai){var aj=f.extend({},ak);aj.width-=ai.width;aj.height-=ai.height;return aj};var U=function(ai){if(typeof N[ai].initialSize==\"undefined\"){N[ai].toolbarHeight=N[ai].toolbar.outerHeight();N[ai].innerSize={width:N[ai].width(),height:N[ai].height()};N[ai].outerSize={width:N[ai].outerWidth(),height:N[ai].outerHeight()};N[ai].borderSize=P(N[ai].outerSize,N[ai].innerSize);N[ai].initialSize={width:N[ai].main.outerWidth(),height:N[ai].main.outerHeight()};N[ai].initialSize.height+=N[ai].toolbarHeight;N[ai].initialOuterSize=R(N[ai].initialSize,N[ai].borderSize);N[ai].finalSize={width:N[ai].table.outerWidth(),height:N[ai].table.outerHeight()};N[ai].finalSize.height+=N[ai].toolbarHeight;N[ai].finalSize.width=CrayonUtil.setMin(N[ai].finalSize.width,N[ai].initialSize.width);N[ai].finalSize.height=CrayonUtil.setMin(N[ai].finalSize.height,N[ai].initialSize.height);N[ai].diffSize=P(N[ai].finalSize,N[ai].initialSize);N[ai].finalOuterSize=R(N[ai].finalSize,N[ai].borderSize);N[ai].initialSize.height+=N[ai].toolbar.outerHeight()}};var D=function(al,ao){if(typeof N[al]==\"undefined\"){return aa(al)}if(typeof ao==\"undefined\"){return}var aj=N[al].main;var aq=N[al].plain;if(ao){if(typeof N[al].expanded==\"undefined\"){U(al);N[al].expandTime=CrayonUtil.setRange(N[al].diffSize.width/3,300,800);N[al].expanded=false;var ap=N[al].finalOuterSize;N[al].placeholder=f(\"<div></div>\");N[al].placeholder.addClass(y);N[al].placeholder.css(ap);N[al].before(N[al].placeholder);N[al].placeholder.css(\"margin\",N[al].css(\"margin\"));f(window).bind(\"resize\",K)}var am={height:\"auto\",\"min-height\":\"none\",\"max-height\":\"none\"};var ai={width:\"auto\",\"min-width\":\"none\",\"max-width\":\"none\"};N[al].outerWidth(N[al].outerWidth());N[al].css({\"min-width\":\"none\",\"max-width\":\"none\"});var an={width:N[al].finalOuterSize.width};if(!N[al].mainHeightAuto&&!N[al].hasOneLine){an.height=N[al].finalOuterSize.height;N[al].outerHeight(N[al].outerHeight())}aj.css(am);aj.css(ai);N[al].stop(true);N[al].animate(an,ah(N[al].expandTime,al),function(){N[al].expanded=true;W(al)});N[al].placeholder.show();f(\"body\").prepend(N[al]);N[al].addClass(t);K()}else{var ar=N[al].initialOuterSize;var ak=N[al].toolbar_delay;if(ar){N[al].stop(true);if(!N[al].expanded){N[al].delay(ak)}var an={width:ar.width};if(!N[al].mainHeightAuto&&!N[al].hasOneLine){an.height=ar.height}N[al].animate(an,ah(N[al].expandTime,al),function(){af(al)})}else{setTimeout(function(){af(al)},ak)}N[al].placeholder.hide();N[al].placeholder.before(N[al]);N[al].css({left:\"auto\",top:\"auto\"});N[al].removeClass(t)}ae(al);if(ao){Y(al,false)}};var K=function(){for(uid in N){if(N[uid].hasClass(t)){N[uid].css(N[uid].placeholder.offset())}}};var af=function(ai){N[ai].expanded=false;V(ai);W(ai);if(N[ai].wrapped){Y(ai)}};var M=function(al,aj,am){if(typeof N[al]==\"undefined\"){return aa(al)}if(typeof aj==\"undefined\"||am||N[al].expanded){return}var ai=N[al].main;var ak=N[al].plain;if(aj){ai.css(\"overflow\",\"auto\");ak.css(\"overflow\",\"auto\");if(typeof N[al].top!=\"undefined\"){visible=(ai.css(\"z-index\")==1?ai:ak);visible.scrollTop(N[al].top-1);visible.scrollTop(N[al].top);visible.scrollLeft(N[al].left-1);visible.scrollLeft(N[al].left)}}else{visible=(ai.css(\"z-index\")==1?ai:ak);N[al].top=visible.scrollTop();N[al].left=visible.scrollLeft();ai.css(\"overflow\",\"hidden\");ak.css(\"overflow\",\"hidden\")}N[al].scrollChanged=true;C(al)};var C=function(ai){N[ai].table.style(\"width\",\"100%\",\"important\");var aj=setTimeout(function(){N[ai].table.style(\"width\",\"\");clearInterval(aj)},10)};var V=function(ak){var aj=N[ak].main;var ai=N[ak].mainStyle;aj.css(ai);N[ak].css(\"height\",\"auto\");N[ak].css(\"width\",ai.width);N[ak].css(\"max-width\",ai[\"max-width\"]);N[ak].css(\"min-width\",ai[\"min-width\"])};var ae=function(ai){N[ai].plain.outerHeight(N[ai].main.outerHeight())};var O=function(ai){f(j,N[ai]).each(function(){var al=f(this).attr(\"data-line\");var ak=f(\"#\"+al);var aj=null;if(N[ai].wrapped){ak.css(\"height\",\"\");aj=ak.outerHeight();aj=aj?aj:\"\"}else{aj=ak.attr(\"data-height\");aj=aj?aj:\"\";ak.css(\"height\",aj)}f(this).css(\"height\",aj)})};var ah=function(ai,aj){if(ai==\"fast\"){ai=200}else{if(ai==\"slow\"){ai=600}else{if(!S(ai)){ai=parseInt(ai);if(isNaN(ai)){return 0}}}}return ai*N[aj].time};var S=function(ai){return typeof ai==\"number\"}};f(document).ready(function(){CrayonSyntax.init()})})(jQueryCrayon);");
    }
    crayon_syntax_load_after_pjax_loaded();

    2. 在主题的 Pjax 加载完成后的回调函数中添加如下 JS 代码

    crayon_syntax_load_after_pjax_loaded();
    addCrayonControl();


    QQ扫一扫『小白官方群』

    第一时间获取最新网络动态

    加入小白官方群不迷路~

    小白博客所有资源均来自网络,由于网络资源安全性未知,使用前请自行甄别。小白博客如有侵犯到您的权利请及时与我们联系,我们将在48小时内删除侵权内容!
    小白博客 » Crayon 代码高亮插件的一点美化

    发表评论

    售后服务:

    • 售后服务范围 1、商业模板使用范围内问题免费咨询
      2、源码安装、模板安装(一般 ¥10-300)服务答疑仅限SVIP用户
      3、单价超过200元的模板免费一次安装,需提供服务器信息。
      付费增值服务 1、提供WordPress主题、Discuz模板、WHMCS、SWAPIDC、XUEIDC主题 优化等服务请详询在线客服
      2、承接 WordPress、Discuz、WHMCS、SWAPIDC、XUEIDC 等系统建站、安装、美化等服务
      3、服务器环境配置(一般 ¥30-300)
      4、网站中毒处理(需额外付费,500元/次/质保一个月)
      售后服务时间 周一至周日(法定节假日除外) 9:00-23:00
      免责声明 本站所提供的模板(主题/插件)等资源仅供学习交流,若使用商业用途,请购买正版授权,否则产生的一切后果将由下载用户自行承担,有部分资源为网上收集或仿制而来,若模板侵犯了您的合法权益,请来信通知我们(Email: [email protected]),我们会及时删除,给您带来的不便,我们深表歉意!

    Hi, 如果你对这款模板有疑问,可以跟我联系哦!

    联系作者
    • 340会员总数(位)
    • 261资源总数(个)
    • 1本周发布(个)
    • 0 今日发布(个)
    • 707稳定运行(天)

    提供最优质的资源集合

    开通SVIP 小白官方群