صندوق يدعم اكتشاف تلقائي للغة الكود
عرض اسم اللغة أعلى الصندوق.
يدعم التوسيع/النسخ/التحديد/التحميل/النافذة المنبثقة.
.code-box {
position: relative;
background: #272822;
color: #f8f8f2;
border-radius: 10px;
padding: 15px;
margin: 20px auto;
font-family: monospace;
direction: ltr;
overflow: auto;
max-width: 100%;
}
.code-label {
position: absolute;
top: -12px;
left: 15px;
background: #ff9800;
color: #fff;
font-size: 12px;
padding: 2px 8px;
border-radius: 6px;
font-family: Arial, sans-serif;
}
.code-box textarea {
width: 100%;
height: 250px;
background: transparent;
border: none;
color: #f8f8f2;
resize: none;
font-size: 14px;
outline: none;
}
.code-buttons {
display: flex;
justify-content: space-between;
gap: 10px;
margin-top: 10px;
flex-wrap: wrap;
}
.code-buttons button {
padding: 8px 12px;
background-color: #007BFF;
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 14px;
transition: 0.3s;
}
.code-buttons button:hover {
background-color: #0056b3;
}
.popup-overlay {
display: none;
position: fixed;
top: 0; left: 0;
width: 100vw;
height: 100vh;
background: rgba(0,0,0,0.6);
z-index: 9999;
justify-content: center;
align-items: center;
}
.popup-content {
background: #272822;
color: #f8f8f2;
padding: 20px;
border-radius: 12px;
width: 90%;
max-width: 800px;
max-height: 80vh;
overflow: auto;
position: relative;
font-family: monospace;
}
.popup-content textarea {
width: 100%;
height: 300px;
background: transparent;
border: none;
color: #f8f8f2;
resize: none;
font-size: 14px;
outline: none;
}
.popup-content .close-popup {
position: absolute;
top: 10px; right: 10px;
background: #e91e63;
color: white;
border: none;
padding: 5px 10px;
border-radius: 6px;
cursor: pointer;
}
function detectLanguage(code) {
if (/||
if (/function\s+|const\s+|let\s+|=>|console\.log|document\.|window\./.test(code)) return “JavaScript”;
if (/{[^}]*}|#\w+\s*{|color:|background:|display:|margin:/i.test(code)) return “CSS”;
return “نص”;
}
document.querySelectorAll(“.code-box”).forEach((box, index) => {
const textarea = box.querySelector(“.code-textarea”);
const label = box.querySelector(“.code-label”);
// الكشف التلقائي عن اللغة
const lang = detectLanguage(textarea.value);
label.textContent = lang;
// أحداث الأزرار
box.querySelector(“.select-all”).onclick = () => {
textarea.select();
};
box.querySelector(“.copy-code”).onclick = () => {
textarea.select();
document.execCommand(“copy”);
alert(“تم النسخ!”);
};
box.querySelector(“.download-code”).onclick = () => {
const blob = new Blob([textarea.value], { type: “text/plain” });
const link = document.createElement(“a”);
link.href = URL.createObjectURL(blob);
link.download = “code.txt”;
link.click();
};
box.querySelector(“.toggle-popup”).onclick = () => {
document.getElementById(“popup”).style.display = “flex”;
document.getElementById(“popupCode”).value = textarea.value;
};
});
document.querySelector(“.close-popup”).onclick = () => {
document.getElementById(“popup”).style.display = “none”;
};
المعاينة هو نفس الكود بالموضوع
✅ مزايا صندوق الأكواد في بلوجر:
1. 🎨 تنسيق احترافي للأكواد (Syntax Highlighting): يقدم الأكواد بشكل ملون ومنظم حسب اللغة البرمجية المستخدمة مثل HTML وCSS وJS وPHP، مما يسهل قراءتها بوضوح.
2. 📋 زر نسخ الكود بنقرة واحدة: يتيح للزائر نسخ الكود بسرعة وسهولة، مما يحسن تجربة المستخدم ويوفر الوقت.
3. 🧠 تحديد اللغة تلقائيًا أو يدويًا: يمكن للصندوق اكتشاف اللغة البرمجية تلقائيًا أو تعيينها يدويًا باستخدام تعيينات مثل language-html أو language-css.
4. 🖼️ عرض متجاوب ومناسب لجميع الشاشات: يعمل الصندوق بسلاسة على أجهزة الكمبيوتر والهواتف المحمولة، محافظًا على التصميم دون حدوث كسر.
5. 🌙 دعم الوضعين الداكن والفاتح: يمكن تخصيص الصندوق ليتماشى مع تصميم المدونة سواء كان داكنًا أو فاتحًا.
6. 📎 إمكانية تحميل الكود أو عرضه في نافذة منبثقة: تتيح بعض الصناديق المتقدمة عرض الكود في نافذة مستقلة أو تحميله كملف نصي.
7. 🧩 دعم متعدد لصناديق الأكواد في صفحة واحدة: يمكنك استخدام عدة صناديق أكواد دون حدوث تعارض أو أخطاء.
8. 🔐 حماية المحتوى غير البرمجي من النسخ: يركز النسخ على الأكواد فقط، مما يحمي المحتوى من النسخ غير المقصود.
📌 استخدامات الصندوق:
– في شروحات البرمجة
– في تقديم قوالب وتصاميم
– في دروس HTML/CSS/JS
– في عرض سكربتات جاهزة للتحميل والاستخدام
.button-outline-blue {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 28px;
margin: 10px 8px;
font-size: 18px;
font-weight: bold;
color: #007BFF;
background-color: #ffffff;
border: 2px solid #007BFF;
border-radius: 10px;
cursor: pointer;
text-decoration: none;
transition: all 0.3s ease;
}
.button-outline-blue i {
font-size: 20px;
}
.button-outline-blue:hover {
background-color: #f0f8ff;
}
.button-outline-blue:active {
color: #dc3545;
background-color: #ffe5e5;
border-color: #dc3545;
}
sehaa 
أضف تعليق