SyntaxHighlighter با طعم JQuery

29 01 2009
SyntaxHighlighter JQuery

اگه تا حالا از اسکریپت SyntaxHighlighter استفاده کرده باشین میدونین که با استفاده از این اسکریپت می شه کدها یا همون Code Snipped ها را رنگی و فرمت کرد.
برای استفاده از این اسکریپت در حالت عادی لازم است که علاوه بر موتور اصلی این اسکریپت (shCore.js) اسکرپیت مخصوص زبان استفاده شده در کدتون رو هم اضافه کنید. برای مثال برای سی شارپ shBrushCSharp.js

مشکلی که با این روش وجود داره اینه که ممکنه که نتونید این کار رو با هر پست در وبلاگ و یا هر صفحه در سایتتون انجام بدین، چون ممکنه که چندین زبان در صفحات مختلف استفاده شده باشه و تشخیص زبان و افزودن اسکریپت مخصوص آن به راحتی ممکن نباشه.
در این حالت اکثر سایتها تمامی زبانهایی رو که احتمال می دن در سایت یا وبلاگ استفاده شده باشه رو اضافه می کنند.
این کار علاوه بر اینکه حجم و زمان بالا اومدن رو افزایش میده باعث افزایش تعداد درخواست های غیر ضروری به سرور شده و آن را بی جهت مشغول می کنه.

در زیر اسکریپتی رو که با استفاده از JQuery نوشته ام اگر در صفحه خود استفاده کنید علاوه بر کاهش تعداد درخواست ها به سرور و کاهش حجم دریافتی، اعمال SyntaxHighlighter به صورت خودکار خواهد بود و نیازی به درج هیچ کد اضافه ای نخواهید داشت. این امکان هم هست که اگر در صفحه هیچ کدی(منظور code snipped) وجود نداشته باشد هیچ کدام از اسکریپتهای SyntaxHighlighter استفاده نشود.
پس برای استفاده، به جای لینک مستقیم به SyntaxHighlighter باید از اسکریپت زیر استفاده کنید:

// Coded by Salar Khalilzadeh 2009-01-29
// https://salarblog.wordpress.com/

if($){
// SyntaxHighlighter scripts path
var BrushBasePath='http://www.YourSite.com/SyntaxHighlighter/scripts/';

// SyntaxHighlighter style sheet
var StyleFilePath='http://www.YourSite.com/SyntaxHighlighter/styles/SyntaxHighlighter.css';
var BrushFileName='shBrushXXX.js';
var BrushCoreFile='shCore.js';
var BrushAliases=[
	['xml','xml'], ['xhtml','xml'], ['xslt','xml'], ['html','xml'] , ['xhtml','xml'],
	['vb','vb'], ['vb.net','vb'],
	['sql','sql'],
	//['asm','asm'], uncomment if you have assmbly brush
	['ruby','ruby'], ['rails','ruby'], ['ror','ruby'],
	['py','python'], ['python','python'],
	['php','php'],
	['js','jscript'], ['jscript','jscript'], ['javascript','jscript'],
	['java','java'],
	['delphi','delphi'], ['pascal','delphi']
];

var codeTags=$('pre,code');
var matchedElements=[];
codeTags.each(function(){
	var $item = $(this);
	var href = $item.attr("href");
	var i;
	for(i=0;i<BrushAliases.length;i++){
		var attr=$item.attr("class");
		if(attr.indexOf(BrushAliases[i][0])!=-1 && matchedElements[BrushAliases[i][1]]==null){
			matchedElements.push(BrushAliases[i][1]);
		}
	}
})

// Highlighter core, if there is any language
if(matchedElements.length>0){
	document.write("<link rel='stylesheet' type='text/css' href='"+StyleFilePath+"' />");
	var jsCore=BrushBasePath+BrushCoreFile;
	document.write(unescape("%3Cscript%20type%3D%27text/javascript%27%20src%3D%27")+ jsCore + unescape("%27%3E%3C/script%3E"));
}

// Brushes
for(i=0;i<matchedElements.length;i++){
	var jsSrc=BrushFileName.replace('XXX',matchedElements[i]);
	jsSrc=BrushBasePath+jsSrc;
	document.write(unescape("%3Cscript%20type%3D%27text/javascript%27%20src%3D%27")+ jsSrc + unescape("%27%3E%3C/script%3E"));
}}

نحوه استفاده: این کد رو در حتما در آخر صفحه درج کنید. علت این کار رو در ادامه توضیح می دم.
در این کد در مقدار BrushBasePath آدرس محل brush های SyntaxHighlighter خواهد بود که با توجه به اینکه آن ها را در کجای وبسایت خود قرار داده اید باید آن را مسیر دهی کنید.
StyleFilePath آدرس فایل CSS مورد استفاده SyntaxHighlighter است.

شیوه کار این کد به این صورت هست که با استفاده از لیست زبانهای قابل استفاده، در تگ های pre به جستجو می پردازد و در صورت یافتن، اسکریپت مربوط به آن زبان را به صفحه اضافه می کند.
تنها نکته مهمی که وجود داره عدم استفاده از $(document).ready() مربوط به JQuery هست. به این علت که این تکه کد مقداری اسکریپت در صفحه درج می کند و زمان وقوع رویداد ready کد html کامل دریافت شده است و درج مجدد یک اسکریپت جدید باعث refresh شده صفحه و از دست رفتن ظاهر اون میشه.

موفق باشید


کارها

Information

2 responses

31 01 2009
ایمان

کد بسیار جالبیه سالار جان، جی کوئری واقعاً خیلی از کارهارو ساده کرده. متاسفانه من فعلاً آشنایی زیادی با جی کوئری ندارم. هر وقت فرصت بشه حتماً در موردش بیشتر مطالعه می کنم.

21 02 2009
فرزاد

متاسفانه پلاگین های وردپرس که این کار رو انجام میدن تو صفحات RTL باگ دارند و نمیشه ازشون استفاده کرد . من به شخصه خیلی دنبال همچین چیزی گشتم که زبان Matlab رو هم ساپورت کنه اما متاسفانه نصف پلاگین ها متلب رو ساپورت نمیکنن یا اگه میکنن تو صفحات RTL با مشکل مواجه اند

پاسخی بگذارید

در پایین مشخصات خود را پر کنید یا برای ورود روی شمایل‌ها کلیک نمایید:

نشان‌وارهٔ وردپرس.کام

شما در حال بیان دیدگاه با حساب کاربری WordPress.com خود هستید. بیرون رفتن / تغییر دادن )

تصویر توییتر

شما در حال بیان دیدگاه با حساب کاربری Twitter خود هستید. بیرون رفتن / تغییر دادن )

عکس فیسبوک

شما در حال بیان دیدگاه با حساب کاربری Facebook خود هستید. بیرون رفتن / تغییر دادن )

عکس گوگل+

شما در حال بیان دیدگاه با حساب کاربری Google+ خود هستید. بیرون رفتن / تغییر دادن )

درحال اتصال به %s




%d وب‌نوشت‌نویس این را دوست دارند: