اضافة كود لبلوجر هو احيانا يكون صعب لان ببساطة يمكن ان يختلط بالصفحه ، او ان يكون الكود طويلاً فلا يستطيع الزائر نسخه بسهوله ، هنا تأتي فائدة صندوق الاكواد او syntax highlighter وهو الذي تضع فيه الاكواد سواء كانت HTML , CSS , JAVASCRIPT , PHP , C++ , XML .


خصائص الصندوق

  • يتوافر بخمسة انماط " اشكال " مختلفه ليتناسب مع لون المدونة فهناك اسود اذا كانت المدونة لون فاتح وابيض اذا كانت غامق ..
  • يتم تلوين الاكواد بحسب لغة البرمجه المستخدمه .
  • شكل مستجيب مع الشاشات
  • تم إنشاء الشفرة - بواسطة Google.
  • سهل الاستخدام.


شرح التركيب


توجة الي لوحة تحكم بلوجر > المظهر > تحرير HTML
ثم ضع هذا الكود فوق الوسم <body> 

<script src='https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js'/>

الآن يأتي دورك في اختيار اي نمط تود ان تركب


الشكل الاول


انسخ هذا الكود وضعه فوق الوسم </head> 



<!-- ITHEIRC CODBOX THEME 1 -->
<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>

الشكل الثاني


انسخ هذا الكود وضعه فوق الوسم </head> 



<!-- ITHEIRC CODBOX THEME 2 -->
<style type="text/css">code .str,pre .str{color:#65B042}code .kwd,pre .kwd{color:#E28964}code .com,pre .com{color:#AEAEAE;font-style:italic}code .typ,pre .typ{color:#89bdff}code .lit,pre .lit{color:#3387CC}code .pln,code .pun,pre .pln,pre .pun{color:#fff}code .tag,pre .tag{color:#89bdff}code .atn,pre .atn{color:#bdb76b}code .atv,pre .atv{color:#65B042}code .dec,pre .dec{color:#3387CC}code.prettyprint,pre.prettyprint{background-color:#000;border-radius:8px}pre.prettyprint{width:95%;margin:1em auto;padding:1em;white-space:pre-wrap}ol.linenums{margin-top:0;margin-bottom:0;color:#AEAEAE}li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style-type:none}@media print{code .str,pre .str{color:#060}code .kwd,pre .kwd{color:#006;font-weight:700}code .com,pre .com{color:#600;font-style:italic}code .typ,pre .typ{color:#404;font-weight:700}code .lit,pre .lit{color:#044}code .pun,pre .pun{color:#440}code .pln,pre .pln{color:#000}code .tag,pre .tag{color:#006;font-weight:700}code .atn,pre .atn{color:#404}code .atv,pre .atv{color:#060}}</style>


الشكل الثالث


انسخ هذا الكود وضعه فوق الوسم </head> 



<!-- ITHEIRC CODBOX THEME 3 -->
<style type="text/css">a,code.prettyprint a,pre.prettyprint a{text-decoration:none}code .str,pre .str{color:#fec243}code .kwd,pre .kwd{color:#8470FF}code .com,pre .com{color:#32cd32;font-style:italic}code .typ,pre .typ{color:#6ecbcc}code .lit,pre .lit{color:#d06}code .pun,pre .pun{color:#8B8970}code .pln,pre .pln{color:#f0f0f0}code .tag,pre .tag{color:#9c9cff}code .htm,pre .htm{color:plum}code .xsl,pre .xsl{color:#d0a0d0}code .atn,pre .atn{color:#46eeee;font-weight:400}code .atv,pre .atv{color:#EEB4B4}code .dec,pre .dec{color:#3387CC}code.prettyprint,pre.prettyprint{font-family:'Droid Sans Mono','CPMono_v07 Bold','Droid Sans';font-weight:700;font-size:9pt;background-color:#0f0f0f;-moz-border-radius:8px;-webkit-border-radius:8px;-o-border-radius:8px;-ms-border-radius:8px;-khtml-border-radius:8px;border-radius:8px}pre.prettyprint{width:95%;margin:1em auto;padding:1em;white-space:pre-wrap}ol.linenums{margin-top:0;margin-bottom:0;color:#8B8970}li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style-type:none}@media print{code.prettyprint,pre.prettyprint{background-color:#fff}code .str,pre .str{color:#088}code .kwd,pre .kwd{color:#006;font-weight:700}code .com,pre .com{color:#oc3;font-style:italic}code .typ,pre .typ{color:#404;font-weight:700}code .lit,pre .lit{color:#044}code .pun,pre .pun{color:#440}code .pln,pre .pln{color:#000}code .tag,pre .tag{color:#b66ff7;font-weight:700}code .htm,code .xsl,pre .htm,pre .xsl{color:#606;font-weight:700}code .atn,pre .atn{color:#c71585;font-weight:400}code .atv,pre .atv{color:#088;font-weight:400}}</style>



الشكل الرابع


انسخ هذا الكود وضعه فوق الوسم </head> 



<!-- ITHEIRC CODBOX THEME 4 -->
<style type="text/css">.pln{color:#000}@media screen{.str{color:#080}.kwd{color:#008}.com{color:#800}.typ{color:#606}.lit{color:#066}.clo,.opn,.pun{color:#660}.tag{color:#008}.atn{color:#606}.atv{color:#080}.dec,.var{color:#606}.fun{color:red}}@media print,projection{.kwd,.tag,.typ{font-weight:700}.str{color:#060}.kwd{color:#006}.com{color:#600;font-style:italic}.typ{color:#404}.lit{color:#044}.clo,.opn,.pun{color:#440}.tag{color:#006}.atn{color:#404}.atv{color:#060}}pre.prettyprint{padding:2px;border:1px solid #888}ol.linenums{margin-top:0;margin-bottom:0}li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style-type:none}li.L1,li.L3,li.L5,li.L7,li.L9{background:#eee}</style>


الشكل الخامس


انسخ هذا الكود وضعه فوق الوسم </head> 



<!-- ITHEIRC CODBOX THEME 5 -->
<style type="text/css">pre .atn,pre .kwd,pre .tag{font-weight:700}pre.prettyprint{display:block;background-color:#333}pre .nocode{background-color:none;color:#000}pre .str{color:#ffa0a0}pre .kwd{color:khaki}pre .com{color:#87ceeb}pre .typ{color:#98fb98}pre .lit{color:#cd5c5c}pre .pln,pre .pun{color:#fff}pre .tag{color:khaki}pre .atn{color:#bdb76b}pre .atv{color:#ffa0a0}pre .dec{color:#98fb98}ol.linenums{margin-top:0;margin-bottom:0;color:#AEAEAE}li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style-type:none}@media print{pre.prettyprint{background-color:none}code .str,pre .str{color:#060}code .kwd,pre .kwd{color:#006;font-weight:700}code .com,pre .com{color:#600;font-style:italic}code .typ,pre .typ{color:#404;font-weight:700}code .lit,pre .lit{color:#044}code .pun,pre .pun{color:#440}code .pln,pre .pln{color:#000}code .tag,pre .tag{color:#006;font-weight:700}code .atn,pre .atn{color:#404}code .atv,pre .atv{color:#060}}</style>



بعد اختيار نمط

الخطوه الاخيره وهي استخدام الصندوق اثناء التدوين ، توجه للمشاركات وانشئ مشاركه
افتح تبويب HTML - الذي بجوار " تأليف "

ضع الكود التالي داخله


<pre class="prettyprint"><code class="language-html">YOUR CODE HRER</code></pre>










طريقة التعديل علي الكود واستخدامه












استبدل " YOUR CODE HERE " بالكود التي تريد وضعه فالصندوق ولكن يجب اولاً تحويل الكود

" استخدم محول اكواد الأثير -



محول الاكواد










-








الرمزالقيمهلغة البرمجه


language-htmlhtmlHTML


language-cshCSS


language-jsjsJavascript


language-xmlxmlXML


language-xhtmlxhtmlXHTML


language-ccC


language-cppcppC++


language-cscsC#


Language-phpphpPHP 


language-pypyPython


language-javajavaJava


language-rbrbRuby


language-perlperlPerl





اما لتحديد نوع لغة البرمجه فقم بتغيير Language-html  برمز لغة البرمجه كما في الجدول بالاعلي



- للمساعدة والاستفسارات : التعليقات !















شاهد كيف تعمل الاضافة 





 مـعـايـنة