Highlight.js Kullanımı

16 Aralık 2015 - 26 Okunma
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. […]

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.

ITC | İlkteknoloji