Kod Renklendirme (Syntax Highlighter)

Kod Renklendirme (Syntax Highlighter)

Kod Renklendirme (Syntax Highlighter)

 
Yazılım kodlarının bir formatı vardır ve biz buna Syntax(Söz Dizimi) deriz.
Highlighter (Vurgulayıcı) ile kodların bazı noktalarının belirgin ve göze çarpan şeklide olmasını isteriz.
 
IDE kullanırken "Kod Renklendirme" zaten vardır ve programcılar için bir kolaylıktır.
 
Ancak Web Sitelerinde kodların bir IDE içerisindeymiş gibi yada Kod Renklendirme (Syntax Highlighter-"Söz Dizimi Vurgulayıcısı") ile anlanlı hale getirmek için ben web sitemde 
highlight.js kullandım. Bunu nasıl uyguladığımı da aşağıda anlatıyorum.
 
Ek olarak, diğer alternatif Syntax Highlighter's için göz atabilirsiniz.
 
 
 
highlight.js Nedir?
Yazılan kodların uygun programlama dili syntax'ına göre renklendirilmesini ve anlamlı hale gelmesini sağlar.
 
Bu yapı, https://highlightjs.org/ web sayfasında yer almakta olup bir çok programlama dili desteğini sağlamanın yanı sıra kullanım detaylarını da içeren kapsamlı bir dokümantasyona sahiptir.
 
highlight.js işte bu renklendirme işlemini yapan Js frameworkü. Basit ve etkili bir kullanıma sahip olduğu için ben aktif olarak kullanıyorum. Kendisi +150 dili destekliyor ve farklı temalara sahip.
 
Örneğin Classic Asp'de "Merhaba Dünya"  kodunu burada görebilirsiniz.
 
 
<%
  Response.Write ("Hello world")
%>

highlight.js Nasıl Kullanılır?

Öncelikle kendi İnternet sayfasına giriyoruz.
 
 
Bu adreste 2 adet kullanım seçeneği mevcut. 1. yöntem CDN yöntemi, Js kodlarını uzak sunucuda tutarak kendi sunucunuza yük bindirmemiş oluyorsunuz. Eğer bu yöntemi kullanmak isterseniz sayfadan aldığınız cdnjs kodlarını <head></head>  etiketleri arasına yerleştirmeniz yeterli.
 
 
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>

 

Eğer dosyaları kendi sunucunuz üzerinde tutmak isterseniz Custom Package seçeneğinden hangi dilleri desteklemesini istiyorsanız onları seçin ve “Download” diyerek indirin. Dosyaları kendi sunucunuza gönderin. Bu yöntemde <head></head>  etiketleri arasına aşağıda ki kodları eklemeniz gerekiyor.

 <link rel="stylesheet" href="/dosyayolu/styles/default.css">
<script src="/dosyayolu/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

Dosya yolunu doğru belirtmeyi unutmayın! 1. satırda ki default.css değerini değiştirerek farklı temalar da yükleyebilirsiniz.

Çeşitli temalara ve nasıl göründüğüne “demo” sayfası üzerinden ulaşabilirsiniz.

Demo Sayfası: https://highlightjs.org/static/demo/

Artık sitede <pre><code>   </code></pre>  etiketleri arasına yazacağınız her şey renklenecek.

Code etiketinin class argümanına gönderdiğimiz değer bizim seçtiğimiz dil oluyor. C# için “csharp” yazmak yeterli. Diğer dil referansları için aşağıda ki linki ziyaret edebilirsiniz.

Diğer Dil Referansları: https://highlightjs.readthedocs.io


Şu an için kodlara satır numarası getirme gibi bir durum yok ve yakın gelecekte de olmayacak gibi görünüyor. 

Bu konuda da bir açıklama yapılmış: 
https://highlightjs.readthedocs.io/en/latest/line-numbers.html

Zaten geliştirmeye de izin veriliyor.

Faydalı olmasını diliyorum...

 

Yorumlar ( 0 adet )

Bilgi ! Bu Blog için hiç yorum yazılmamış, ilk yorumu siz yapın!

Example

Leave your email address and we will notify you about all the news and developments. Stay with us!