kod

Ghost CMS'de Kod Blokları (Code Snippets) Kullanımı ve Syntax Highlighting Rehberi

Yazılım geliştirme, sistem yönetimi veya DevOps konularında içerik üretiyorsanız, kod bloklarını okunabilir şekilde paylaşmak oldukça önemlidir.

Photo by Branko Stancevic / Unsplash

Yazılım geliştirme, sistem yönetimi veya DevOps konularında içerik üretiyorsanız, kod bloklarını okunabilir şekilde paylaşmak oldukça önemlidir. Düz metin olarak eklenen kodlar; girintilerini, renklerini ve okunabilirliğini kaybettiğinden ziyaretçiler için anlaşılması zor hale gelir.

Ghost CMS, yerleşik Code Block (Kod Bloğu) desteği sayesinde birçok programlama dilini destekler. Ayrıca Prism.js gibi popüler syntax highlighting kütüphaneleri ile kodların renklendirilmesi ve daha profesyonel görünmesi sağlanabilir.

Bu makalede Ghost CMS üzerinde kod bloklarının nasıl oluşturulacağını, Prism.js ile renklendirme yapılacağını ve en iyi kullanım yöntemlerini inceleyeceğiz.

Ghost'ta Code Snippet Nedir?

Code Snippet, bir programlama diline ait kodların biçimlendirilmiş şekilde gösterilmesini sağlayan özel içerik bloklarıdır.

Örneğin aşağıdaki kod:

function hello() {
    console.log("Merhaba Dünya");
}

Normal metin olarak eklendiğinde okunması zor olabilir.

Ancak Code Block olarak eklendiğinde;

satır yapısı korunur,
boşluklar bozulmaz,
programlama dili algılanabilir,
renklendirme uygulanabilir,
okunabilirlik büyük ölçüde artar.

Ghost'ta Kod Bloğu Oluşturma

Ghost editörü Markdown tabanlı çalışır.

Bir kod bloğu oluşturmak için üç adet ters tırnak (```) yazılır ve hemen ardından programlama dili belirtilir.

Örneğin:

```javascript
console.log("Merhaba");
```

Ghost bunu otomatik olarak Code Block'a dönüştürür.

Ayrıca kod bloğu oluşturulduktan sonra sağ üst köşedeki dil alanından da programlama dili değiştirilebilir.

Desteklenen Diller

Ghost onlarca dili destekler.

En sık kullanılanlar:

HTML
CSS
JavaScript
TypeScript
PHP
Python
Bash
Shell
JSON
YAML
SQL
XML
Java
C
C++
C#
Go
Rust
Kotlin
Swift

Syntax Highlighting Nedir?

Syntax Highlighting (Sözdizimi Renklendirme), kodun anlamına göre farklı renklerde gösterilmesidir.

Örneğin;

Anahtar kelimeler mavi,
String ifadeler yeşil,
Fonksiyonlar sarı,
Yorum satırları gri,

gibi farklı renklerle gösterilir.

Bu sayede;

hata bulmak kolaylaşır,
kod daha profesyonel görünür,
ziyaretçi deneyimi artar.

Prism.js Nedir?

Ghost'un resmi dokümantasyonu, syntax highlighting için Prism.js kütüphanesini önermektedir.

Prism;

hafif,
hızlı,
ücretsiz,
açık kaynaklı

bir syntax highlighting kütüphanesidir.

Desteklediği dil sayısı oldukça fazladır.

Prism.js Kurulumu

Ghost içerisinde tema dosyalarını değiştirmeden Prism kullanmanın en kolay yolu Code Injection özelliğidir.

Ghost Admin Panelinden;

Settings
    ↓
Code Injection

bölümüne girin.

Site Header Alanına JavaScript Dosyaları

Aşağıdaki kod eklenir:

<script src="https://cdn.jsdelivr.net/npm/prismjs/prism.min.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/prismjs/plugins/autoloader/prism-autoloader.min.js" defer></script>

Autoloader eklentisi sayesinde yalnızca kullanılan programlama dillerinin bileşenleri yüklenir ve gereksiz dosyalar indirilmez.

CSS Temasının Eklenmesi

Ardından yine Site Header bölümüne istediğiniz Prism teması eklenir.

Varsayılan tema:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs/themes/prism.min.css">

Farklı temalar da kullanılabilir.

Örneğin:

prism-dark
prism-okaidia
prism-tomorrow
prism-twilight
prism-coy
prism-funky

Tema seçimi yalnızca CSS dosyasının adını değiştirerek yapılabilir.

Sonuç

Kaydettikten sonra Ghost içerisindeki tüm Code Block'lar otomatik olarak renklendirilecektir.

Örneğin;

const user = "Çağdaş";

function hello() {
    console.log(user);
}

hello();

artık programlama editörlerinde olduğu gibi renkli şekilde görüntülenir.

Code Injection Nedir?

Ghost'un en güçlü özelliklerinden biri Code Injection sistemidir.

Bu özellik sayesinde;

CSS
JavaScript
Meta etiketleri
Google Analytics
Google Fonts
Reklam kodları
Özel scriptler

tema dosyalarını değiştirmeden eklenebilir. Kodlar Site Header (HTML <head> bölümü) veya Site Footer (kapanış </body> etiketi öncesi) alanlarına yerleştirilir ve tüm sayfalarda uygulanır. Ayrıca istenirse tek bir yazı veya sayfa için de Post Code Injection kullanılabilir.

İpuçları

Kod bloğu oluştururken her zaman doğru programlama dilini seçin.
Uzun kod örneklerini küçük parçalara ayırarak paylaşın.
Açık veya koyu Prism teması seçerken sitenizin genel tasarımıyla uyumlu olmasına dikkat edin.
JavaScript kodlarını mümkün olduğunca Site Footer bölümüne ekleyerek sayfa yüklenmesini olumsuz etkilemeyin. CSS ve meta etiketleri ise Site Header bölümünde yer almalıdır.

Ghost CMS, yerleşik Code Block desteği sayesinde teknik içerik üreten geliştiriciler ve sistem yöneticileri için oldukça güçlü bir editör sunar. Prism.js ile birlikte kullanıldığında kod örnekleri profesyonel bir görünüm kazanır ve ziyaretçilerin okunabilirliği önemli ölçüde artar. Üstelik Code Injection özelliği sayesinde tema dosyalarını değiştirmeden CSS, JavaScript ve diğer kod parçalarını kolayca eklemek mümkündür. Bu yaklaşım, hem bakım kolaylığı sağlar hem de tema güncellemelerinde yapılan özelleştirmelerin korunmasına yardımcı olur.