Javascript İle Dinamik Bir Etkileşimli Markdown Önizleyici Nasıl Yapılır?

Giriş: Modern Web Geliştirmede Markdown Önizleyici

Günümüzde içerik yönetim sistemlerinden dokümantasyon araçlarına kadar pek çok platformda, kullanıcıların metinleri biçimlendirmesi için Markdown dili standart haline gelmiştir. JavaScript ile dinamik bir etkileşimli Markdown önizleyici yapmak, hem kullanıcı deneyimini iyileştiren hem de DOM (Document Object Model) manipülasyonu konusunda yetkinlik kazandıran temel bir projedir. Bu rehberde, modern JavaScript sözdizimini kullanarak, yazdığınız metni anlık olarak HTML formatına dönüştüren bir arayüz oluşturmayı öğreneceksiniz.

Bu eğitim, özellikle ön uç (frontend) geliştirme süreçlerini öğrenmek isteyen, JavaScript ile gerçek zamanlı veri işleme mantığını kavramak isteyen geliştiriciler için hazırlanmıştır. Projemizde, metin girişini yakalayacak, bunu bir dönüştürücü kütüphane ile işleyecek ve sonucu sayfada güvenli bir şekilde görüntüleyeceğiz. Adım adım ilerleyerek, performanslı ve güvenli bir önizleyici mimarisi kuracağız.

Gereksinimler ve Ön Hazırlık

Bu projeyi hayata geçirmek için modern bir tarayıcı (Chrome, Firefox veya Edge) ve temel düzeyde HTML/CSS bilgisine sahip olmanız yeterlidir. JavaScript tarafında ise "marked" kütüphanesini kullanarak Markdown'dan HTML'e dönüşümü gerçekleştireceğiz. Bu kütüphane, 2026 yılı standartlarında en güvenilir ve hızlı çözümlerden biridir.

Geliştirme ortamınızda bir klasör oluşturun ve içine şu dosyaları ekleyin:

• index.html: Arayüz yapısı.
• style.css: Görsel düzenlemeler.
• script.js: Mantıksal işlemler.

Kütüphaneyi projeye dahil etmek için CDN (İçerik Dağıtım Ağı) kullanacağız. Bu sayede yerel bir kurulum yapmadan doğrudan tarayıcı üzerinden çalışabilirsiniz.

Adım 1: HTML Arayüzünü Oluşturma

Öncelikle kullanıcıdan girdi alacağımız bir textarea ve çıktıyı göstereceğimiz bir div yapısına ihtiyacımız var. Bu yapı, etkileşimli önizleyicimizin temel iskeletini oluşturur.

Burada editor kimlikli (id) alan, kullanıcının yazacağı yerdir. preview alanı ise JavaScript ile işlenen verinin HTML olarak yansıtılacağı yerdir.

Adım 2: JavaScript ile Dinamik Dönüşüm Mantığı

Şimdi, kullanıcının yazdığı her karakteri dinleyen bir "event listener" (olay dinleyici) kuracağız. input olayı, metin kutusundaki her değişiklikte tetiklenir ve anlık güncelleme sağlar.

const editor = document.getElementById('editor');
const preview = document.getElementById('preview');

editor.addEventListener('input', () => {
  const markdownText = editor.value;
  // marked kütüphanesi ile metni HTML'e çeviriyoruz
  preview.innerHTML = marked.parse(markdownText);
});

Bu kod bloğu, editor üzerindeki her değişikliği yakalar ve marked.parse() fonksiyonu ile Markdown metnini HTML etiketlerine dönüştürerek preview içerisine aktarır.

Adım 3: Güvenlik ve XSS Koruması

Kullanıcıdan alınan veriyi doğrudan innerHTML ile sayfaya basmak, Cross-Site Scripting (XSS) saldırılarına kapı aralayabilir. Kullanıcı, Markdown içine zararlı bir JavaScript kodu (örneğin

Kritik Güvenlik Uyarısı: Kullanıcı girdilerini doğrudan işlemek tehlikelidir. DOMpurify gibi bir kütüphane kullanarak HTML içeriğini temizlemeniz zorunludur. Üretim ortamında (production) asla temizlenmemiş veriyi doğrudan sayfaya aktarmayın.

DOMpurify ile güvenli hale getirme örneği:

// DOMpurify kütüphanesi ile içeriği temizleme
const rawHtml = marked.parse(markdownText);
const cleanHtml = DOMPurify.sanitize(rawHtml);
preview.innerHTML = cleanHtml;

Bu işlem, zararlı scriptleri ve tehlikeli HTML özniteliklerini (attributes) temizleyerek uygulamanızı güvenli kılar.

Adım 4: Performans İyileştirmeleri ve Debounce

Kullanıcı her tuşa bastığında dönüşüm işleminin tetiklenmesi, büyük metinlerde performans sorunlarına yol açabilir. Bunun önüne geçmek için "debounce" (gecikmeli tetikleme) yöntemi kullanılır.

function debounce(func, delay) {
  let timeout;
  return (...args) => {
    clearTimeout(timeout);
    timeout = setTimeout(() => func.apply(this, args), delay);
  };
}

const updatePreview = debounce(() => {
  preview.innerHTML = DOMPurify.sanitize(marked.parse(editor.value));
}, 300);

editor.addEventListener('input', updatePreview);

Bu yapı, kullanıcı yazmayı bıraktıktan 300 milisaniye sonra dönüşüm işlemini başlatır. Bu, gereksiz işlemci yükünü azaltır.

Adım 5: Karşılaştırmalı Yöntemler

Markdown önizleyici geliştirirken tercih edebileceğiniz farklı kütüphane ve yöntemlerin karşılaştırması aşağıdadır:

Sıkça Sorulan Sorular

Markdown önizleyici neden anlık çalışmıyor?

Kütüphanelerin (marked ve DOMpurify) HTML dosyanızın kısmında doğru yüklendiğinden ve script dosyanızın DOM yüklendikten sonra çalıştığından emin olun.

XSS saldırısı tam olarak nedir?

Kullanıcının kötü niyetli script kodlarını Markdown alanına yazıp, bu kodların diğer kullanıcıların tarayıcısında çalıştırılmasıdır. DOMpurify bu kodları etkisiz hale getirir.

Debounce neden gereklidir?

Her karakterde DOM güncellemesi yapmak tarayıcıyı yorar. Debounce, işlemi belirli aralıklarla gruplayarak daha akıcı bir kullanıcı deneyimi sunar.

Mobil cihazlarda nasıl görünür?

CSS'te flex-direction: column; kullanarak mobil ekranlarda editör ve önizleme alanını alt alta gelecek şekilde düzenleyebilirsiniz.

Markdown'a özel karakter ekleyebilir miyim?

Evet, marked kütüphanesinin konfigürasyon ayarları ile özel sözdizimleri veya eklentiler tanımlayabilirsiniz.

Yasal Sorumluluk Reddi: Bu rehberdeki kodlar eğitim amaçlıdır. Ticari projelerinizde güvenlik katmanlarını (XSS, içerik güvenlik politikaları - CSP) profesyonel bir güvenlik uzmanı ile gözden geçirmeniz önerilir.

İleri Düzey Özelleştirme: Markdown İçeriğini PDF Olarak Dışa Aktarma

Kullanıcılarınızın oluşturduğu Markdown içeriklerini kalıcı hale getirmek için en etkili yöntemlerden biri, bu içeriği PDF formatına dönüştürmektir. Tarayıcı tarafında bu işlemi gerçekleştirmek için jsPDF ve html2canvas kütüphaneleri oldukça popülerdir. Aşağıdaki örnek, önizleme alanındaki HTML içeriğini alıp PDF dosyası olarak indiren temel bir akışı göstermektedir.

// PDF indirme fonksiyonu
async function exportToPDF() {
    const { jsPDF } = window.jspdf;
    const element = document.getElementById('preview-area');
    
    const canvas = await html2canvas(element);
    const imgData = canvas.toDataURL('image/png');
    
    const pdf = new jsPDF();
    const imgProps = pdf.getImageProperties(imgData);
    const pdfWidth = pdf.internal.pageSize.getWidth();
    const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;
    
    pdf.addImage(imgData, 'PNG', 0, 0, pdfWidth, pdfHeight);
    pdf.save("markdown-icerigi.pdf");
}

// Butona tıklama olayı
document.getElementById('download-btn').addEventListener('click', exportToPDF);

Uygulama Performansını İzleme ve Hata Ayıklama

Dinamik önizleyicilerde, özellikle uzun metinlerde marked.js veya benzeri kütüphanelerin her tuş vuruşunda çalışması tarayıcıyı yorabilir. Performans darboğazlarını tespit etmek için tarayıcının geliştirici araçlarındaki "Performance" sekmesini kullanmalısınız. Ayrıca, kodunuzdaki olası hataları yakalamak için try-catch bloklarını merkezi bir hata yönetim sistemine bağlamak projenizin kararlılığını artırır.

Hata Yakalama Stratejisi

Kullanıcıya hata mesajlarını anlamlı bir şekilde sunmak, kullanıcı deneyimini iyileştirir. Aşağıdaki yapı, Markdown işleme sürecindeki hataları yakalamak için kullanılabilir:

function updatePreview(markdownText) {
    try {
        const html = marked.parse(markdownText);
        // DOM güncelleme işlemi
        document.getElementById('preview-area').innerHTML = DOMPurify.sanitize(html);
    } catch (error) {
        console.error("Markdown dönüşüm hatası:", error);
        document.getElementById('preview-area').innerHTML = 
            "
İçerik işlenirken bir hata oluştu.
";
    }
}

Dağıtım (Deployment) Öncesi Kontrol Listesi

Projenizi canlıya almadan önce aşağıdaki teknik kontrolleri tamamladığınızdan emin olun:

• CSP (Content Security Policy): Tarayıcınızın hangi kaynaklardan script yükleyebileceğini kısıtlayan bir CSP başlığı tanımlayın.
• Asset Optimizasyonu: Kullanılan kütüphanelerin (marked, DOMPurify) küçültülmüş (minified) sürümlerini kullanın.
• Tarayıcı Uyumluluğu: Modern JavaScript özelliklerinin (ES6+) eski tarayıcılarda çalışması için Babel gibi araçlarla transpile edildiğinden emin olun.
• Mobil Duyarlılık: preview-area elemanının overflow-wrap: break-word özelliğine sahip olduğunu ve uzun kod bloklarının ekranı taşırmadığını test edin.

Sonuç

Bu rehberde, JavaScript ile modern ve güvenli bir Markdown önizleyicinin nasıl inşa edileceğini öğrendiniz. DOM manipülasyonu, olay yönetimi ve güvenlik odaklı geliştirme pratikleri ile projenizi tamamladınız. Bir sonraki adım olarak, oluşturduğunuz içeriği localStorage kullanarak tarayıcıda kaydetmeyi veya kullanıcıya "PDF olarak indir" seçeneği eklemeyi deneyebilirsiniz. Yazılım geliştirme sürecinde, her zaman güvenliği ön planda tutan temiz kod yazmaya özen gösterin.