Syntax Highlighter
08.11.2007 - 23:26
EkleBunu Sosyal Paylaşım Butonu0 Yorum | 230 Okuma

Bir web sayfasında, kaynak kodları renkli olarak görüntülemek, ziyaretcilerin kodu daha iyi anlamalarını ve sitede daha güzel bir görüntü saÄŸlayacaktır. Geçenlerde bende siteye uygulamak için google'a sordum ve SyntaxHighlighter buldum. Kurulumu ve kullanımı son derece basit. Örnek vermek gerekirse kodunuzu,

<pre name="code" class="c-sharp">
    buraya kodlar gelecek
</pre>

etiketleri arasına yazıyorsunuz ve hemen altınada

<link type="text/css" rel="stylesheet" href="css/SyntaxHighlighter.css"></link>
<script language="javascript" src="js/shCore.js"></script>
<script language="javascript" src="js/shBrushCSharp.js"></script>
<script language="javascript" src="js/shBrushXml.js"></script>
<script language="javascript">
dp.SyntaxHighlighter.ClipboardSwf = '/flash/clipboard.swf';
dp.SyntaxHighlighter.HighlightAll('code');
</script>

satırlarını ekliyorsunuz kullanmak istediÄŸiniz dil'i göre <pre> tagında (bu örnekte c-sharp) dili ve hemen alt satırda o dilin JavaScript dosyasını sayfaya dahil ediyorsunuz, örneÄŸin;

<script language="javascript" src="js/shBrushCSharp.js"></script>

veya cpp için

<script language="javascript" src="js/shBrushCpp.js"></script>

tabii gerekli path ayarlarını kendi yapılandırmanıza göre düzenlemelisiniz. Ayrıntılı bilgileri projenin sayfasında bulabilirsiniz.

Aslında bu alanda bir cok proje var ama SyntaxHighlighter'ın bana göre en güzel ve kullanmamı gerektiren özelliÄŸi BloggerMode(); çünkü websitenizde WYSIWYG gibi bir editor kullanıyorsanız eklediÄŸiniz kodların hemen sonuna <br /> (hatta her satırın sonuna) etiketleri eklenecektir ve görüntülemek istediÄŸiniz kod satırlarının sonunda <br /> etiketleri yerini alacaktır. Hiçde hoÅŸ bir durum olmasa gerek. İşte BloggerMode() özelliÄŸi bu sorunu ortadan kaldırıyor <br /> etiketleri görünmüyor ve kod biçimlenmiÅŸ ÅŸekilde karşımıza çıkıyor. Bu özelliÄŸi kullanabilmek içinde yukarıdaki kod'da

dp.SyntaxHighlighter.HighlightAll('code');

satırının hemen üstünde

dp.SyntaxHighlighter.BloggerMode();

satırını ekliyoruz yani son hali

dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll('code');

oluyor iÅŸte bu kadar.

Etiketler : nesimia

'Syntax Highlighter' İle İlgili Diğer Yazılar İçin Tıklayın.

0 Yorum
'Syntax Highlighter' İle İlgili Diğer Yazılar :
    Google
     
    En Son Yorumlar (Blog)
    • Nesimi ACARCA:Yazım hatası, hemen düzeltiyorum. :) Ayrıca ilginiz için teÅŸekkürler. Mail yoluyla sizinle il...
    • Alparslan Duran:Selamlar e mail adresinizi anlamadım o aradaki (qt) @ anlamına mı gelmekte ??? Neys...
    • TEYMUR:iyi videosu olsa lap iyi ...
    • mali:iÅŸte gidiyorum arkama bakmadan bıraktıklarıma piÅŸman olmadan ama bi...
    • Nesimi ACARCA:Son sorudan baÅŸlayayım. Aslında öğrendiklerimi, bildiklerimi sizlerle paylaÅŸmak için yazıyor...
    • sahin:qt, eclipse ve kdevelop öğrenebilmemiz için türkçe kitap veya kaynak varmı? yoksa siz böyle b...
    • Nesimi ACARCA:İhtiyaç duyulduktan sonra neden yapılmasın, iÅŸlerim bitsin bir göz atarım. Zaten dediÄŸiniz g...
    • Ömer F. USTA:mesala QR barcode sisteminde 3 tane büyük kare var bunlar etiketin orta yerini &...
    • Nesimi ACARCA:Bunlar baya karışık gibi :) inÅŸallah onlarıda yaparız. Artık bir standartın gelmesi ÅŸart, Ã...
    • Ömer F. USTA:EÄŸer uygulama Türkiye kullanımı ile kısıtlı kalmayacaksa USA'de sıklıkla ...
    Sponsor Bağlantı