.NET Tips: Syntax highlighting در بلاگر!

اگر علاقمند باشيد كه syntax highlighting را به سورس كدهاي ارسالي در بلاگر اضافه كنيد، روش كار به صورت زير است:
از آنجائيكه دسترسي به سرور و راه‌ حل‌هاي سمت سرور را نخواهيم داشت، تنها راه حل باقيمانده استفاده از روش‌هاي سمت كلاينت است. كتابخانه زير اين امر را ميسر مي‌سازد:
http://code.google.com/p/syntaxhighlighter/
اين كتابخانه، كار Syntax highlighting سمت كلاينت را با استفاده از JavaScript انجام مي‌دهد.

پس از دريافت آن (احتمالا به يك پروكسي نياز پيدا خواهيد كرد ...)، فايل‌ها را در يك سرور قرار دهيد. (براي مثال در Google pages)
سپس به قسمت ويرايش html قالب سايت مراجعه كنيد و كدهاي زير را به آن اضافه نمائيد (درصورت نياز مسيرهاي فايل‌ها را ويرايش كنيد):

<link href='http://vahid.nasiri.googlepages.com/SyntaxHighlighter.css' rel='stylesheet' type='text/css'/>
<script src='http://vahid.nasiri.googlepages.com/shCore.js' type='text/javascript'/>
<script src='http://vahid.nasiri.googlepages.com/shBrushCpp.js' type='text/javascript'/>
<script src='http://vahid.nasiri.googlepages.com/shBrushCSharp.js' type='text/javascript'/>
<script src='http://vahid.nasiri.googlepages.com/shBrushCss.js' type='text/javascript'/>
<script src='http://vahid.nasiri.googlepages.com/shBrushJava.js' type='text/javascript'/>
<script src='http://vahid.nasiri.googlepages.com/shBrushJScript.js' type='text/javascript'/>
<script src='http://vahid.nasiri.googlepages.com/shBrushSql.js' type='text/javascript'/>
<script src='http://vahid.nasiri.googlepages.com/shBrushXml.js' type='text/javascript'/>

<script class='javascript'>
//<![CDATA[
  function FindTagsByName(container, name, Tag)
  {
      var elements = document.getElementsByTagName(Tag);
      for (var i = 0; i < elements.length; i  )
      {
          if (elements[i].getAttribute("name") == name)
          {
              container.push(elements[i]);
          }
      }
  }
  var elements = [];
  FindTagsByName(elements, "code", "pre");
  FindTagsByName(elements, "code", "textarea");

for(var i=0; i < elements.length; i  ) {
if(elements[i].nodeName.toUpperCase() == "TEXTAREA") {
 var childNode = elements[i].childNodes[0];
 var newNode = document.createTextNode(childNode.nodeValue.replace(/<br\s*\/?>/gi,'\n'));
 elements[i].replaceChild(newNode, childNode);

}
else if(elements[i].nodeName.toUpperCase() == "PRE") {
 brs = elements[i].getElementsByTagName("br");
 for(var j = 0, brLength = brs.length; j < brLength; j  ) {
  var newNode = document.createTextNode("\n");
  elements[i].replaceChild(newNode, brs[0]);
 }
}
}
// dp.SyntaxHighlighter.ClipboardSwf =
//"http://vahid.nasiri.googlepages.com/clipboard.swf";
dp.SyntaxHighlighter.HighlightAll("code");
//]]>
</script>

خطوط فوق بايد پس از تگ‌هاي زير در قالب استاندارد قرار داده شوند:

</div></div> <!-- end outer-wrapper -->

از اين پس جهت استفاده از اين قابليت تنها كافي است از تگ‌هاي pre يا textarea استفاده كنيد (در قسمت html ارسال مطلب) و name را مساوي code قرار داده و language را مساوي زبان مورد نظر. براي مثال:


<div align="left" dir="ltr">
<pre name='code' language='sql'>
--get login time
SELECT login_time FROM master..sysprocesses WHERE spid = 1
</pre>
</div>

كه نتيجه نهايي به صورت زير خواهد بود:

--get login time
SELECT login_time FROM master..sysprocesses WHERE spid = 1

همچنين بايد دقت داشت كه مجاز به ارسال كاراكترهاي غيرمجاز در xml (<>\'&) در كدهاي خود نيستيد و اين كاراكترها سبب خواهند شد كه كد شما نمايش داده نشوند. به همين جهت همانطور كه پيشتر نيز ذكر شد مي‌توان از سرويس سايت http://www.elliotswan.com/postable/ استفاده كرد.

ماخذ:
http://developertips.blogspot.com/2007/08/syntaxhighlighter-on-blogger.html

۱۳۸۷/۰۸/۰۷

Syntax highlighting در بلاگر!