Test yayını

```html

Teknik yazılarda kod örneklerinin okunabilir olması, kopyalanabilmesi ve mobil cihazlarda bozulmadan görüntülenmesi önemlidir. ENFO'nun yeni kod bloğu tasarımı bu deneyimi iyileştirmek için hazırlandı.

Kod blokları nasıl çalışır?

Her kod bloğunun üst kısmında programlama dili ve kopyalama düğmesi bulunur. Kopyalama düğmesine bastığında yalnızca kod içeriği panoya alınır.

1. HTML kod örneği

Basit bir HTML kart bileşeni oluşturalım:

<article class="enfo-card">
  <h2>ENFO Teknoloji</h2>
  <p>Bilgi, teknoloji ve mühendislik.</p>
  <a href="/search/label/Teknoloji">
    Yazıları incele
  </a>
</article>

2. CSS kod örneği

Şimdi kartın görünümünü düzenleyelim:

.enfo-card {
  padding: 24px;
  border: 1px solid #e4e4e7;
  border-radius: 16px;
  background: #ffffff;
  color: #18181b;
  transition: transform 180ms ease;
}

.enfo-card:hover {
  transform: translateY(-3px);
}

3. JavaScript kod örneği

Bir butona tıklama davranışı ekleyelim:

const button = document.querySelector(".enfo-button");

button.addEventListener("click", () => {
  console.log("ENFO: İşlem başarıyla tamamlandı.");
});

4. Uzun kod satırı testi

Özellikle mobil cihazlarda uzun kod satırlarının kendi alanında yatay kaydırılabilmesi gerekir. Aşağıdaki örnek bu davranışı test eder. 

docker run --rm --name enfo-demo-app -p 8080:8080 -e NODE_ENV=production -e APP_BASE_URL=https://enfo.tr -e ENABLE_CACHE=true -e LOG_LEVEL=info ghcr.io/example/enfo-demo:latest

Sonuç

Kod blokları; okunabilirlik, kolay kopyalama ve mobil uyumluluk bakımından teknik içeriklerin önemli parçalarından biridir. ENFO'da amaç, kod örneklerini hem sade hem de kullanışlı bir arayüzle sunmaktır.

```