İçeriğe geç

Kod Renklendirme (Syntax Highlighter) highlight.js Kullanımı

Daha önce MyBB sistemlerde Python kod renklendirme için kullandığımız highlight.js dosyasını şimdi genel olarak nasıl kullanırız ona değineceğiz. Gerçi konuya gerek yoktu ama blog çok boş kaldı bu aralar. Dolsun azıcık 🙂

highlight.js Nedir?

Yazılım ile alakalı sitelerde görmüşsünüzdür, örnek olarak verilen kodlar renklendirilir. Böylece kodlar hem daha güzel bir görüntü sunarken hemde anlaşılır oluyor. Örneğin aşağıda ki kod parçası renklendirme işlemine tabi tutulmuştur.

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.

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

Öncelikle kendi İnternet sayfasına giriyoruz.

Site: https://highlightjs.org/download/

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.

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.

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. Örneğin test edelim…

Sorunsuz bir biçimde çalıştı. code etiketinin class argümanına gönderdiğimiz değer bizim seçtiğimiz dil oluyor. Python için “python” yazmak yeterli. Diğer dil referansları için aşağıda ki linki ziyaret edebilirsiniz.

Diğer Dil Referansları: readthedocs.io

Doküman Sayfası: http://highlightjs.readthedocs.io

Unutmadan dile getireyim, şu an için kodlara satır numarası getirme gibi bir durum yok ve yakın gelecekte de olmayacak gibi görünüyor. Takıldığınız kısımları yorum olarak belirtebilirsiniz elimden geldiğince yardımcı olmaya çalışırım. Bugünler de benzer bir konu ile tekrar geleceğim.

Faydalı olması dileklerim ile, kolay gelsin!

Tarih:Genel ProgramlamaHazır Sistemler

5 Yorum

  1. fredalme fredalme

    teşekkürler..

  2. Ali Ali

    Prism’e gore cok daha iyi bence. Eline saglik.

  3. Teşekkürler dostum. Ben bu işlem için Google’nin sunduğu script dosyasını kullanıyordum. Sadece renklendirme yapıyordu. Bu daha fonksiyonel.

    • Aslında fonksiyonellik açısından ACE daha fonksiyonel ama uğraştırıcı. HGJS ikisinin arasında bir deneyim sunuyor ve çokta yormuyor kullanırken 🙂

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

This site uses Akismet to reduce spam. Learn how your comment data is processed.