اضافة صندوق الاكواد لمدونة بلوجر |
خصائص الصندوق
- سهل الإستخدام
- يتم تلويد الكود ضمن الصندوق بحسب لغة البرمجة
- مستجيب مع جميع الشاشات
- تم إنشاء الشفرة - بواسطة 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 |
لكنه ليس شرط اساسي " تغير نوع اللغة" تغير نوع اللغة يفيد في تغير لون الكود داخل الصندوق ممايزيد من الجمالية ليس الا كان لايهمك هذا الأمر فقط تجاهل الخطوة الثالثة .
ليست هناك تعليقات:
إرسال تعليق