طريقة اضافة صندوق الأكواد في مشاركات بلوجر
بعض المدونين الجدد قد يتسائلون عن كيفية وضع كود معين في إحدى مشاركات بلوجر ؟ وتتسائل عن كيفية وضع صندوق اكواد خاص بك كما يفعل أغلب المدونين خاصة اذا كان محتوى التدوينة بلوجر تعليمي وأردت وضع أكواد برمجة بلغة معينة في مشاركتك لجعل الأمور أبسط لمتابعينك, وضع كود في تدوينة بمدونة بلوجر قد يكون صعب في بعض الأحيان للعديد من الاسباب فقد يختلط الكود مع محتوى الصفحة فلايظهر بشكل كامل للزائر أو يكون صندوق الأكواد غير متوافق مع مدونتك أو غير متجاوب , ممايصعب على الزائر نسخ الكود, في تدوينة اليوم سأعلمك طريقة وضع صندوق أكواد لمدونات بلوجر بشكل جميل وأنيق ويدعم لغات البرمجة جميعها بخطوات بسيطة تابع معي.خصائص الصندوق
- سهل الإستخدام
- يتم تلويد الكود ضمن الصندوق بحسب لغة البرمجة
- مستجيب مع جميع الشاشات
- تم إنشاء الشفرة - بواسطة Google
طريقة تركيب صندوق الأكواد في مدونتك
ثم ضع هذا الكود فوق وسم <body>
<script src='https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js'/>
ثم انسخ هذا الكود وضعه فوق وسم <head/>
<!-- 7ASHTA5 CODBOX THEME -->
<style type="text/css">.str{color:#EC7600}.kwd{color:#93C763}.com{color:#66747B}.typ{color:#678CB1}.lit{color:#FACD22}.pln,.pun{color:#F1F2F3}.tag{color:#8AC763}.atn{color:#E0E2E4}.atv{color:#EC7600}.dec{color:purple}pre.prettyprint{border:0 solid #888}ol.linenums{margin-top:0;margin-bottom:0}.prettyprint{background:#000}li.L0,li.L1,li.L2,li.L3,li.L4,li.L5,li.L6,li.L7,li.L8,li.L9{color:#555;list-style-type:decimal}li.L1,li.L3,li.L5,li.L7,li.L9{background:#111}@media print{.kwd,.tag,.typ{font-weight:700}.str{color:#060}.kwd{color:#006}.com{color:#600;font-style:italic}.typ{color:#404}.lit{color:#044}.pun{color:#440}.pln{color:#000}.tag{color:#006}.atn{color:#404}.atv{color:#060}}</style>
طريقة الاستخدام
1- عندما تريد وضع الكود في التدوينة أنتقل الى تبويب html الذي بجوار "تأليف" أثنائ التدوين,ضع الكود التالي داخله
<pre class="prettyprint"><code class="language-html">YOUR CODE HRER</code></pre>
2- استبدل " YOUR CODE HERE" بالكود الذي تود وضعه في الصندوق ولكن يجب تحويل الكود قبل وضعه باستخدام محول الأكواد .
3- الآن اذا اردت تغيير نوع لغة الكود فقم بتغيير Language-html بالكود في الاعلى برمز اللغة كما في الجدول التالي
لكنه ليس شرط اساسي " تغير نوع اللغة" تغير نوع اللغة يفيد في تغير لون الكود داخل الصندوق ممايزيد من الجمالية ليس الا كان لايهمك هذا الأمر فقط تجاهل الخطوة الثالثة .
الرمز | القيمه | لغة البرمجه |
---|---|---|
language-html | html | HTML |
language- | csh | CSS |
language-js | js | Javascript |
language-xml | xml | XML |
language-xhtml | xhtml | XHTML |
language-c | c | C |
language-cpp | cpp | C++ |
language-cs | cs | C# |
Language-php | php | PHP |
language-py | py | Python |
language-java | java | Java |
language-rb | rb | Ruby |
language-perl | perl | Perl |
لكنه ليس شرط اساسي " تغير نوع اللغة" تغير نوع اللغة يفيد في تغير لون الكود داخل الصندوق ممايزيد من الجمالية ليس الا كان لايهمك هذا الأمر فقط تجاهل الخطوة الثالثة .
تعليقات
إرسال تعليق
مرحبا بكم لاتترد في الاستفسار نحن بخدمتك.