آموزش کامل فعال سازی Syntax Highlighter در ویبولتن برای اولین بار
امتیاز:

سلام .
با توجه به قولی که داده بودم قراره اینجا آموزش نصب و فعال کردن قابلیت Syntax Highlighting رو برای اولین بار در انجمنهای ویبولتن توضیح بدم .
توضیح اینکه تو سایت اگه سرچ کنید ( هم اینجا و هم خود سایت vbulletin.org که این هک معرفی شده - ) بر اساس دستورات داده شده جلو برید شما با مشکل بزرگی مواجه میشید . مشکلی که برای کار این هک وجود داشت 1. چپ چین نبودنش و 2 اگر بیشتر از یک زبان در یک صفحه برای هایلایت قرار میدادید اون صفحه از انجمنتون با ارورهای فراوون لود میشد و فقط زبان اولتون هایلایت میشد و بقیه زبانها هایلایت نمیشدن . اما با روشی که من بکمک دوستم رسیدیم این مشکلات کاملا از بین رفته و میتونید استفاده کنید .
این یه امکان فوق العاده برای انجمن های دانشجویی و خصوصا برنامه نویسی هست که حالا قدم به قدم بهش میپردازیم .
قبل از هر چیزی برید و از اینجا آخرین ورژن این سینتکس هایلایتر رو دنلود کنید .
بعد از اینکه پکیج مربوطه رو دنلود کردید . دو تا پوشه هست که باید توی روت انجمنتون کپی کنید .کد:http://alexgorbatchev.com/SyntaxHighlighter/download/
1. پوشه های scripts و styles رو توی روت آپلود کنین ( فقط همین دوتا رو تو پوشه روتتون آپلود کنید به بقیه کاری نداشته باشید ).
2. فایل FIX رو که من درست کردم از ضمیمه رو دنلود کنید .
3. فایلهای shAllBrushes.js و shCore.js رو تو پوشه Scripts آپلود کنید ( آگه پیام overwrite اومد بزنید بله و اکی کنید )
4.فایل shCoreDefault.css رو هم تو پوشه styles آپلود کنید .
5. حالا به بخش استایلها و قالب ها برید > تنظیمات استایل > قالبهای عمومی
و حالا در انتهای headinclude کد زیر رو کپی کنید :
خب کار ما بتقریبا دیگه موم شد . حالا وقت ساختن BBCODE های ماست .کد:<script type="text/javascript" src="/scripts/shCore.js"></script> <link type="text/css" rel="stylesheet" href="styles/shCoreDefault.css"/> <script type="text/javascript" src="/scripts/shAllBrushes.js"></script> <script type="text/javascript">SyntaxHighlighter.defaults['toolbar'] = false;SyntaxHighlighter.config.str###rs=true; SyntaxHighlighter.all();</script>
این سیتنکس هایلایتر تعداد زیادی زبان رو پشتیبانی میکنه . پس ما یه BBCODE کلی میسازیم براش .
کد بی بی کد اصلی اینه :
و تنظیمات رو مثل شکل زیر انجام بدید :کد:<div dir=ltr> <script src="/scripts/shAutoloader.js" type="text/javascript"></script> <link type="text/css" rel="stylesheet" href="styles/shCoreDefault.css"/> <pre class="brush: {option}; toolbar: false;">{param}</pre> <script type="text/javascript"> function path() { var args = arguments, result = [] ; for(var i = 0; i < args.length; i++) result.push(args[i].replace('@', '/scripts/')); return result }; SyntaxHighlighter.autoloader.apply(null, path( 'applescript @shBrushAppleScript.js', 'actionscript3 as3 @shBrushAS3.js', 'ahk autohotkey @shBrushAhk.js', 'asm x86 @shBrushAsm.js', 'bash shell @shBrushBash.js', 'coldfusion cf @shBrushColdFusion.js', 'cpp c @shBrushCpp.js', 'c# c-sharp csharp @shBrushCSharp.js', 'css @shBrushCss.js', 'delphi pascal @shBrushDelphi.js', 'diff patch pas @shBrushDiff.js', 'erl erlang @shBrushErlang.js', 'groovy @shBrushGroovy.js', 'java @shBrushJava.js', 'jfx javafx @shBrushJavaFX.js', 'js jscript javascript @shBrushJScript.js', 'perl pl @shBrushPerl.js', 'php @shBrushPhp.js', 'text plain @shBrushPlain.js', 'py python @shBrushPython.js', 'ruby rails ror rb @shBrushRuby.js', 'sass scss @shBrushSass.js', 'scala @shBrushScala.js', 'sql @shBrushSql.js', 'vb vbnet @shBrushVb.js', 'xml xhtml xslt html @shBrushXml.js' )); SyntaxHighlighter.config.str###rs = true; SyntaxHighlighter.all(); </script> </div>
. خب حالا برای استفاده از این بی بی کد ما اینطور عمل میکنیم .
-----------------
خب حالا فرض کنید ما من نمیخوام کاربرم مجبور باشه هی تگ رو که زد اسم زبانم بنویسه . میخوام یه bbcode بسازم عین تگ code حالا برای یه زبان خاص . مثلا سی ++ !
برای این کار اینطوری عمل میکنیم .
میریم یه BBCODE جدید میسازیم بصورت زیر :
BBCODE:
حالا تنظیماتش رو بصورت زیر وارد کنید :کد:<div dir=ltr> <script src="/scripts/shAutoloader.js" type="text/javascript"></script> <link type="text/css" rel="stylesheet" href="styles/shCoreDefault.css"/> <pre class="brush: cpp; toolbar: false;">{param}</pre> <script type="text/javascript"> function path() { var args = arguments, result = [] ; for(var i = 0; i < args.length; i++) result.push(args[i].replace('@', '/scripts/')); return result }; SyntaxHighlighter.autoloader.apply(null, path('cpp c @shBrushCpp.js')); SyntaxHighlighter.config.str###rs = true; SyntaxHighlighter.all(); </script> </div>
حالا شما یه تگی دارید بصورت زیر که هر کد سی ++ بین این تگ قرار بگیره بصورت اتوماتیک هایلایت میشه.
کد:[CPP] ×××× [/CPP]
در اینجا میبینید که من تگهای مختلفی رو برای خودمون ساختم که یوزرهام راحت تر باشن تو استفاده :
شما میتونید لیست زبانهای دیگه ای که پشتیبانی میشه از پست زیر ببینید .
اینجا میتونید نمونه کار شده رو در انجمن ما ببینید :
http://forum.ustmb.ir/thread83.html#post213
http://forum.ustmb.ir/thread250.html
و بخش برنامه نویسی سایت ما .
-----------------------------------------------------------------------
امیدوارم این آموزش بدردتون خورده باشه .
این فیکس رو بکمک دوست خوبم آقای سلطانی عزیز درست کردیم . بدون این FIX و تغییراتی که بالا عنوان کردم . شما اگه تو یک صفحه بیش از دو زبان رو بخوایید هایلایت کنید با ارورهای ناجوری مواجه میشد و فقط زبان اولتون هایلایت میشه . اما با این فیکس هیچ مشکلی نخواهید داشت .
اگر قصد انتشار این آموزش رو دارید لطفا با ذکر منبع این کار رو بکنید .
اگر احیانا مشکلی در طی استفاده از این آموزش داشتید لطفا اطلاع بدید تا کمکتون کنم .
در پناه حق پیروز و سربلند باشید .
و برای ما و رفتگانمون دعای خیر کنید .
------------
فایل shCoreDefault.css سالم قرار گرفت .
ویرایش توسط Coderx : 2011/09/23 در ساعت 10:14 PM
علاقه مندی ها (Bookmarks)