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 :

Css-Html Birleşik

[php]<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>
[/php]

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 :

[php]
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%
}
[/php]

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 :

[php]
<pre><code>buraya kodunuz gelecek
</code></pre>
[/php]