Css Kodlar Kutu İçine Nasıl Alınır?

Kodları Kutu içine alarak ziyaretçinin dikkatinin dağılmasını engellemiş oluruz.Özellikle sitenizde çeşitli kodlar paylaşıyorsanız kodu kutu içine alarak daha hoş bir site elde etmiş olursunuz.Aşağıda bir kaç örnekle kodu kutu içine alma ebatlarını gösterdim kendi sitenize uygulayarak nasıl duracağına kendiniz karar verebilirsiniz.

Yazıları Çerçeve İçine Almak

<div id=”grab-codes”><textarea id=”grabbit” rows=”5″ cols=”50″>kodu buraya yaziyoruz</textarea></div>

<div id=”grab-codes”><textarea id=”grabbit” rows=”3″ cols=”30″>kodu buraya yaziyoruz</textarea></div>

WordPress Kodu Kutu İçine Almak

Bilmeyenler için kutu içine alınan kodların çalışmasını engelleyerek, yazımızda açık bir şekilde kodu okuyucunuza sunmanızı sağlayan, uzun kodları kaydırmalı yapısıyla görünümü bozmayacak şekilde kaydırarak görüntüleme olanağı sunan kutucuklardır.

Kaydırmalı kod kutusu için aktif wordpress temanıza ait sitil dosyasına, aşağıdaki kodlardan istediğiniz herhangi bir tanesini eklemeniz yeterli olacaktır.

1.Kod

pre {
overflow: auto;
border: 1px solid;
}

2.Kod

pre{
 font-family: Andale Mono, Lucida Console, Monaco, fixed, monospace;
 color: #000000;
 background-color: #9f87a8;
 font-size: 12px;
 border: 2px dashed #0c0b0c;
 line-height: 14px;
 padding: 5px;
 overflow: auto;
 width: 100%
 }

3.Kod

pre {
 white-space: pre-wrap;
 line-height: 1em;
 margin: 15px -2px;
 overflow: auto; color: #333;
 background: c3d8d7;
 padding: 6px; -moz-tab-size: 2; -o-tab-size: 2; tab-size: 3; -ms-word-break: normal; word-break: normal; -webkit-hyphens: none; -moz-hyphens: none; -ms-hyphens: none; hyphens: none;
 position: relative;
 border: 1px solid;
 }