P
Hello there!
Hello! Want to make like this codebox? Don't worry. We are here.
Hope you didn't redirect from the SR7Themes article as I believe there are obviously my ardent followers.
This codebox though is a functionality of Plus UI but others have already written an article on using it in Median UI. And the funniest thing is we are going to implement it!
- First of all paste the css before
<style>
/* Codebox CSS */
.pre{background:#f6f6f6;color:#2f3337;direction: ltr;position:relative;border-radius:3px;overflow:hidden;margin:1.7em auto}
.pre pre{margin:0;color:inherit;background:inherit;display:block;position:relative;font-size:13px;line-height:1.6em;border-radius:3px;padding:30px 20px 20px;-moz-tab-size:2;tab-size:2;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none; overflow:auto;direction:ltr;white-space:pre}
.pre.adv{border-radius:10px}
.pre.adv::before{display:none}
.pre:not(.str) .prCd{display:none}
.pre.str .prTl{display:none;}
.pre.adv pre{padding-top:60px}
.preM{position:absolute;top:0;right:0;left:0;width:100%;background: rgba(0,0,0,.04);padding:10px 10px 10px 20px;display:flex;justify-content:space-between;align-items:center;flex-wrap:nowrap;z-index:2}
.preT{font-size:12px;font-family: var(--fontC);line-height:1rem;position:relative;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding-right:10px;}
.preA{display:flex;gap:8px;white-space:nowrap;}
.preA button{outline:none;border:none;width:30px;height:30px;background:#d9d9d9;padding:0;margin:0;border-radius:50%;transition:border-radius .2s ease;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;}
.preA button:hover{border-radius:40%;}
.preA button >svg{width:18px;height:18px;stroke:none;fill:#2e2e2e;transition: all .5s ease;}
.pre.cpd .prCp svg, .pre.pnd .prDl svg, .pre.dwn .prDl svg{animation: jiggle 1s}
.pre.cpd .prCp svg .a,.pre:not(.cpd) .prCp svg .b{opacity:0}
.pre.dwn .prDl svg .a, .pre.pnd .prDl svg .a,.pre:not(.pnd) .prDl svg .b,.pre:not(.dwn) .prDl svg .c{opacity:0}
@keyframes jiggle{0%{transform:rotate(0)}20%{transform:rotate(26deg)}40%{transform:rotate(-26deg)}60%{transform:rotate(26deg)}80%{transform:rotate(-26deg)}100%{transform:rotate(0)}}
@-webkit-keyframes jiggle{0%{transform:rotate(0)}20%{transform:rotate(26deg)}40%{transform:rotate(-26deg)}60%{transform:rotate(26deg)}80%{transform:rotate(-26deg)}100%{transform:rotate(0)}}
Now we are going to use automatic js
- Then paste the javascript before
</body>
<script type='text/javascript'>/*<![CDATA[*/
/* Codebox JS Exclusive by Freeplay */
/* Compressed by UgilifyJS3 Wrapped 38.4 bytes */
eval(function(e,n,t,r,i,o){if(i=function(e){return e.toString(34)},!"".replace(/^/,String)){for(;t--;)o[i(t)]=r[t]||i(t);r=[function(e){return o[e]}],i=function(){return"\\w+"},t=1}for(;t--;)r[t]&&(e=e.replace(new RegExp("\\b"+i(t)+"\\b","g"),r[t]));return e}("7 4(a){1 b=2.8('9');b.c=a;2.d.e(b)}4('f://g.h.j/k/l/m@n/o/p/5/6.q.5');1 3=2.r(\"s.6\");t(1 i=0;i<3.u;i++){3[i].v.w(\"x\")}",0,34,"|var|document|element|loadJs|js|pre|function|createElement|script|||src|head|appendChild|https|cdn|jsdelivr||net|gh|fineshopdesign|blogger|main|assets|codeBox|min|querySelectorAll|div|for|length|classList|add|fd".split("|"),0,{}));
/*]]>*/</script>
- Now it would automatically change by default all your codeboxes to this type. No need to add any extra syntax or anything !!
Comments
Post a Comment