صندوق تضمين الأكواد مهم جدا في مدونات مثل التي تقدم اضافات أو أكواد برمجية أو حتى شروحات البرمجية ,
ففي هذا المقال قمت بتطوير صندوق تضمين الأكواد البرمجية بمميزات بحيث يسهل على المستخدم تعامل معه
كالنقر مرة لتحديد كود كامل ز أيضا مع زر نسخ الكود بضغطة واحدة و أيضا الصندوق متجاوب مع جميع الأجهزة
كسطح الحاسوب والهاتف وحتى جهاز تابلت .
شرح طريقة التركيب :
أولا ستذهب الى بلوجر
ثم الى المظهر , ثم تعديل
/*--[ codeBox by zinothec.blogspot.com ]--*/
:root{
--color-pre-code:#fe3231;/*--[ لون زر النسخ والشريط ]--*/
}
.Blog pre { position: relative !important; font-family: 'Fira Mono', monospace; line-height: 1.5em !important; font-size: 13px !important; }.Blog pre:before { content: '</>'; position: absolute !important; left: 0 !important; color: #fff !important; font-size: 10px !important; padding: 0 15px !important; z-index: 2 !important; line-height: 35px !important; } .Blog code { display: block !important; white-space: pre !important; font-size: 13px !important; position: relative !important; width: 100% !important; background-color: #2e2e31 !important; color: #c5c8c6 !important; border-radius: 3px !important; padding: 5px 20px 20px !important; margin: 25px auto !important; -moz-tab-size: 2 !important; -o-tab-size: 2 !important; tab-size: 2 !important; -webkit-hyphens: none !important; -moz-hyphens: none !important; -ms-hyphens: none !important; hyphens: none !important; overflow: auto !important; font-family: 'Fira Mono', monospace; line-height: 1.5em !important; height: 150px !important; } .Blog code::-webkit-scrollbar { -webkit-appearance: none !important; width: 8px !important; height: 8px !important; }.Blog code::-webkit-scrollbar-thumb { background-color: var(--color-pre-code) !important; border-radius: 0px !important; }.Blog code::-webkit-scrollbar-track { background-color: transparent !important; }btn.copy-code-button { z-index: 1; position: absolute !important; font-size: 13px !important; font-weight: 500 !important; padding: 3px 8px !important; border: none !important; color: #fff !important; background: var(--color-pre-code) !important; box-shadow: 0 1px 4px rgb(0 0 0 / 20%) !important; margin: 28px 6px !important; border-radius: 3px !important; user-select:none !important;}.copy-code-button svg { margin: -7px;width: 24px !important; height: 24px !important; }
/*--[ codeBox by zinothec.blogspot.com ]--*/
سيكون لون زر النسخ و scroll باللون في حال ما أردت تغييره قم بتغيير هذا اللون #fe3231 باللون الذي تريده .
بعد تطبيقك للخطوات السابقة قم بالبحث عن هذا الكود /body وألصق الكود التالي فوقه :
<script src='https://cdn.jsdelivr.net/gh/zinothec/rating@main/zn-thec/bttn-copy.js'/>
الكود السابق هو كود js كود مسؤول عن نسخ كود الأكواد ضمن صندوق التضمين .
الكود الثالث والأخير قم بنسخه في حال ما أردت تضمين أكواد في مقال معين قم بوضعه وسط الوسمين pre و code :
<pre><code>
<!--[ضع الكود هنا بعد تحويله]-->
</code></pre>
ملاحظة:
