Markdown dosyanızı ve temiz bir önizlemeyi yan yana tutun. Yazmaya devam ettiğinizde panel kendiliğinden yenilenir; yenile düğmesine basmanız gerekmez. Önizleme teması VS Code temasından bağımsızdır, böylece koyu editörün yanında rahat bir açık okuma alanı kullanabilirsiniz.
30 saniyede kullanmaya başlayın
- VS Code'da bir
.md dosyası açın.
- Editörün sağ üstündeki önizleme simgesine tıklayın.
- Alternatif olarak
Ctrl+Alt+M (macOS: Cmd+Alt+M) kısayolunu kullanın.
- Yazmaya devam edin; açık önizleme otomatik güncellenir.
Kırmızıyla işaretlenen simge, önizlemeyi editörün yanında açar:
Komut Paleti'nde Markdown Viewer Pro yazarak önizleme ve HTML dışa aktarma komutlarının tamamına ulaşabilirsiniz.
Neden kullanışlı?
- Canlı önizleme: Değişiklikleri kısa bir gecikmeyle otomatik işler; paneli her tuşta yeniden oluşturmaz.
- Altı bağımsız tema: Kağıt, Sepya, Bulut, Nane, Gül ve Gece seçenekleri editör temasından bağımsız çalışır.
- İçindekiler paneli: Belgedeki başlıklardan otomatik olarak hızlı gezinme menüsü oluşturur.
- İmleç takibi: Editörde bulunduğunuz satır değiştiğinde önizlemeyi ilgili bölüme taşır.
- Kaynağa dönüş: Önizlemedeki bir bölüme
Alt+tıklama yaparak Markdown kaynağındaki satıra gidebilirsiniz.
- Hızlı arama: Önizlemenin tamamında sonuçlar arasında ileri ve geri gezinebilirsiniz.
- Etkileşimli görevler: Görev kutusuna önizlemeden tıkladığınızda kaynak Markdown da güncellenir.
- GFM desteği: Tablolar, görev listeleri, üstü çizili metin ve otomatik bağlantılar düzgün görüntülenir.
- Kod blokları: Sözdizimi renklendirmesi ve tek tıkla kopyalama düğmesi sunar.
- Metin tabanlı diyagramlar: ASCII ve Unicode akış/sekans çizimlerini okunabilir biçimde hizalar.
- Belge bilgisi: Kelime sayısını, başlık sayısını ve tahmini okuma süresini gösterir.
- Dışa aktarma: Belgeyi bağımsız HTML olarak kaydedebilir, yazdırabilir veya PDF oluşturabilirsiniz.
Temalar
Tema, önizlemenin üst çubuğundaki Tema menüsünden anında değiştirilebilir ve seçiminiz korunur.
| Tema |
En uygun kullanım |
| Kağıt |
Yüksek kontrastlı, temiz günlük okuma |
| Sepya |
Uzun belgelerde sıcak ve yumuşak görünüm |
| Bulut |
Serin, nötr ve açık gri çalışma alanı |
| Nane |
Yumuşak yeşil tonlu açık görünüm |
| Gül |
Yumuşak pembe tonlu açık görünüm |
| Gece |
Düşük ışıkta koyu lacivert görünüm |
Hızlı kontroller
| İşlem |
Kısayol / kontrol |
| Önizlemeyi yanda aç |
Ctrl+Alt+M / Cmd+Alt+M |
| Önizlemede aramayı aç |
/ |
| Sonraki arama sonucu |
Enter |
| Önceki arama sonucu |
Shift+Enter |
| Aramayı kapat |
Esc |
| Kaynak satıra dön |
Önizlemede Alt+tıklama |
| İçindekileri aç/kapat |
Üst çubuktaki ☰ |
| İmleç takibini aç/kapat |
Üst çubuktaki ↕ |
| HTML dışa aktar |
Üst çubuktaki ⇩ |
| Yazdır / PDF oluştur |
Üst çubuktaki yazdır simgesi |
Desteklenen Markdown
- Başlıklar, paragraflar, alıntılar ve yatay ayraçlar
- Sıralı/sırasız listeler ve etkileşimli görev listeleri
- GFM tabloları, otomatik bağlantılar ve üstü çizili metin
- Satır içi kod ve renklendirilmiş kod blokları
- Dipnotlar
- Yerel ve uzak görseller
- Güvenli bir ham HTML alt kümesi
- ASCII/Unicode akış ve sekans diyagramları
Özellikleri tek dosyada denemek için projedeki test.md belgesini açabilirsiniz.
Ayarlar
VS Code Ayarları'nda Markdown Viewer Pro araması yapın.
| Ayar |
Varsayılan |
Açıklama |
markdownViewerPro.syncScroll |
true |
Editör imlecini önizlemede takip eder. |
markdownViewerPro.showOutline |
true |
İçindekiler panelini başlangıçta gösterir. |
markdownViewerPro.maxContentWidth |
980 |
İçeriğin en büyük genişliğini belirler (560–1800 px). |
markdownViewerPro.fontSize |
16 |
Önizleme yazı boyutunu belirler (12–28 px). |
markdownViewerPro.wordsPerMinute |
220 |
Tahmini okuma süresinin hesaplama hızıdır. |
markdownViewerPro.theme |
paper |
Başlangıç önizleme temasını seçer. |
Kurulum
En kolay yol, Visual Studio Marketplace sayfasından Install düğmesine basmaktır.
Elinizde bir .vsix paketi varsa VS Code'da Extensions → … → Install from VSIX… yolunu kullanabilirsiniz.
Güvenlik
Markdown kaynaklı HTML doğrudan çalıştırılmaz. Üretilen çıktı izinli etiket ve özellik listesiyle temizlenir; Webview yalnızca paketlenmiş betikleri çalıştıran sıkı bir Content Security Policy kullanır. Yerel dosya erişimi belge klasörü ve açık çalışma alanlarıyla sınırlandırılır.
Standart Markdown görsel sözdizimindeki göreli yerel yollar desteklenir. Ham HTML içindeki göreli <img> yolları güvenlik ve öngörülebilirlik için yeniden yazılmaz.
Geliştirme
npm install
npm run check
npm test
npm run compile
Projeyi VS Code ile açıp F5 tuşuna basın. Açılan Extension Development Host penceresinde test.md dosyasını açın ve Ctrl+Alt+M kullanın.
Kurulabilir paket üretmek için:
npm run package
Proje yapısı
package.json: Komutları, menüleri, kısayolları ve kullanıcı ayarlarını tanımlar.src/extension.ts: Belge ve Webview yaşam döngüsünü yönetir.src/renderer.ts: Markdown'ı güvenli HTML'e dönüştürür.src/webview.ts: Arama, içindekiler, temalar ve panel etkileşimlerini yönetir.media/styles.css: Önizleme arayüzünü ve altı temayı tanımlar.
Lisans
MIT
