MDX Blog Tipografi ve Stil Rehberi
MDX blog yazılarında kullanılan tipografi ve stil öğelerinin kapsamlı gösterimi. Başlıklar, listeler, kod blokları ve daha fazlası.
Bu rehber, modern markdown işlemcilerinde mevcut olan tüm markdown tipografi özelliklerini ve formatlama seçeneklerini gösterir.
Başlıklar#
Başlık 1 (H1)#
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 her iki stili maksimum etki için birleştirir.
Ü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 ince 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#
- İlk öğe
- İkinci öğe
- Üçüncü öğe
- İç içe sıralı öğe
- Başka bir iç içe öğe
- Ana seviyeye geri dönüş
Karışık Listeler#
- Sıralı öğe
- Sırasız alt öğe
- Başka bir alt öğe
- Başka bir sıralı öğe
- Daha fazla alt öğe
- Derin iç içe
- Başka bir derin öğe
- Daha fazla alt öğ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şlıklı Bağlantılar#
Referans Bağlantıları#
Otomatik Bağlantılar#
E-posta Bağlantıları#
Görseller#
Temel Görseller#
Referans Görselleri#
Yerel Görseller#

Kod Blokları#
Çitli Kod Blokları#
function greet(name) {
console.log('Hello, ' + name + '!');
return 'Welcome, ' + name;
}
const result = greet('World');
console.log(result);
def fibonacci(n):
if n <= 1:
return n
return fibonacci(n-1) + fibonacci(n-2)
# İlk 10 Fibonacci sayısını hesapla
for i in range(10):
print("F(" + str(i) + ") = " + str(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 Vurgulaması#
#!/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ı#
Önemli 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#
İsim | Yaş | Meslek |
---|---|---|
Ahmet | 25 | Geliştirici |
Ayşe | 30 | Tasarımcı |
Mehmet | 35 | Yönetici |
Hizalanmış Tablo#
Sola Hizalanmış | Ortaya Hizalanmış | Sağa Hizalanmış |
---|---|---|
İçerik | İçerik | İçerik |
Daha fazla içerik | Daha fazla içerik | Daha fazla içerik |
Karmaşık Tablo#
Özellik | Markdown | HTML | Notlar |
---|---|---|---|
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çırma#
Ö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
Matematiksel İfadeler#
Satır İçi Matematik#
İkinci dereceden formül:
Blok Matematik#
Bu matematiksel ifade Gauss integrali olarak bilinir ve normal dağılımın temelini oluşturur.
Daha karmaşık bir örnek:
\begin{align} \nabla \cdot \vec{E} &= \frac{\rho}{\epsilon_0} \\ \nabla \cdot \vec{B} &= 0 \\ \nabla \times \vec{E} &= -\frac{\partial \vec{B}}{\partial t} \\ \nabla \times \vec{B} &= \mu_0\vec{J} + \mu_0\epsilon_0\frac{\partial \vec{E}}{\partial t} \end{align}
Bunlar Maxwell denklemleridir ve elektromanyetizmanın temelini oluşturur.
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 ve özet'e tıklayarak genişletilebilir.
- Herhangi bir markdown içeriği içerebilir
- Listeler dahil
- Ve formatlanmış metin
Uyarılar#
Not: Bu önemli bilgi içeren bir not bloğudur.
Uyarı: Bu kritik bilgi için bir uyarı bloğudur.
İpucu: Bu yardımcı öneriler içeren bir ipucu bloğudur.
En İyi Uygulamalar#
Tipografi Prensipleri#
- Hiyerarşi: Net içerik yapısı oluşturmak için başlıkları kullanın
- Tutarlılık: Boyunca tutarlı formatlama sürdürün
- Okunabilirlik: Optimal okuma için font ve boşluk seçin
- Erişilebilirlik: İçeriğin tüm kullanıcılar için erişilebilir olduğundan emin olun
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'ınızı farklı render'larda test edin
Sonuç#
Bu kapsamlı rehber tüm büyük markdown tipografi özelliklerini kapsar. Tüm markdown işlemcilerinin her özelliği desteklemediğini unutmayın, bu yüzden içeriğinizi her zaman hedef ortamınızda test edin.
Daha fazla bilgi için Markdown Rehberi'ni ziyaret edin.
Footnotes#
-
Bu dipnot içeriğidir. ↩
Yorumlar (0)
Sohbete katıl
Düşüncelerini paylaşmak ve toplulukla etkileşim kurmak için giriş yap
Henüz yorum yok
Bu yazı hakkında ilk düşüncelerini paylaşan sen ol!
Yorumlar (0)
Sohbete katıl
Düşüncelerini paylaşmak ve toplulukla etkileşim kurmak için giriş yap
Henüz yorum yok
Bu yazı hakkında ilk düşüncelerini paylaşan sen ol!