Bilgi Veren

4 yıl önce

660 Okuma

0 Yorum


HTML Pre Code Style CSS Düzenleme

Önceki yazımda CKEditor e Code Snippet eklentisi eklemeyi göstermiştim. O yazıya CKEditor Code Snippet Ekleme linkinden ulaşabilirsiniz. CKEditor'ü code snippet eklentisi olarak kullansanız dahi sitenizde pre code blokları stillsiz olarak sadece yazı şeklinde çıkaraktır. Bu yazı da siteye eklediğimiz pre code bloklarına basit ve giriş seviyesi için yeterli bir CSS kod bloğu paylaşacağım.

Yapmanız gereken aşağıdaki style kod bloğunu pre code bulunan sayfanızın head kod bloğu arasına eklemek olaraktır.

pre {
    background: #f4f4f4;
    border: 1px solid #ddd;
    border-left: 3px solid #f36d33;
    color: black;
    page-break-inside: avoid;
    font-family: monospace;
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 1.6em;
    max-width: 100%;
    overflow: auto;
    padding: 1em 1.5em;
    display: block;
    word-wrap: break-word;
}

Hepsi bu kadar.

Konu hakkında tüm duygu ve düşüncelerinizi yorum olarak paylaşabilirsiniz.