İçeriğe atla
~/sph.sh

Kapsamlı Markdown Tipografi Rehberi

Markdown'ın tüm tipografi ve formatlama öğeleri: başlıklardan tablolara, dipnotlardan tanım listelerine ve uyarı kutularına kadar.

Ayhan Sipahi Ayhan Sipahi

Markdown işlemcileri başlıklar, listeler ve kod bloklarında hemfikir. Bunun ötesinde destek dağılır: dipnotlar, tanım listeleri, katlanabilir bölümler ve uyarı kutuları render motoruna göre farklı davranır. Aşağıdaki bölümler her özelliği kaynak sözdizimiyle birlikte gösterir; bir özelliğe güvenmeden önce kendi render motorunuzda çalışıp çalışmadığını görebilirsiniz.

Başlıklar#

Başlık 1 Stili (H1 = Yazı Başlığı)#

Başlık 2 (H2)#

Başlık 3 (H3)#

Başlık 4 (H4)#

Başlık 5 (H5)
Başlık 6 (H6)

Metin Formatlaması#

Temel Formatlama#

Kalın metin önemli bilgileri öne çıkarır. İtalik metin belirli kelimelere vurgu ekler. Kalın ve italik iki stili birlikte kullanır. Üstü çizili metin silinmiş veya kullanımdan kaldırılmış içeriği gösterir.

Satır İçi Kod#

Kısa kod parçaları, dosya adları veya teknik terimler için satır içi kod kullanın.

Vurgu Seviyeleri#

Hafif vurgu yan notlar için. Güçlü vurgu önemli noktalar için. Çok güçlü vurgu kritik bilgiler için.

Listeler#

Sırasız Listeler#

  • Basit madde işareti
  • Başka bir öğe
    • İç içe madde işareti
    • Başka bir iç içe öğe
      • Derin iç içe öğe
  • Ana seviyeye geri dönüş

Sıralı Listeler#

  1. İlk öğe
  2. İkinci öğe
  3. Üçüncü öğe
    1. İç içe sıralı öğe
    2. Başka bir iç içe öğe
  4. Ana seviyeye geri dönüş

Karışık Listeler#

  1. Sıralı öğe
    • Sırasız alt öğe
    • Başka bir alt öğe
  2. Başka bir sıralı öğe
    • Daha fazla alt öğe
      • Derin iç içe
      • Başka bir derin öğe

Görev Listeleri#

  • Tamamlanmış görev
  • Bekleyen görev
  • Başka bir tamamlanmış görev
  • Başka bir bekleyen görev

Bağlantılar ve Referanslar#

Temel Bağlantılar#

Bağlantı metni (yeni sekmede açılır)

Başlıklı Bağlantılar#

Başlıklı bağlantı (yeni sekmede açılır)

Referans Bağlantıları#

Referans bağlantısı (yeni sekmede açılır)

Otomatik Bağlantılar#

https://example.com (yeni sekmede açılır)

E-posta Bağlantıları#

user@example.com

Görseller#

Temel Görseller#

Alt metin

Referans Görselleri#

Alt metin

Yerel Görseller#

Yerel örnek görsel

Kod Blokları#

Üç Tırnaklı Kod Blokları#

function greet(name) {
  console.log('Hello, ' + name + '!');
  return 'Welcome, ' + name;
}

const result = greet('World');
console.log(result);
function fibonacci(n: number): number {
    if (n <= 1) {
        return n;
    }
    return fibonacci(n - 1) + fibonacci(n - 2);
}

// İlk 10 Fibonacci sayısını hesapla
for (let i = 0; i < 10; i++) {
    console.log(`F(${i}) = ${fibonacci(i)}`);
}
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.button {
  background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
  border: none;
  border-radius: 8px;
  padding: 12px 24px;
  color: white;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.button:hover {
  transform: translateY(-2px);
}

Girintili Kod Blokları#

Bu girintili bir kod bloğudur
Formatlamayı korur
Ve monospace font kullanır

Sözdizimi Vurgulama#

#!/bin/bash
echo "Hello, World!"
ls -la
cd /path/to/directory
{
  "name": "example-project",
  "version": "1.0.0",
  "description": "A sample project",
  "main": "index.js",
  "scripts": {
    "start": "node index.js",
    "test": "jest"
  },
  "dependencies": {
    "express": "^4.17.1"
  }
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Example Page</title>
</head>
<body>
    <h1>Hello, World!</h1>
    <p>This is a sample HTML document.</p>
</body>
</html>

Alıntı Blokları#

Basit Alıntı Blokları#

Bu basit bir alıntı bloğudur. Birden fazla satıra yayılabilir.

İç İçe Alıntı Blokları#

Birinci seviye alıntı

İkinci seviye alıntı

Üçüncü seviye alıntı İkinci seviyeye geri dönüş Birinci seviyeye geri dönüş

Diğer Öğelerle Alıntı Blokları#

Not: Bu alıntı bloğu formatlanmış metin içerir.

  • Listeler içerebilir
  • Ve diğer markdown öğeleri
// Hatta kod blokları
console.log('Alıntı bloğundan merhaba');

Tablolar#

Temel Tablo#

İsimYaşMeslek
Ahmet25Geliştirici
Ayşe30Tasarımcı
Mehmet35Yönetici

Hizalanmış Tablo#

Sola HizalanmışOrtaya HizalanmışSağa Hizalanmış
İçerikİçerikİçerik
Daha fazla içerikDaha fazla içerikDaha fazla içerik

Karmaşık Tablo#

ÖzellikMarkdownHTMLNotlar
Kalın**metin**<strong>metin</strong>Güçlü vurgu
İtalik*metin*<em>metin</em>Vurgu
Kod`kod`<code>kod</code>Satır içi kod
Bağlantı[metin](url)<a href="url">metin</a>Hiperbağlantılar

Yatay Çizgiler#

Karakter Kaçışı#

Özel Karakterler#

*Bu italik değil* `Bu kod değil` [Bu bağlantı değil] # Bu başlık değil

Ters Eğik Çizgiler#

\italik *italik* olur

Dipnotlar#

Bu cümle bir dipnot içerir1.

Tanım Listeleri#

Terim 1
Tanım 1
Terim 2
Tanım 2
Terim 2 için başka bir tanım

Gelişmiş Özellikler#

Katlanabilir Bölümler#

Genişletmek için tıklayın

Bu içerik varsayılan olarak gizlidir; özet satırına tıklayınca açılır.

  • Herhangi bir markdown içeriği içerebilir
  • Listeler dahil
  • Ve formatlanmış metin

Uyarılar#

Note

Bu önemli bilgi içeren bir not bloğudur.

Warning

Bu kritik bilgi için bir uyarı bloğudur.

Tip

Bu yardımcı öneriler içeren bir ipucu bloğudur.

Öneriler#

Tipografi Prensipleri#

  1. Hiyerarşi: Net içerik yapısı oluşturmak için başlıkları kullanın
  2. Tutarlılık: Metnin tamamında aynı formatlama kurallarını uygulayın
  3. Okunabilirlik: Rahat okuma için yazı tipi ve satır aralığı seçin
  4. Erişilebilirlik: İçeriğin ekran okuyucuyla ve klavyeyle kullanılabildiğini doğrulayın

Markdown Yönergeleri#

  • Görsel formatlamadan ziyade anlamsal işaretleme kullanın
  • Satır uzunluğunu makul tutun (80-120 karakter)
  • Açıklayıcı bağlantı metni kullanın
  • Görseller için alt metin dahil edin
  • Markdown’ı farklı render motorlarında test edin

Sonuç#

Başlıklar, listeler, bağlantılar, tablolar ve kod blokları kayda değer her işlemcide çalışır. Dipnotlar, tanım listeleri ve uyarı kutuları ise bir eklenti ya da bunları hazır sunan bir render motoru ister; onlara güvenmeden önce hedef ortamda doğrulayın.

Markdown Rehberi (yeni sekmede açılır), genişletilmiş sözdiziminin hangi işlemcide desteklendiğini listeler.

Kaynaklar#

Footnotes#

  1. Bu dipnot içeriğidir. ↩

İlgili yazılar

Mermaid Diyagram Tipleri: Her Grafik Türü için Örnekler

Her Mermaid diyagram tipi için kopyalanmaya hazır örnek: akış şemaları, sıralı ve sınıf diyagramları, ER modelleri, Gantt grafikleri ve daha fazlası

documentation · tutorial

İletişim, Bir Sonraki Mühendislik Seviyenizin Kapısıdır

Teknik işiniz sağlam ama seviyeniz yerinde sayıyorsa ölçülen şey iletişimdir: somut olarak ne demek olduğu, basamakların onu neden şart koştuğu, nereden başlanacağı.

career · leadership · documentation +4

Ajan Planınız Tasarım Dokümanınızdan Uzun Olmalı

Planın işi, ajanın aksi halde sessizce vereceği kararları önceden vermek. Bu işi yapan doküman iskeleti, yayınlanmış tek bir değişiklik üzerinden adım adım.

claude-code · ai-agents · documentation +2

Mühendislik Ekibi Dokümantasyonu: Çalışma Anlaşmaları, Definition of Done ve Nöbet Belgeleri

Olgun bir mühendislik ekibinin sahiplendiği belgelere bir rehber: onboarding, takım anlaşmaları, Definition of Done, nöbet, bilgi aktarımı ve her birini iyi yapan şey.

engineering-culture · hiring · documentation +4

Amazon Bedrock Knowledge Bases Rehberi: Veri Kaynakları ve Vektör Depoları

Bedrock Knowledge Base aslında nedir, hangi veri kaynakları ve vektör depoları birinci sınıf desteklenir ve konsol varsayılanı küçük bir korpusa neden nadiren uyar.

aws · aws-bedrock · rag +3