مقاله: آموزش کامل فعال سازی 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 کد زیر رو کپی کنید :

کد:

<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 های ماست .

این سیتنکس هایلایتر تعداد زیادی زبان رو پشتیبانی میکنه . پس ما یه 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 سالم قرار گرفت .