بسم الله و الحمد لله و الصلاة و السلام على خير خلق الله محمد الأمين. إخواني الكرام في هذا الموضوع سنتعرف و رفقتكم الطيبة إلى طريقة إدراج الأكواد باستعمال SyntaxHighlighter في مدونات بلوجر Blogger و في مدونات ووردبريس Wordpress كذلك. و تجدر الإشارة إلى أن هذه الإضافة تفيد المدونات التعليمية التي اعتاد أصحابها على إدراج أكواد فيها قصد الشرح و التوضيح . لا استعملها في مدونتي و اكتفي بخاصية الاقتباس لعرض الأكواد بغية التبسيط لا غير و لكن سأستعملها في هذا الموضوع توضيحا و تمكينا من التجريب.
أولا هكذا سيظهر الكود بعد تنصيب الإضافة: (هذا الكود لا علاقة له بالإضافة، فقط للمعاينة)
من لوحة التحكم نفتح صفحة تحرير html ثم نحفظ نسخة احتياطية من القالب قبل بدء التعديل.
و نبحث عن :
قبلها أي فوقها مباشرة نلصق الكود الموالي:
مرة أخرى نبحث عن:
و قبله أي فوقه مباشرة نلصق الكود الآتي و نحفظ القالب:
كما لاحظتم في الكود الأول فإن الإضافة بها عدة ملفات جافاسكريبت كل واحد منها مختص بعرض أكواد لغة برمجة معينة ك php ، java ، javascript ، xml ، و غيرها ... و هذا سنأخذه بعين الاعتبار فيما يلي .
يدرج الكود كما يلي :
باستعمال pre لعرض كود html تأكد من تعويض الأقواس المعقوفة < و > بما يلي
و يمكن القيام بهذه العملية باستعمال هذه الأداة التي تعوض كل الأقواس بكود html دفعة واحدة .
أما إذا استعملت textarea فالمتصفح يتجاهل ما بين وسميها و يعرضها نصا ، إذا فهذه تعد الأبسط و الأسرع.
2 - طريقة تركيب الإضافة على مدونات ووردبريس
يعوض css برمز لغة برمجة الكود المعروض و هذه لائحة اللغات المتاحة و رموزها.
المصدر: مدونة ذؤيب
أولا هكذا سيظهر الكود بعد تنصيب الإضافة: (هذا الكود لا علاقة له بالإضافة، فقط للمعاينة)
1- طريقة تنصيب الإضافة في مدونات بلوجر Blogger.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 ، و غيرها ... و هذا سنأخذه بعين الاعتبار فيما يلي .
يدرج الكود كما يلي :
طبعا هذا الكود معد لعرض css و منه لعرض أكواد أي لغة أخرى نستبدل css باسم تلك اللغة.<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 برمز لغة برمجة الكود المعروض و هذه لائحة اللغات المتاحة و رموزها.
المصدر: مدونة ذؤيب
أصدقاء(تطوير ويب)
0تعليقات Blogger
لا توجد تعليقات على موضوع "عرض الأكواد في ووردبريس و بلوجر باستعمال SyntaxHighlighter"
إرسال تعليق
التعليقات متاحه لمستخدمي حساب جوجل فقط.ولاضافة كود: أستعن بهذه الأداة السريعة Encode/HTML .
