Dikkat

Artık daha güncel bir blog olacak !

html-css
  • Cem Karakurt
  • 105 Okunma
  • 20 Aralık 2013
  • 8
  • 1

Kod Kutusu Css – Html

Blogunda eklenti,tema ve benzeri içerik paylaşanlar kodları daha düzenli kullanıcılarına sunmak için  kod kutusu içine eklerler.Wordpress kullananlar “SyntaxHighlighter Evolved” eklentisi ile gelişmiş bir kod kutusuna sahip oluyorlar.Bende blogumda bu eklentiyi kullanıyorum.Blogger ve diğer platformları kullananlar için bir eklenti paylaşacağım. Kod kutusu yapmanın bir çok yolu var bu sadece bir tanesi.

Demo :

kod kutusu

Css-Html Birleşik

<pre style="font-family: Andale Mono, Lucida Console, Monaco, fixed, monospace; color: #000000; background-color: #eee;font-size: 12px;border: 1px dashed #999999;line-height: 14px;padding: 5px; overflow: auto; width: 100%"><code>buraya kodunuz gelecek
</code></pre>

Yukarıdaki kodu göstermek istediğiniz yere ekleyerek direk gösterebilirsiniz.Ya da kodları html/css olarak parçalayıp yerden tasarruf yapabilirsiniz.

Css Kodu :

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

Yukarıda verdiğim css kodunu temanızda diğer css kodlarının yanına ekleyin.Ekledikten sonra sadece aşağıdaki kod ile kod kutusu oluşturabilirsiniz.

Not: Css kodlarını düzenleyip daha güzel bir görüşüş kazandırabilirsiniz.

Html Kodu :

<pre><code>buraya kodunuz gelecek
</code></pre>
  • 20 Aralık 2013 tarihinde yazıldı.
  • 8 yorum yapıldı.
  • 1

Yorumlar (8 Yorum)

Yazı hakkında görüşlerinizi belirtmek istermisiniz?