Kıdemli bir ön uç geliştirici olarak, içerikteki tüm kod parçacıklarını vurgulanmış resimlere dönüştürmeniz gerekiyor. Tüm kod parçacıklarını ayıklamak çok önemli! Markdown'ın ters tırnak işaretleri (``) sözdizimiyle tamamen çevrili kodun tek bir parçacık olarak ele alınması gerektiğini unutmayın. Özellikle JSX koduna dikkat edin. Vurgulama için JS sözdizimini JSX sözdizimi olarak ele alın.

Renk şeması: Ana arka plan rengi olarak koyu gri kullanılmıştır ve kod blokları koyu bir arka plana sahip olup, kod vurguları renkli (camgöbeği ve parlak yeşil ana vurgu renkleridir) olarak tasarlanmıştır.

Düzen: Kod blokları bir terminal/kod düzenleyicisinin görünümünü simüle eder, ancak kod düzenleyicisinin üst kısmındaki düğmeler kaldırılmıştır ve yalnızca kod görüntülenir. Her kartın üst ve alt kenarlarında 15 piksel, sol ve sağ kenarlarında ise 25 piksel boşluk bulunur.

Teknik Uygulama: Düzen ve stil, HTML5 ve CSS kullanılarak uygulanmıştır (kod blokları renklendirilmelidir); dom-to-image-more işlevi entegre edilmiştir. dom-to-image-more komut dosyasının adresi https://youmind.club/__ext/cdn.jsdelivr.net/npm/dom-to-image-more@2.8.0/dist/dom-to-image-more.min.js olup, tek karttan resim indirme (düğme kartın altında bulunur, resimler yüksek çözünürlüklü olmalıdır) ve tüm resimlerin tek tıklamayla indirilmesini sağlar (tıkladıktan sonra, resimleri tek tek indirmeden önce 1 saniye bekleyin). Kodda gereksiz ters tırnak işaretleri (`\`) eklemekten kaçının, çünkü bu hatalara neden olabilir.

Bunu uygularken lütfen şunlara dikkat edin: Kapak kartını sade tutun. Simgeler için sözde öğeler kullanmayın; doğrudan SVG kullanın. İndirilen resimler yüksek çözünürlüklü ve 2 ölçekli olmalıdır. Resimleri numaralar kullanarak ardışık olarak adlandırın.