صندوق الاكواد Codebox مع زر النسخ والتنزيل والمعاينه

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

 

شرح اضافة صندوق الاكواد Codebox مع زر النسخ والتنزيل والمعاينه في بلوجر

صندوق الاكواد Codebox هي أداة مهمة جدًا لمشاركة أكواد HTML أو CSS أو JS على موقع الويب الخاص بك.

اليوم ، أشارك معكم اضافة صندوق codebox مع ميزة نسخ الاكواد وتنزيله حتى يتمكنوا الزوار من عرض الاكواد في علامة تبويب جديدة كملف txt.

 

فوائد استخدام صندوق عرض الأكواد

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

قبل أن نبدأ ، دعونا نلقي نظرة على رابط المعاينة

كيف تضع اضافة صندوق الاكواد Codebox؟

لن يتطلب إنشاء صندوق الاكواد Codebox شخص محترف لتركيب الكود داخل المدونة الخاصة بك الكثير من المعرفة حول HTML أو CSS أو JS . ما عليك القيام به هو تنفيذ الخطوات ووضع الاكواد في المكان المناسب داخل مظهر القالب Blogger Theme XML الخاص بك.

 

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

1. الخطوة 1: أولاً وقبل كل شيء ، قم بتسجيل الدخول إلى حساب blogger الخاص بك وانتقل إلى لوحة تحكم بلوجر.
2. الخطوة 2: في لوحة تحكم بلوجر ، انقر فوق علامة التبويب المظهر.
3. الخطوة 3: انقر فوق رمز السهم لأسفل بجوار الزر "تخصيص" .
4. الخطوة 4: انقر فوق تحرير HTML ، وسيتم إعادة توجيهك إلى صفحة التحرير HTML .

الآن ابحث في الكود ]]></b:skin> والصق أكواد CSS التالية فوقه مباشرة.

/*-- code by kzafkra.com --*/
/* Code Box */
.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)}}

 

قم الآن بإضافة كود JavaScript التالي أعلاه فقط لوضع </body> علامة. إذا لم تجده ، فمن المحتمل أنه قد تم تعديله الى &lt;/body&gt; .

/*-- code by kzafkra.com --*/
<script>/*<![CDATA[*/
0<document.querySelectorAll('div.pre.nb').length&&(() => {
let preD = document.querySelectorAll('div.pre.nb');
function saveDoc(x, d, n) {
    if (n = typeof n == 'string' ? n : 'text/plain', d = typeof d == 'string' ? d : 'File_' + (new Date).getTime() + '.txt', x) {
        n = new Blob([x], {
            type: n
        });
        if (navigator.msSaveBlob) return navigator.msSaveBlob(n, d); {
            let x = window.URL.createObjectURL(n),
                c = document.createElement("a");
            c.classList.add('hidden'), c.href = x, c.download = d, document.body.appendChild(c), c.click(), c.remove(), window.URL.revokeObjectURL(x)
        }
    }
}
for (let r = 0; r < preD.length; r++) {
    let b = preD[r];
    b.classList.add('adv');
    let x = b.dataset.text || 'File_' + (new Date).getTime(),
        e = b.dataset.file || x,
        _ = b.dataset.lang || '.txt',
        m = 'undefined' !== typeof b.dataset.time ? isNaN(Number(b.dataset.time)) ? 'false' === b.dataset.time ? 0 : 10 : Number(b.dataset.time) : 10,
        c = 'undefined' === typeof b.dataset.download || b.dataset.download == 'true',
        d = 'undefined' === typeof b.dataset.copy || b.dataset.copy == 'true',
        n = 'undefined' === typeof b.dataset.view || b.dataset.view == 'true',
        a = b.querySelector('pre'),
        t = a.innerText;
    b.insertAdjacentHTML('afterbegin', "<div class='preM'><div class='preT'><span class='prTl'>" + (null == x ? '&lt;/&gt;' : x) + "</span><span class='prCd'></span></div><div class='preA'>" + (n ? '\x3C!--[ Prev' + "iew ]--><button class='prVw'><svg viewBox='0 0 24 24'><path d='M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z'/></svg></button>" : "") + (c ? "\x3C!--[ Download ]--><button class='prDl'><svg viewBox='0 0 24 24'><path class='a' d='M8 17V15H16V17H8M16 10L12 14L8 10H10.5V6H13.5V10H16M12 2C17.5 2 22 6.5 22 12C22 17.5 17.5 22 12 22C6.5 22 2 17.5 2 12C2 6.5 6.5 2 12 2M12 4C7.58 4 4 7.58 4 12C4 16.42 7.58 20 12 20C16.42 20 20 16.42 20 12C20 7.58 16.42 4 12 4Z'/><path class='b' d='M13,2.03C17.73,2.5 21.5,6.25 21.95,11C22.5,16.5 18.5,21.38 13,21.93V19.93C16.64,19.5 19.5,16.61 19.96,12.97C20.5,8.58 17.39,4.59 13,4.05V2.05L13,2.03M11,2.06V4.06C9.57,4.26 8.22,4.84 7.1,5.74L5.67,4.26C7.19,3 9.05,2.25 11,2.06M4.26,5.67L5.69,7.1C4.8,8.23 4.24,9.58 4.05,11H2.05C2.25,9.04 3,7.19 4.26,5.67M2.06,13H4.06C4.24,14.42 4.81,15.77 5.69,16.9L4.27,18.33C3.03,16.81 2.26,14.96 2.06,13M7.1,18.37C8.23,19.25 9.58,19.82 11,20V22C9.04,21.79 7.18,21 5.67,19.74L7.1,18.37M12,16.5L7.5,12H11V8H13V12H16.5L12,16.5Z'/><path class='c' d='M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M7,15H17V17H7V15M10.3,11.2L8.4,9.3L7,10.7L10.3,14L17,7.3L15.6,5.9L10.3,11.2Z'/></svg></button>" : "") + (d ? "\x3C!--[ Copy ]--><button class='prCp'><svg viewBox='0 0 24 24'><path class='a' d='M20,16V4H8V16H20M22,16A2,2 0 0,1 20,18H8C6.89,18 6,17.1 6,16V4C6,2.89 6.89,2 8,2H20A2,2 0 0,1 22,4V16M16,20V22H4A2,2 0 0,1 2,20V7H4V20H16Z'/><path class='b' d='M20,16V10H22V16A2,2 0 0,1 20,18H8C6.89,18 6,17.1 6,16V4C6,2.89 6.89,2 8,2H16V4H8V16H20M10.91,7.08L14,10.17L20.59,3.58L22,5L14,13L9.5,8.5L10.91,7.08M16,20V22H4A2,2 0 0,1 2,20V7H4V20H16Z'/></svg></button>" : "") + '</div></di' + "v>");
    let i = b.querySelector('.prVw'),
        l = b.querySelector('.prDl'),
        f = b.querySelector('.prCp'),
        W = b.querySelector('.prCd');
    null !== i && i.addEventListener('click', () => {
        var x = '#252526';
        x = '<!DOCTYPE html><html><head><title>' + e.replace(/\./g, "").replace(/ /g, "_") + _ + "</title><meta content='width=device-width,initial-scale=1,user-scalable=1,minimum-scale=1,maximum-scale=5' name='viewport'/><meta content='" + x + "' name='theme-color'/><meta content='" + x + "' name='msapplication-navbutton-color'/><meta content='" + x + "' name='apple-mobile-web-app-status-bar-style'/><link rel='shortcut icon' type='image/png' href='https://www.nldblog.com/main/android-icon-192x192.png'><style>body{min-height:100vh;background:#252526;color:#fff}*{margin:0;padding:0}html{line-height:1em;background:#1d1f21;color:#c5c8c6}pre{white-space:pre-wrap;word-wrap:break-word;word-break:break-all;padding:20px}pre i{font-style:normal}</style></head><body><div class='pre'>" + a.outerHTML + '</div></body></html>';
        x = new Blob([x], {
            type: 'text/html'
        });
        window.navigator.msSaveOrOpenBlob ? window.navigator.msSaveOrOpenBlob(blobObject, fileName) : (x = window.URL.createObjectURL(x), window.open(x, '_blank'), window.URL.revokeObjectURL(x))
    }), 
    null !== l && l.addEventListener('click', () => {
        l.disabled = !0;
        let c = m;
        b.classList.add('pnd', 'str'), W.innerHTML = 0 !== m ? 'Please wai' + "t " + c + 's...' : 'Please wai' + 't...';
        let a = setInterval(() => {
            0 !== m && --c, 0 !== m && (W.innerHTML = 'Please wait ' + c + 's...'), c <= 0 && (clearInterval(a), setTimeout(() => {
                W.innerHTML = 'Downloading...', setTimeout(() => {
                    b.classList.remove('pnd'), b.classList.add('dwn'), saveDoc(t, e.replace(/\./g, "").replace(/ /g, "_") + '_by_NLD_Blog' + _, 'text/plain'), W.innerHTML = 'Download started...', setTimeout(() => {
                        b.classList.remove('dwn', 'str'), l.disabled = !1
                    }, 3e3)
                }, 2e3)
            }, 1e3))
        }, 1e3)
    }), 
    null !== f && f.addEventListener('click', () => {
        var x = getSelection(),
            c = document.createRange();
        c.selectNodeContents(a), x.removeAllRanges(), x.addRange(c), document.execCommand('copy'), x.removeAllRanges(), f.disabled = !0, b.classList.add('cpd'), setTimeout(function() {
            b.classList.remove('cpd'), f.disabled = !1
        }, 3e3)
    })
}})();
/*]]>*/</script>

 

الآن ، احفظ التغييرات بالنقر فوق أيقونة حفظ. ثم بعد ذلك استخدم الآن أكواد HTML التالية في منشورات المدونة الخاصة بك حيثما تريد إضافة Codebox.

/*-- code by kzafkra.com --*/
<div class='pre nb' data-text='typecode' data-file='filename' data-lang='fileformat' data-time='true' data-download='true' data-copy='true' data-view='true'>
  <pre>
      <!-- Code -->
  </pre>
</div>

 

ملاحظات: اعدادات الكود

data-text : - يشير إلى Code Snippet Name ، قم بتغيير اسم العرض إلى اسم رمز المصدر الخاص بك.

data-file: - اسم ملف تنزيل كود المصدر

data-lang: - تشير إلى تنسيق الملف ، على سبيل المثال: .html ، .txt ، .css ، إلخ.

data-time: - تحميل العد التنازلي. True = عد تنازلي نشط ، False= تعطيل

data-download : - إظهار أو إخفاء زر التنزيل باستخدام صواب وخطأ

data-copy : - إظهار أو إخفاء زر النسخ باستخدام صواب وخطأ

data-view : - إظهار أو إخفاء زر المعاينة باستخدام صواب وخطأ

 

الخلاصة

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

 

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

تعديل المقال