İçeriğe atla
~/sph.sh

2025-09-04

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

  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

Başlıklı Bağlantılar

Başlıklı bağlantı

Referans Bağlantıları

Referans bağlantısı

Otomatik Bağlantılar

https://example.com

E-posta Bağlantıları

[email protected]

Görseller

Temel Görseller

Alt metin

Referans Görselleri

Alt metin

Yerel Görseller

Yerel örnek görsel

Kod Blokları

Çitli 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 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ı

Note: 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çı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: ax2+bx+c=0ax^2 + bx + c = 0

Blok Matematik

∫−∞∞e−x2dx=π\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}

Bu matematiksel ifade Gauss integrali olarak bilinir ve normal dağılımın temelini oluşturur.

Daha karmaşık bir örnek:

∇⋅E⃗=ρϵ0∇⋅B⃗=0∇×E⃗=−∂B⃗∂t∇×B⃗=μ0J⃗+μ0ϵ0∂E⃗∂t\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

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.

En İyi Uygulamalar

Tipografi Prensipleri

  1. Hiyerarşi: Net içerik yapısı oluşturmak için başlıkları kullanın
  2. Tutarlılık: Boyunca tutarlı formatlama sürdürün
  3. Okunabilirlik: Optimal okuma için font ve boşluk seçin
  4. 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

  1. Bu dipnot içeriğidir. ↩

İlgili yazılar

React Native Expo ile Sentry Entegrasyonu: Pratik Hızlı Rehber

React Native Expo uygulamasına Sentry hata izleme entegrasyonu için adım adım rehber. SDK başlatma, Expo Router enstrümantasyonu, session replay, EAS Build ve EAS Update için source map yükleme ve sık karşılaşılan sorunları kapsar.

react-nativeexpomonitoring+2
TypeScript AI SDK Karşılaştırması: Agent Geliştirme için Vercel AI SDK vs OpenAI Agents SDK

AI agent geliştirmek için TypeScript SDK'larının pratik karşılaştırması - Vercel AI SDK, OpenAI Agents SDK ve AWS Bedrock entegrasyonu. Kod örnekleri, karar frameworkleri ve production patternleri içeriyor.

typescriptai-toolsserverless+4
TypeScript Formatlama ve Linting Araçları Karşılaştırması: Biome, Oxlint, ESLint ve Prettier

Modern TypeScript linting ve formatlama araçlarının kapsamlı karşılaştırması - ESLint, Prettier, Biome ve Oxlint - performans ölçümleri, konfigürasyon örnekleri ve migration stratejileriyle.

typescripteslintprettier+7
Effect Öğrenmek: TypeScript Geliştiricileri için Pratik Bir Rehber

Effect'i anlamak, adım adım öğrenmek ve AWS Lambda ile entegre etmek için kapsamlı bir rehber. Gerçek kod örnekleri, yaygın hatalar ve üretim kullanımından pratik desenler içerir.

typescripteffectaws-lambda+5
AWS Secrets Manager & Parameter Store: Güvenlik Best Practices

AWS Secrets Manager ve Systems Manager Parameter Store'u karşılaştıran kapsamlı teknik rehber - hangi servisi ne zaman kullanmalı ve gerçek dünya implementation pattern'leri.

awssecrets-managerparameter-store+8