Highlight.js Kullanımı

Yazılım öğreten sitelerde çokça kullanılan highlight özelliğinin bir alternatifi olan highlight.js’in nasıl kurulacağını ve kullanacağını bu yazımızda öğreneceğiz.

İlk önce bu projeye ulaşmak için highlightjs.org adresine gitmeniz gerekiyor. Buradan js dosyasını kendi projenizin içine eklemeli ve kullanmaya başlamalısınız. Kullanımı oldukça basit.

Highlight Neler Sunuyor?

Bu eklenti 141 dili kapsıyor ve yazılan dilin hangi dil olduğunu otomatik denetleyebiliyor. İstediğiniz etiketi atayarak kullanabiliyorsunuz ve Her JS Framework’üyle uyumlu olarak çalışıyor.

Demo sayfasından kodun nasıl göründüğüne bakabilirsiniz.

Highlight Kullanımı

Kullanımı oldukça basit. İlk önce yukarıdaki linkten dosyaları indiriyoruz ve bu dosyaları projemizde ilgili yere koyuyoruz. Ondan sonra Highlight’ı kullanacağımız projenin içine aşağıdaki kodları kendi site yolumuza göre ekliyoruz.

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

Bu kod otomatik olarak yazıda <pre><code> etiketlerini gördüğü yerdeki kodlara highlight özelliğini verecek.

<pre><code class="html">...</code></pre>

Yukarıdaki kodun class özelliğine kodlama dilini yazarak, sistemin otomatik dil kontrolü yapmadan kodları hightlight etmesini sağlayabiliriz. Örnekteki html gibi.

Eğer bazı bölgelerde hightlight özelliği kullanılmak istenmiyorsa o bölgelerde class özelliğine nohighlight yazmamız yeterlidir.

Özel Kodla Kullanım

Hightlight.js üzerinde daha fazla kontrol sağlamak isteyenler için ayarlarda mevcut. Bu özelliği kullanarak kod yazmak istediğiniz alanları <pre><code> dan başka bir şekle dönüştürebilirsiniz.

hljs.configure({useBR: true});
$('div.code').each(function(i, block) {
  hljs.highlightBlock(block);
});

İşte highlight.js i kullanmak bu kadar basit.

DAHA FAZLA İÇERİK

HTML Nedir? Kullanımı HTML Nedir? Kullanımı

28 Kasım 2014, Cuma

Php’de Diziler (Array) Php’de Diziler (Array)

12 Aralık 2014, Cuma

SİZDE YORUM YAPIN

Php ile Gerçek IP adresini Alma

Php ile Gerçek IP adresini Alma 10 Ağustos 2015, Pazartesi

PHP Fonksiyonları: Unset() Kullanımı

PHP Fonksiyonları: Unset() Kullanımı 20 Mayıs 2015, Çarşamba