كيفية تلوين الأكواد " Syntax highlighter " وإضافتها في إقتباس لمدونات بلوجر

السلام عليكم ورحمة الله وبركاته 

أعزائي اليوم سوف نتعرف على طريقة تلوين أكواد مدونات بلوجر وإضافتها في إقتباس ، وكما نعلم يا اعزائي بأن تلوين الأكواد يضيف إلى مدونتك لمسة جمالية إحترافية .

::: طريقة التركيب :::

1- ادخل إلى مدونتك ثم اختر لوحة التحكم .

2- من لوحة التحكم نحتار قالب ثم نضغط على تحرير قالب html

3- ابحث عن الوسم : ]]></b:skin> 

4 - ضع الكود التالي فوقه .

 * Pretty printing styles. Used with prettify.js. */
/* Vim sunburst theme by David Leibovic */
pre .str, code .str { color: #65B042; } /* string  - green */
pre .kwd, code .kwd { color: #E28964; } /* keyword - dark pink */
pre .com, code .com { color: #AEAEAE; font-style: italic; } /* comment - gray */
pre .typ, code .typ { color: #89bdff; } /* type - light blue */
pre .lit, code .lit { color: #3387CC; } /* literal - blue */
pre .pun, code .pun { color: #fff; } /* punctuation - white */
pre .pln, code .pln { color: #fff; } /* plaintext - white */
pre .tag, code .tag { color: #89bdff; } /* html/xml tag    - light blue */
pre .atn, code .atn { color: #bdb76b; } /* html/xml attribute name  - khaki */
pre .atv, code .atv { color: #65B042; } /* html/xml attribute value - green */
pre .dec, code .dec { color: #3387CC; } /* decimal - blue */

pre.prettyprint, code.prettyprint {
        background-color: #000;
        -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: 85% !important;
        margin: 1em auto;
        white-space: pre-wrap;
      background:#111;
 font-family:Monaco,Consolas,monospace;
 font-size:15px;
 line-height:1.5;
 -moz-border-radius:8px;
 -webkit-border-radius:8px;
 -o-border-radius:8px;
 -ms-border-radius:8px;
 -khtml-border-radius:8px;
 border-radius:8px;
 width:95%;
 white-space:pre-wrap
}


/* Specify class=linenums on a pre to get line numbering */
ol.linenums { margin-top: 0; margin-bottom: 0; color: #AEAEAE; } /* IE indents via margin-left */
li.L0, li.L1, li.L2, li.L3,
li.L5, li.L6, li.L7, li.L8
{ list-style-type: decimal !important }
/* Alternate shading for lines */
li.L1,li.L3,li.L5,li.L7,li.L9 { background: none repeat scroll 0% 0% rgba(6, 6, 6, 1) !important;}

@media print {
  pre .str, code .str { color: #060; }
  pre .kwd, code .kwd { color: #006; font-weight: bold; }
  pre .com, code .com { color: #600; font-style: italic; }
  pre .typ, code .typ { color: #404; font-weight: bold; }
  pre .lit, code .lit { color: #044; }
  pre .pun, code .pun { color: #440; }
  pre .pln, code .pln { color: #000; }
  pre .tag, code .tag { color: #006; font-weight: bold; }
  pre .atn, code .atn { color: #404; }
  pre .atv, code .atv { color: #060; }
}

pre {
    border-radius: 5px;
    transition: #3A6EA5 200ms linear 0s;
    background: none repeat scroll 0px 0px #EEE;
    font: 12px/1.5 Monaco,"Courier New",Courier,monospace !important;
    white-space: pre-wrap;
    word-wrap: break-word;
} 

5 - بعد ذلك إبحث عن الوسم : </head>

6 - اضف الكود التالي فوقه .

 <script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script> 

7- أيضاً أضف فوق الوسم :</head >

- الكود التالي :

 <link href='http://agorbatchev.typepad.com/pub/sh/3_0_83/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/> 
<link href='http://agorbatchev.typepad.com/pub/sh/3_0_83/styles/shCore.css' rel='stylesheet' type='text/css'/> 
<script src='http://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shCore.js' type='text/javascript'/>  
<script src='http://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shBrushXml.js' type='text/javascript'/> 

::: طريقة الأستخدام :::

1- يجب أن تحول الكود إذا كان بصيغة " html " أو بصيغة  " javascript " أو بصيغة  " jQuery "  عن طريق محول الأكواد إذا موجود في مدونتك ، وإذا غير موجود يمكنك تحويله من هنا .

2- بعد تحويل الكود ،  استخدم الكود التالي في وضعية " HTML " .

 <pre class="prettyprint linenums">
هنا ضع الكود الذي تم تحويله
</pre>