تصميم خاص بالوسم pre لجعله ملائم لكتابة الاكواد بالترقيم

لطالما بحثنا عن وسوم لكتابة الأكواد بشكل ملفت للانتباه خاصة للمدونات التعليمية التي تقوم بشرح بعض الدروس التعليمية
سنقوم الان باضافة خصائص بواسطة ال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;
} 

ثم نقوم بالبحث(Ctrl+F) عن الوسم التالي  </body> ونضيف أكواد JavaScript التالية فوقه مباشرة

 <script type='text/javascript'>
//<![CDATA[
(function() {
    var pre = document.getElementsByTagName('pre'),
        pl = pre.length;
    for (var i = 0; i < pl; i++) {
        pre[i].innerHTML = '<span class="line-number"></span>' + pre[i].innerHTML + '<span class="cl"></span>';
        var num = pre[i].innerHTML.split(/\n/).length;
        for (var j = 0; j < num; j++) {
            var line_num = pre[i].getElementsByTagName('span')[0];
            line_num.innerHTML += '<span>' + (j+1) + '</span>';
        }
    }
})();
//]]>
</script>

الان نقوم بحفظ القالب.
 لاستخدام الوسم pre لكتابة الاكواد داخل قالبك ما عليك الا كتابة أحد أكواد الHTML التالية داخل محرر HTML

 <pre data-codetype="HTML">HTMLهنا يتم كتابة أكواد ال</pre>
<pre data-codetype="CSS">CSSهنا يتم كتابة أكواد ال</pre>
<pre data-codetype="JavaScript">JavaScriptهنا يتم كتابة أكواد ال   </pre>
<pre data-codetype="JQuery">JQueryهنا يتم كتابة أكواد ال</pre>
 

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

اظغط على الصورة أدناه للانضمام