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

هناك 4 تعليقات:

  1. جزاك الله خيراً
    أنا الأكواد تظهر دائما عندي بالمقلوب عندما انقلها على مدونتي
    أي من اليمين الى اليسار كما هي الكتابة بالعربية
    ولاتتغير حتى لو غيرت اتجاه الكتابة في محرر المشاركات
    فما هي العلة ياترى

    ردحذف
    الردود
    1. أختي اتبعي التالي
      اول شي ضعي احد الاكواد اللي تريدي في محررhtml ثم اذهبي الى المحرر العادي وقومي بنسخ الكود مكان العبارة الموجودة ثم حددي الكود واضغطيshift+ctrlوحولي اتجاه الكلام من اليسار الى اليمين كما كنتي تفعلي من المحرر اعلاه ثم قومي بالنشر..

      حذف
    2. جزاك الله خيرا
      لم أر الرد اﻻ اﻵن
      بوركت

      حذف
  2. الف شكر لكم

    ردحذف

مدونة أبو إياد تصميم بلوجرام جميع الحقوق محفوظة 2016

اعلان مخفى فى الرئيسية