Ghost için "Syntax Highlighting"

Ghost markdown editörü code etiketi ile kod bloklarının gösterimini sağlasada developerların daha fazlasına ihtiyacı olduğu aşikâr.

Böyle durumlarda napılır? Tabi ki Google amca ile çözüm arayışına girilir ve bu blog yazısı bulunur. Bi hoşgeldiniz diyelim o zaman ;)

Çare Prism!

Çözüm olarak prism işimi fazlasıyla göreceğini düşünüp kurulama geçtim. Bir sürü alternatif var neden Prism derseniz? İçlerinden en basit ve hafif olanı buydu çünkü.

 // Belki burada mutlu bir html kodu vardır.
 <h1>Hey, Naber?</h1>

Prism Kurulumu

  1. http://prismjs.com/download.html sayfasına git
  2. Ayarlamalarını yap; Hangi dil seçeneklerini desteklesin, hangi temayı kullanacasın vs.
  3. Sayfayı en aşşağıya çek prism.js ve prism.css dosyalarını indirebilmek için gördüğün iki butona da bas.
  4. prism.js dosyasını ghost/content/themes/casper/assets/js klasörüne kopyala
  5. prism.css dosyasını ghost/content/themes/casper/assets/css klasörüne kopyala
  6. Son adım; ghost/default.hbs dosyasını aşağıdaki gibi güncelle.

Default.hbs Düzenlemesi

Sayfada css/screen.css adıyla arama yap ve hemen altına bu kodu yerleştir.

<link rel="stylesheet" type="text/css" href="{{asset "css/prism.css"}}" />  

ve sayfanın alt kısımında bulunan scriptlerin hemen altına da bu kodu yerleştir.

<script type="text/javascript" src="{{asset "js/prism.js"}}"></script>  

Prism Kullanımı

Herhangi bir yazınızı veya yeni bir yazıda bu kodu kullanın:

 ```language-markup
 <h1>Merhaba Dünya!</h1>
 ```

Dikkat: Kodu yapıştırdıktan sonra sol tarafında boşluk varsa silin, aksi halde çalışmayacaktır.

Ta daa!

 <h1>Merhaba Dünya!</h1>

Benim sıkça kullandığım sytanx kullanımları şunlar;

  • language-markup : HTML/XML için
  • language-javascript : Js/Json için
  • language-css : CSS için

Hepsi bukadar!

Bazı notlar:

  • Prism'in en kötü yanı admin panelindeki önizleme alanında eş zamanlı gösterim sağlayamıyorsunuz. Bu demek değildir ki hiç gösteremeyeceksiniz. O kısımı da düzenleyerek bunu sağlayabilirsiniz.
comments powered by Disqus