Prism JS Syntax Highlighter Wordpress Kurulumu ve Kullanımı

Prism JS, syntax highlighter olarak tanımlanan bir script. Kod parçacıklarını göze hoş gelecek şekilde, ziyaretçilerin anlayabileceği şekilde daha okunaklı gösteren bir script dosyası.

Ben de sitemde programlama ile ilgili kodları Prism JS ile gösteriyorum. Syntax highlighter görevi gören birçok eklenti olsa da, kullanımının rahat olması, opsiyonlu olması, istemediğim dillerin ve özelliklerin dahil olmamasını sağlayabildiği için tercih ediyorum Prism JS’i. Şimdi PrismJS nasıl kurulur, nasıl kullanılır, bakalım.

Önce sayfamıza ilgili dosyaları çağırmamız gerekiyor. Bunun için PrismJS sitesine girelim ve sağ üstteki Download butonuna tıklayalım. Şimdi bu butona tıklayınca karşımıza çeşitli opsiyonlar gelecek. Hangi dilleri göstermek istediğinizi ve dahil olmasını istediğiniz diğer özellikleri seçerek, sayfanın en altındaki Download JS ve Download CSS butonlarına tıklayarak ilgili dosyaları dizininize kaydedin.

Aşağıdaki kodlarda bulunan dosyaları kendinize göre ayarlayarak dosyaların sitenize dahil olmasını sağlayın.

<link rel="stylesheet" type="text/css" href="prism.css">
<script src="prism.js"></script>

Sonrasında kodları sitede görüntüleyebilmek için bazı kalıplar kullanmanız gerekiyor. Hangi kodun görünmesini istiyorsanız onun ismini düzenlemeniz gerekiyor. Örneğin sitede html kodları görüntüleyecekseniz HTML kodlarını aşağıdaki kodların arasına yazmalısınız.

<pre class="language-markup"><code>
// HTML Kodları
</code></pre>

Sitenizde CSS kodları görüntülemek istiyorsanız aşağıdaki kodların arasına yazmalısınız kodunuzu.

<pre><code class="language-css">
// CSS Kodları
</code></pre>

Escape characters adını programcılar duymuştur. HTML dilinde bazı özel karakterlere karşılık gelen kodları vardır. Boşluk karakterinin olması gibi. Visual Studio Code kullanıcıları Escape HTML Code adındaki eklentiyi indirebilirler. İnternet üzerinde de bu şekilde hizmet veren çok sayıda online servis de var. Kısa bir aramayla ulaşabilirsiniz.

Yukarıda HTML koduna örnek olarak verdiğim satırda xmp kodu dikkatinizi çekmiştir. Bu kodu eklerseniz bazı kodları olduğu gibi kullanabilirsiniz. Ancak JavaScript gibi bazı kodları görüntülemek isterken tarayıcı o kodları işleyebiliyor ve kodların kod gibi görünmesinin önüne geçebiliyor. İşte bu noktada kaçış karakterlerini (escape characters) kullanıp JavaScript kodunun kod gibi görünmesini sağlayabilirsiniz.

Prism eklentisini Wordpress için de kullanabiliyoruz. WordPress için Prism Syntax Highlighter for WordPress eklentisi mevcut. Wordpress’e bu eski eklentiyi ekleyip, üzerinde birkaç değişiklik yaparak güncel haline getirebiliyoruz. Statik sayfalara ekler gibi Wordpress’in tema dosyalarına da Prism dosyalarını ekleyerek manuel ekleme işlemi yapabilirsiniz. Böylece en güncel haliyle ve eklenti kullanmadan Prism’i web sitenize uygulamış olursunuz.