مدونة هلا تك

صندوق أكواد المميز يحتوي زر النسخ و الوضع الليلي

أقدم لكم صندوق أكواد ممسز جدا

الصندوق يحتوي زر النسخ و زر الوضع الليلي

نحتاج هاذ الصندوق لتضمين الأكواد البرمجبية كأكواد html وcss وjs. بصورة منمقة و مؤطرة ضمن إجار ليسهل فهمها و تكون واضحة وكذالك ليسهل تحديدها و نسخها أيضاً. وكذالك حتى لا نقع بمشاكل أثناء كتابة الموضوع ..
وليسهل على الزائر أو المتعلم فهم ما هية الشرح .

معاينة الصندوق

طريقة تركيب الصندوق

نذهب الى المظهر و نختار تعديل ~~HTML~~

نبحث عن ~~]]></b:skin>~~ و نضع الكود التالي اعلاه

/* Toast Notification by Fineshop Design */
.tNtf span{position:fixed;left:24px;bottom:-70px;display:inline-flex;align-items:center;text-align:center;justify-content:center;margin-bottom:20px;z-index:99981;background:#323232;color:rgba(255,255,255,.8);font-size:14px;font-family:inherit;border-radius:3px;padding:13px 24px; box-shadow:0 5px 35px rgba(149,157,165,.3);opacity:0;transition:all .1s ease;animation:slideinwards 2s ease forwards;-webkit-animation:slideinwards 2s ease forwards}
@media screen and (max-width:500px){.tNtf span{margin-bottom:20px;left:20px;right:20px;font-size:13px}}
@keyframes slideinwards{0%{opacity:0}20%{opacity:1;bottom:0}50%{opacity:1;bottom:0}80%{opacity:1;bottom:0}100%{opacity:0;bottom:-70px;visibility:hidden}}
@-webkit-keyframes slideinwards{0%{opacity:0}20%{opacity:1;bottom:0}50%{opacity:1;bottom:0}80%{opacity:1;bottom:0}100%{opacity:0;bottom:-70px;visibility:hidden}}
.darkMode .tNtf span{box-shadow:0 10px 40px rgba(0,0,0,.2)}
/* Codebox by House Of Blogger */
.cBx{-webkit-tap-highlight-color:transparent;background:#f1f3f4;position:relative;padding-top:30px;border:1px solid #dadce0;border-radius:5px;margin-bottom: 32px;}
.cBx pre{display:block;position:relative;font-family:monospace;font-size:13px;line-height:1.6em;hyphens:none;overflow:auto;direction:ltr;white-space:pre;background:transparent;padding:0 15px 15px;margin:0}
.cBx pre::before, .cBx pre::after{display:none}
.cBxT{position:absolute;right:0;top:0;padding:10px 10px 0 0}
.cBxT button{position:relative;background:transparent;outline:none;border:none;cursor:pointer;padding:0;margin:0;width:20px;height:20px;display:inline-flex;justify-content:center;align-items:center}
.cBxT button:not(:last-child){margin-right:10px}
.cBxT button svg{width:20px;height:20px;fill:none!important;stroke:#000 !important;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
body.cDrk .cBxT button .moon, body:not(.cDrk) .cBxT button .sun, .cBx.copied button .copy, .cBx:not(.copied) button .check{display:none}
.cBxT button span{display:block;position:absolute;bottom:calc(20px + 10px);right:-10px;background:#252526;color:#fff;white-space:nowrap;font-size:11px;line-height:1rem;padding:4px 6px;border-radius:3px;opacity:0;visibility:hidden;transition:all .2s ease}
.cBxT button:hover span{opacity:1;visibility:visible;bottom:calc(20px + 20px)}
.cBxT button span::before{content:'';position:absolute;bottom:-3px;right:15px;width:8px;height:8px;background:inherit;border-radius:2px;transform:rotate(45deg)}
.cDrk .cBx{background:#283142;color:#fffdfc}
.cDrk .cBx pre{color:#eceff1}
.cDrk .cBxT button svg{stroke:#fff !important}

نبحث عن ~~<head>~~ و نضع الكود التالي اسفله

<div id='tstNtf' class='tNtf'></div>
<script>
/*<![CDATA[*/
/* Toast */ function toast(e){var tNotif = document.getElementById('tstNtf'); if (tNotif != null && e){tNotif.innerHTML = '<span>' + e + '</span>'}};
/*]]>*/
</script>

نبحث عن ~~</body>~~ و نضع الكود التالي اعلاه

<script>
/*<![CDATA[*/
/* Codebox by House Of Blogger */
(() => {
/* config */
var config = {
copyText: 'Copy to Clipboard',
copiedText: 'Copied to Clipboard',
lightText: 'Switch to Light',
darkText: 'Switch to Dark',
copiedToast: 'تــــم نســـخ الأكـــواد!'
}
/* main scripts */
var cBox = document.querySelectorAll(".cBx");
var dBdy = document.getElementsByTagName('body')[0];
localStorage.getItem('CODE_MODE') === 'dark' ? dBdy.classList.add('cDrk') : dBdy.classList.remove('cDrk');
for (var i = 0; i < cBox.length; i++){
let c = cBox[i];
c.setAttribute('data-code', i);
c.insertAdjacentHTML("afterbegin", "<div class='cBxT'><button onclick='codeDark()'><svg class='line sun' viewBox='0 0 24 24'><circle cx='12' cy='12' r='5'></circle><line x1='12' y1='1' x2='12' y2='3'></line><line x1='12' y1='21' x2='12' y2='23'></line><line x1='4.22' y1='4.22' x2='5.64' y2='5.64'></line><line x1='18.36' y1='18.36' x2='19.78' y2='19.78'></line><line x1='1' y1='12' x2='3' y2='12'></line><line x1='21' y1='12' x2='23' y2='12'></line><line x1='4.22' y1='19.78' x2='5.64' y2='18.36'></line><line x1='18.36' y1='5.64' x2='19.78' y2='4.22'></line></svg><svg class='line moon' viewBox='0 0 24 24'><path d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z'></path></svg><span class='moon'>" + (config.darkText ? config.darkText : 'Dark Theme') + "</span><span class='sun'>" + (config.lightText ? config.lightText : 'Light Theme') + "</span></button><button onclick='codeCopy(" + i + ")'><svg class='line copy' viewBox='0 0 24 24'><rect x='9' y='9' width='13' height='13' rx='2' ry='2'></rect><path d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'></path></svg><svg class='line check' viewBox='0 0 24 24'><polyline points='9 11 12 14 22 4'></polyline><path d='M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11'></path></svg><span class='copy'>" + (config.copyText ? config.copyText : 'Copy') + "</span><span class='check'>" + (config.copiedText ? config.copiedText : 'Copied') + "</span></button></div>");
}
window.codeDark = () => {
localStorage.setItem("CODE_MODE", "dark" === localStorage.getItem("CODE_MODE") ? "light" : "dark");
localStorage.getItem("CODE_MODE") === "dark" ? dBdy.classList.add("cDrk") : dBdy.classList.remove("cDrk");
}
window.codeCopy = (index) => {
if (index !== undefined) {
let el = document.querySelector(".cBx[data-code='" + index + "']");
if (el !== null){
let pre = el.querySelector('pre');
if (pre !== null){
var e = getSelection(),
t = document.createRange();
e.removeAllRanges();
t.selectNodeContents(pre);
e.addRange(t);
document.execCommand("copy");
e.removeAllRanges();
el.classList.add('copied');
toast(config.copiedToast ? config.copiedToast : 'Copied to clipboard');
setTimeout(() => {
el.classList.remove('copied');
}, 2000)
}
}
}
}
})()
/*]]>*/
</script>

و أخير عند كتابة موضوع نذهب الى ~~عرض HTML~~ و نلق الكود التالي بداخله

استبدل الكود باللون الاحمر و ضعه ببين ~~<pre> </pre>~~

<p60>CSS</p60><div class="cBx"><pre>~~CSS~~</pre></div>

<p60>JAVASCRIPT</p60><div class="cBx"><pre>~~JAVASCRIPT~~</pre></div>

<p60>HTML</p60><div class="cBx"><pre>~~HTML~~</pre></div>

و ثم قم بحفظ الموضوع

و شكرا لكم

وفي الختام !

شكرًا لوقتكم واهتمامكم بقراءة موضوع تركيب صندوق أكواد يحتوي زر النسخ و زر الوضع الليلي . إذا صادفتكم أي مشكلة أثناء استخدام الكود أو كان لديكم أي استفسار، فلا تترددوا في طرحه ضمن التعليقات أو التواصل معنا عبر صفحة الاتصال بنا . ولا تنسوا الانضمام إلى متابعي مدونة هلا تك ليصلكم كل ما هو جديد.