تخيل إنك قاعد تشتغل على موقع أو تطبيق، وبدون الأكواد؟ حقيقي، مفيش حاجة هتشتغل، صح؟ الأكواد هي الأساس اللي بيبني كل شيئ. ولاكن في مشكلة دايمًا بتواجهنا: إزاي نعرض الأكواد دي بشكل يخلي الناس التانية تفهمها وتستخدمها بسهولة؟
وهنا بيجي الحل السحري: صندوق عرض الأكواد مع زر النسخ و التحميل. فكرة بسيطة ولاكن عبقرية، لأنه بيساعدك تعرض الأكواد بشكل منظم وسهل على العين. يعني مش لازم تبقى عبقري في البرمجة علشان تقرا الكود وتفهمه. وليس هذا فقط، بل كمان بيخلّي تجربة المستخدم أسهل بكتير، لأنك تقدر بضغطة زر تنسخ الكود أو تحمله بكل بساطة. يعني، تخيل كده، بدل ما تكتب الكود كل مرة من الأول، مجرد ضغطة زر وتاخد الكود اللي محتاجه.
ده بيخلي الشغل أسرع، والناس تتعلم أسرع، وتشارك المعرفة بشكل أكبر بين المطورين. الإنتاجية بتزيد، والناس اللي عايزة تتعلم بتلاقي الأمور أسهل بكتير.
ماهو صندوق عرض الاكواد
كيفية إضافة صندوق عرض الأكواد
- إفتح موقع بلوجرくالمظهرくتعديل HTML
- إبحث عبر الضغط على Ctrl+F عن السطر ]]></b:skin>
- قم بلصق الكود التالي فوق ]]></b:skin> مباشرة
<style>
.snippet-container2 {
position: relative;
background-color: #1e1e1e;
color: #dcdcdc;
}
.copy-button2 {
position: absolute;
top: 1px;
background-color: #000000;
color: #fff;
border: none;
padding: 5px 10px;
font-size: 12px;
}
.download-button2 {
position: absolute;
top: 1px;
right: 60px;
background-color: #000000;
color: #fff;
border: none;
padding: 5px 10px;
font-size: 12px;
}
.copy-button2:hover,
.download-button2:hover {
background-color: #45a049;
}
.htmlcode2 {
text-align: left;
padding: 15px !important;
font-size: 14px;
overflow: auto;
max-height: 400px;
direction: ltr;
white-space: pre-wrap;
}
.dark-mode .snippet-container2 {
background-color: #1e1e1e;
border: 1px solid #1e1e1e;
}
#boxcode2 {
background-color: #000000;
padding: 15px 0px;
}
</style>
- إبحث عن </body> وضع فوقه الكود التالي
<script>
const accordionHeaders = document.querySelectorAll('.accordion-header');
accordionHeaders.forEach(header => {
let isClicked = false;
header.addEventListener('click', () => {
const item = header.parentNode;
const content = item.querySelector('.accordion-content');
if (!isClicked) {
isClicked = true;
item.classList.add('active');
content.style.display = 'block';
} else {
isClicked = false;
item.classList.remove('active');
content.style.display = 'none';
}
});
});
var copyButtons = document.querySelectorAll('.copy-button2');
copyButtons.forEach(function(button) {
button.addEventListener('click', function() {
var codeSnippet = document.querySelector('.htmlcode2 code');
var textarea = document.createElement('textarea');
textarea.value = codeSnippet.innerText;
document.body.appendChild(textarea);
textarea.select();
textarea.setSelectionRange(0, 99999);
document.execCommand('copy');
document.body.removeChild(textarea);
button.innerHTML = 'تم النسخ!';
setTimeout(function() {
button.innerHTML = 'نسخ';
}, 2000);
});
});
var downloadButtons = document.querySelectorAll('.download-button2');
downloadButtons.forEach(function(button) {
button.addEventListener('click', function() {
var codeSnippet = document.querySelector('.htmlcode2 code');
var file = new File([codeSnippet.innerText], 'تم التحميل.txt', { type: 'text/plain' });
var url = URL.createObjectURL(file);
var a = document.createElement('a');
a.href = url;
a.download = 'تم التحميل.txt';
a.click();
URL.revokeObjectURL(url);
});
});
</script>
- قم بحفظ التغيرات.
- توجه للمقالة الخاصة بك وقم بعرضها بصيغة "عرض HTML"
- ضع الكود التالي داخل المكان المخصص
<div class="snippet-container2">
<div id="boxcode2">
<button class="copy-button2">نسخ</button>
<button class="download-button2">تحميل</button>
</div>
<pre class="htmlcode2"><code>
إستبدل هذا الكلام بالكود الذي تريد وضعه لزوار موقعك
</code></pre>
</div>
- الأن إبحث عن العبارة التالية داخل الكود السابق "إستبدل هذا الكلام بالكود الذي تريد وضعه لزوار موقعك" وضع بدل ذالك الكود الخاص بك.
- ولاكن قبل وضع الكود الخاص بك قم بتحويله عبر أداة محول الأكواد ثم إستبدله بالجملة.