لطالما بحثنا عن وسوم لكتابة الأكواد بشكل ملفت للانتباه خاصة للمدونات التعليمية التي تقوم بشرح بعض الدروس التعليمية
سنقوم الان باضافة خصائص بواسطة الcss وال JavaScript للوسم pre ليصبح كما في الصورة أدناه .. تابع معي

معاينة

أولا عليك التسجيل في بلوجر ◄القالب◄تحرير القالب◄البحث(Ctrl+F) عن الوسم التالي ]]></b:skin> ونقوم بأضافة أكواد الCSS التالية فوقه مباشرة

 /*
sweup.com
*/
pre {
    background-color:#233948;
    font:bold 12px/15px "Inconsolata","Monaco","Consolas","Andale Mono","Bitstream Vera Sans Mono","Courier New",Courier,monospace;
    color:#333;
    border:1px solid #f1c40f;
    position:relative;
    padding:0 7px;
    margin:10px 0;
    overflow:auto;
    word-wrap:normal;
    white-space:pre;
    box-shadow:0 1px 2px rgba(0,0,0,0.2);
    position:relative;
}
pre[data-codetype] {
    padding:37px 1em 5px 1em;
}
pre[data-codetype]:before {
    content:attr(data-codetype);
    display:block;
    position:absolute;
    top:0;
    right:0;
    left:0;
    background-color:#95a5a6;
    padding:7px;
    font:bold 12px/20px Arial,Sans-Serif;
    color:white;
}
pre[data-codetype="HTML"]       {border-color:#27ae60;color:#8FE6B3;}
pre[data-codetype="CSS"]        {border-color:#16a085;color:#7DDECA;}
pre[data-codetype="JavaScript"] {border-color:#2980b9;color:#91C8ED;}
pre[data-codetype="JQuery"]     {border-color:#34495e;color:#889CAF;}
pre[data-codetype="HTML"]:before          {background-color:#27ae60;}
pre[data-codetype="CSS"]:before           {background-color:#16a085;}
pre[data-codetype="JavaScript"]:before    {background-color:#2980b9;}
pre[data-codetype="JQuery"]:before        {background-color:#34495e;}
pre code,
pre .line-number {
  display:block;
  font:normal normal 12px/15px "Consolas","Bitstream Vera Sans Mono","Courier New",Courier,monospace !important;
  color:#006699;
}
pre .line-number {
  float:left;
  margin:0 1em 0 -1em;
  color:#ecf0f1;
  background-color:#243342;
  border-right:2px solid #3E5770;
  text-align:right;
  min-width:2.5em;
}
pre .line-number span {
  display:block;
  padding:0 .5em 0 1em;
}
pre .line-number span:nth-child(even) {background-color:#243342}
pre .cl {
  display:block;
  clear:both;
}