بسم الله و الحمد لله و الصلاة و السلام على خير خلق الله محمد الأمين. إخواني الكرام في هذا الموضوع سنتعرف و رفقتكم الطيبة إلى طريقة إدراج الأكواد باستعمال SyntaxHighlighter في مدونات بلوجر Blogger و في مدونات ووردبريس Wordpress كذلك. و تجدر الإشارة إلى أن هذه الإضافة تفيد المدونات التعليمية التي اعتاد أصحابها على إدراج أكواد فيها قصد الشرح و التوضيح . لا استعملها في مدونتي و اكتفي بخاصية الاقتباس لعرض الأكواد بغية التبسيط لا غير و لكن سأستعملها في هذا الموضوع توضيحا و تمكينا من التجريب.
أولا هكذا سيظهر الكود بعد تنصيب الإضافة: (هذا الكود لا علاقة له بالإضافة، فقط للمعاينة)
1- طريقة تنصيب الإضافة في مدونات بلوجر Blogger
من لوحة التحكم نفتح صفحة تحرير html ثم نحفظ نسخة احتياطية من القالب قبل بدء التعديل.
و نبحث عن :
قبلها أي فوقها مباشرة نلصق الكود الموالي:
مرة أخرى نبحث عن:
و قبله أي فوقه مباشرة نلصق الكود الآتي و نحفظ القالب:
الآن بعد حفظ القالب سنتعرف طريقة وضع الكود بالتدوينة أو الموضوع.
كما لاحظتم في الكود الأول فإن الإضافة بها عدة ملفات جافاسكريبت كل واحد منها مختص بعرض أكواد لغة برمجة معينة ك php ، java ، javascript ، xml ، و غيرها ... و هذا سنأخذه بعين الاعتبار فيما يلي .
يدرج الكود كما يلي :
طبعا هذا الكود معد لعرض css و منه لعرض أكواد أي لغة أخرى نستبدل css باسم تلك اللغة.
باستعمال pre لعرض كود html تأكد من تعويض الأقواس المعقوفة < و > بما يلي
و يمكن القيام بهذه العملية باستعمال هذه الأداة التي تعوض كل الأقواس بكود html دفعة واحدة .
أما إذا استعملت textarea فالمتصفح يتجاهل ما بين وسميها و يعرضها نصا ، إذا فهذه تعد الأبسط و الأسرع.
2 - طريقة تركيب الإضافة على مدونات ووردبريس
يعوض css برمز لغة برمجة الكود المعروض و هذه لائحة اللغات المتاحة و رموزها.
تحياتي!
أولا هكذا سيظهر الكود بعد تنصيب الإضافة: (هذا الكود لا علاقة له بالإضافة، فقط للمعاينة)
.box-heart{ border:solid 1px #DEDEDE; background:#FFFFCC url(img/icon-heart.png) 8px 6px no-repeat; color:#222222; padding:4px; text-align:center; }
من لوحة التحكم نفتح صفحة تحرير html ثم نحفظ نسخة احتياطية من القالب قبل بدء التعديل.
و نبحث عن :
</head>
قبلها أي فوقها مباشرة نلصق الكود الموالي:
<link href='http://sites.google.com/site/simoxisite/syntaxhighlighter/SyntaxHighlighter.css' rel='stylesheet' type='text/css'/> <script src='http://sites.google.com/site/simoxisite/syntaxhighlighter/shCore.js' type='text/javascript'/> <script src='http://sites.google.com/site/simoxisite/syntaxhighlighter/shBrushCpp.js' type='text/javascript'/> <script src='http://sites.google.com/site/simoxisite/syntaxhighlighter/shBrushCSharp.js' type='text/javascript'/> <script src='http://sites.google.com/site/simoxisite/syntaxhighlighter/shBrushCss.js' type='text/javascript'/> <script src='http://sites.google.com/site/simoxisite/syntaxhighlighter/shBrushDelphi.js' type='text/javascript'/> <script src='http://sites.google.com/site/simoxisite/syntaxhighlighter/shBrushJava.js' type='text/javascript'/> <script src='http://sites.google.com/site/simoxisite/syntaxhighlighter/shBrushJScript.js' type='text/javascript'/> <script src='http://sites.google.com/site/simoxisite/syntaxhighlighter/shBrushPhp.js' type='text/javascript'/> <script src='http://sites.google.com/site/simoxisite/syntaxhighlighter/shBrushPython.js' type='text/javascript'/> <script src='http://sites.google.com/site/simoxisite/syntaxhighlighter/shBrushSql.js' type='text/javascript'/> <script src='http://sites.google.com/site/simoxisite/syntaxhighlighter/shBrushVb.js' type='text/javascript'/> <script src='http://sites.google.com/site/simoxisite/syntaxhighlighter/shBrushXml.js' type='text/javascript'/> <script src='http://sites.google.com/site/simoxisite/syntaxhighlighter/shBrushRuby.js' type='text/javascript'/>
مرة أخرى نبحث عن:
</body>
و قبله أي فوقه مباشرة نلصق الكود الآتي و نحفظ القالب:
<script language='javascript'> function start() { dp.SyntaxHighlighter.BloggerMode(); dp.SyntaxHighlighter.ClipboardSwf = '/flash/clipboard.swf'; dp.SyntaxHighlighter.HighlightAll('code', true, true, false, 1, false); } window.onload = start; </script>
كما لاحظتم في الكود الأول فإن الإضافة بها عدة ملفات جافاسكريبت كل واحد منها مختص بعرض أكواد لغة برمجة معينة ك php ، java ، javascript ، xml ، و غيرها ... و هذا سنأخذه بعين الاعتبار فيما يلي .
يدرج الكود كما يلي :
<pre name="code" class="css"> هنا يوضع الكود </pre> أو <textarea name="code" class="css"> هنا يوضع الكود </textarea>
باستعمال pre لعرض كود html تأكد من تعويض الأقواس المعقوفة < و > بما يلي
- < إلى <
- > إلى >
أما إذا استعملت textarea فالمتصفح يتجاهل ما بين وسميها و يعرضها نصا ، إذا فهذه تعد الأبسط و الأسرع.
2 - طريقة تركيب الإضافة على مدونات ووردبريس
- تحميل الإضافة من هنا SyntaxHighlighter Plus
- فك الضغط عن الملف و رفع مجلد الإضافة إلى مجلد plugin الموجود داخل wp-content
- تفعيل الإضافة من صفحة الإضافات في لوحة تحكم لمدونة .
- ثم في التدوينة أو الموضوع ندرج الكود كما يلي:
[sourcecode language='css']هنا يوضع الكود[/sourcecode]
يعوض css برمز لغة برمجة الكود المعروض و هذه لائحة اللغات المتاحة و رموزها.
تحياتي!
التعليقات : 26
موضوع مهم أخي الكريم تقبل سلامي واعذرني لانني لا اجد الكلمات المناسبة التي تستحقها لذلك أكتفي بقول شكرا تقبل مروري أخي الكريم ...
كل ما تكتبه نستفيد منه .. تقبل مروري أخي الكريم ذؤيب.. ولدّي طلب أتمنى أن أجده عندك أحتاج إلى كود وضع اعلانات مواقع أخرى على بلوجر أي تضغط على الصورة وتوصلك إلى الموقع المراد .
تحياتي
طريقة احترافية..
لكن، يبدو أنها تعتمد على الجافاسكريبت بشكل كبير، مما سيسبب في ثقل التصفح (نوعا ما)..
لذلك، بالنسبة للمستخدمين الذين لا يحتاجون لعرض أكواد بشكل مستمر، تكفيهم الطريقة التالية:
الدخول لBlogger اللوحة التجريبية:
draft.blogger.com
يكتب موضوعه، ويضيف الأكواد بشكل عادي، ثم يؤشر على "إظهار HTML فعليا" في خيارات الرسائل..
بهذه الطريقة ستظهر جميع الأكواد دون تحرير HTML.. ولمن يريد نتيجة أكثر غني يمكنه دمج الكود داخل الإقتباس، ويخصص كلاس محدد بcss لها ليميزها عن بقية الإقتباسات، مثلا..
تختلف النتيجة الآن!
غريب، قبل قليل لم يكن الجافاسكريبت يعمل؟
أم أنها معدتي الفارغة فلم أعد أحسن تصفحا :D
أخي S.M.G
حياك الله ، الله يحفظك و يحفظ طيب خلقك و كلامك!
أخي أسامة جاب الدين
اهلا و سهلا أخي الحبيب .
الأمر سهل أخي الحبيب يمكنك إنجازه من خلال محرر مدونتك . تضيف صورة كما تفعل عادة ثم تضغط على أيقونة الرابط في المحرر (الأيقونة الصغيرة التي تشبه السلسلةو الكرة) ثم تدخل رابط الموقع و من تبويب html تنسخ الكود و تضعه في أداة html/javascript . أم تراك تقصد شيئاآخر ؟
رابط مدونتك قد يفيد لتعرف مقاس الصور فأدرجه رجاء.
أخي محمد صديق العصافير حلت النسائم و أينعت أزهار الربيع بقدومك أهلا و سهلا.
الطريقة التي تفضلت بذكرها هي التي أستعمل تقريبا و أعتمد فيها على وسم الاقتباس و تحويل أكواد ال HTML .
ليس السبب معداتك بل هو Google Sites حيث أرفع ملفات الجافاسكريبت كان متوقفا مما أثقل الدخول للمدونة و أوقف عمل الإضافة :).
شكرا إخواني و تقبل الله صيامكم و قيامكم.
بوركت اخي دؤيب
أخي (ذئب)
أتطلع إلى أن أكتب بعض الدروس والفوائد في لغة ActionScript الخاصة بالفلاش ، ولذلك سأحتاج إلى هذه الإضافة المهمة!
من جهة أخرى:
عذرا على عدم الرد على سؤالك الذي سألتنيه في مدونتي عن التعليقات، نعم يا ذؤيب أوقفتها لأسباب يطول شرحها، وأنا هذه الأيام مشغول جدا جدا! (جدا)
ولكن ما زلت أكتب من حين لآخر في المدونة بعض الأشياء لعلك تتابعها، ولم أنسك يا ذؤيب وأنسى خدماتك لي جزاك الله خيرا
مرحبا أخي oilgague بوركت و بورك طيب كلمك :)
أخي أحمد مرحبا بك !
بالتوفيق ننتظر دروسك بشغف و ترقب . و الله لك نسال التوفيق و السداد و تيسير الأمور.
أنا دائم المتابعة لمدونتك الغنية!
تقبل الله صيامكم و قيامكم.
إستخدام SyntaxHighlighter عند عرض الأكواد يجعلها تظهر بمظهر جميل ولائق ويضفي على المدونة مزيدا من الاحترام.
جزاك الله كل خير.
أشكرك كثيراً أخي ذؤيب .. هذا ما أقصده وعرفت الطريقة من خلال شرحك
السلام عليكم ورحمة الله وبركاته
كيف حالك أخي ذؤيب .. لديّ هذه المرة سؤالا آخر .. طبقّت كود (أكمل بقية الموضوع) على مدونتي .. ولكن ملخص التدوينات فقرته غير مضبوطة .. وهنالك مشكلة أخرى في القالب غير المعرب وهي أن عنوانين التدوينات تنزاح إلى اليسار .. أرجو أن أجد لديكم الحل .. وجزاكم الله خيراً
و عليكم السلام و رحمة الله
مرحبا بكم إخواني الكرام و شكرا على طيب الكلام.
أخي أسامة
1 - توجه إلى صفحة تحرير html و ابحث عن هذا
outer-wrapper
إلى جانبه ستجد
margin:0 auto; width:980px; text-align:left;
2 - استبدل left ب right
بخصوص فقرات اقرأ المزيد فلا يمكن التحكم بها لأن المقتطف يحدد تلقائيا لكل التدوينات. فقط يمكنك تقصير أو تطويل المقتطف لكل التدوينات و ليس التحكم فيه لكل تدوينة لوحدها. إن كنت تقصد هذا .
تحياتي.
أشكرك كثيراً أخي ذؤيب .. حقيقة أتعبتك معي .. طبقت الخطوة أعلاه وإنزاحت لكها لليمين بحمد الله .. أما الجزء الثاني من السؤال وهو حجم خط المقتطف صغير مقارنة بخط التدوينة .. أتمنى أن تكون هنالك طريقة لتكبيره.
وجزاك الله كل خير
chokran jaziiiilan akhi
الاخ ذؤيب حفظه الله
مدونتك اكثر من رائعة
رجاء مدني بنقطة من بحر خبرتك
تصور انني لا استطيع ان اضيف مقالة
وان انسق مدونتي مثلك
مع كل احترامي لكم
وانا اكتب انتطر الرد
--
و تفضلوا بزيارة مدونتي ابراهيم رشيد أبو عمرو
http://alrashid2222gmailcom.blogspot.com
على هذه المدونة يوجد برامج تعليمية مجانية للأطفال يمكنك تنزيلها على جهازك ومواضيع اجتماعية هادفة
alrashid2222@gmail.com
العفو أخي أسامة ، الإضافة لا تغير الخط بل قالبك و أكود css فيه هي من يتحكم بحجم الخط .
akhi Denvoizer
barak lahho fik ya akhi lhabib :)
أخي الحبيب إبراهيم رشيد أبو عمرو
العفو أخي ، الحمد لله كلنا مبتدئون و بالتعاون إن شاء الله نوفق . هذا مسنجري أضفني كي نتواصل خصوصا و أنك مهتم بالحقل التربوي مثلي :)
tsunamix5x@hotmail.com
عيدكم مبارك سعيد.
لم ينحج الامر
السلام عليكم اخي اريد رايك في موقعي الشخصي
http://www.cinfilm.com
بعد التركيب أقوم بحفظ التدوينة تظهر لدي رسالة خطأ :
لا يمكن قبول HTML خاصتك: Tag is not allowed: HEAD
إيقاف عرض أخطاء HTML لنص هذه المشاركة
و لابد ان اقوم بالتأشير علي الإختيار الثاني.
لدي استفسار استخدم مواقع تخويل الأقواس المعقوفة؟ للكود الداخلي الذي سوف يظهر في الصندوق أم للكود الأساسي المسئول عن عرض الكود ؟
قمت بتطبيق الدرس علي القالب بطريقة سليمة و متأكد منها 100%
أنظهر هذه التدوينة قمت بعمل تدوينة مشابهة لهذه و أستخدمت الأكواد بشكل سليم و لكن تظهر بداخل صندوق عادي.
بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته
الأخ الفاضل ذؤيب حفظكم لله
الشكر كل الشكر
جزآك الله خيرُا لكم مني سلام حار مع احترامي
ويسرني أن أكون متواصلا بشكل دائم معكم اكرر شكري وتقديري واعتزازي بكم
كلنا كالقمر لنا جانب مظلم وانتم البدر...
يا
نورنا من إشعاعات نوركم ونحن حقــًا نتعلم منكم
وتشجيعكم وتوجيهاتكم وتعليقاتكم البناءة سبب لي ولكم بعد الله في النجاح ؛؛
ونفعنا الله وإياكم بما نقدم من أجل الخير والى الأمام دائمًا
وتواصلكم وانضمامكم إلى مجموعتي على facebook يزيدني فخرًا فهذا نبلا منكم
http://www.facebook.com/group.php?gid=123644750984043
شرف لي وتواضعا منكم للضغط على الرابط والانضمام لمجموعتي
"صعوبات التعلم والمفكر التربوي إبراهيم رشيد "
http://alrashid2222gmailcom.blogspot.com/
@ذؤيب
عالمنا
تسلم ايدك يا ريس
مدونه فيلم السهره /http://filmevening.blogspot.com
مدونه مسلسلات تركى /http://turkyaonline.blogspot.com
شكرا على الموضوع
BookMark
BookMark
BookMark
BookMark
دردشة بنات مصرية
لعبه تلبيس البطريق
لعبه قص الاضافر
لعبة الحرب الجديده 2013
لعبه سوبر ماريو الجديده
لعبه المزرعه السعيده
لعبه الدررجات انااريه 2013
لعبه العربيات الجديده
تحميل لعبه توم واجيري 2013
لعبة حرب الدبابات 2013
لعبه حرامي السيارات
لعبه سوبر ماريو الجزء الثاني
لعبة الجراج الجديده
لعبة سوبر ماريو القديمه
لعبه اسبونج بوب 2013
لعبه مايك اب للبنات فقط
لعبه تلبيس للبنات فقط
لعبه تكن
العاب تلبيس للبنات
لعبه تلبيس حقيقي
Merci :)
إرسال تعليق
يمكن استخدام بعض علامات HTML، مثل <b>, <i>, <a>
أخي الكريم، رجاء قبل وضع أي كود في تعليقك، حوله بهذه الأداة ثم ضع الكود المولد لتجنب اختفاء بعض الوسوم.
» معرض قوالب بلوجر مدونة لعرض أفضل القوالب المطروحة على معهد خبراء بلوجر : منتدى خاص بالبلوجر لتبادل الخبرات بين مدوني البلوجر ومشاركة القوالب العربية والمعربة أو الأجنبية إضافة إلى التبادل الإعلاني وطرق الربح عن طريق مدونات بلوجر.الروابط الدعائية ستحذف لكونها تشوش على المتتبعين و تضر بمصداقية التعليقات.