"Enter"a basıp içeriğe geçin

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.

def egBlog():
    return "Ben Hicbir Ise Yaramayan Bir Fonksiyonum"

print(egBlog)

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.

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

<pre><code class="python">import ragent
def egBlog():
    return "Gereksiz Fonksiyon Seni!"</code></pre>

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!

5 Yorum

  1. fredalme
    fredalme 20 Mart 2018

    teşekkürler..

  2. Ali
    Ali 18 Mart 2018

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

  3. Oktay
    Oktay 18 Mart 2018

    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.

    • Yunus Emre Geldegül
      Yunus Emre Geldegül 20 Mart 2018

      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.