CSS Hooks untuk Pre-Tags

Pasca berdiskusi dengan pencipta tema “The Erudite” yang ramah, saya mengetahui bahwa pre-tags pada tema ini tidak dibungkus (wrap) secara otomatis, berikut yang disampaikannya pada saya…

Code inside a <pre> element will not wrap. <pre> preserves whitespace and will not wrap until you enter an explicit return in the text inside. You can override this behaviour with the white-space:pre-wrap; CSS declaration, but not all browsers support it.

Jadi dengan demikian maka kuputuskan untuk membuat deklarasi CSS sendiri untuk tag yang satu ini. Namun seperti biasa, sebelumnya saya minta nasihat dulu pada para sepuh, kali ini yang kena todong adalah Mas Ganda Manurung.

Kemudian saya melanjutkan pertapaan belajar mandiri hingga 40 hari 40 malam sampai puas. Sumber daya yang saya gunakan kali ini adalah:

  • Styling Code Snippets with CSS;
  • W3 Schools: CSS Color;
  • Notepad++;
  • WP-Typography;

Kemudian setelah bongkar sana dan bongkar sini (tidak perlu diceritakan, karena Anda tidak perlu dapat pusingnya juga, dan saya-pun bisa pusing lagi dengan menceritakannya), maka lahirlah deklarasi CSS yang baru (padahal yang lama saja tidak ada) untuk pre-tags.

Ini adalah deklarasi yang pertama, bentuk yang sederhana:


pre {
	position:relative;
	z-index:50;
	background:#383838;
	border:1px solid #999;
	color:#FFF;
	display:block;
	font-family:"Courier New",Courier,monospace;
	font-size:13px;
	line-height:18px;
	margin:10px 0 20px;
	overflow:auto;
	padding:18px 10px 17px;
	overflow-x:sroll;
}

Kemudian sedikit perubahan menjadi seperti ini:


pre {
	position:relative;
	z-index:50;
	background: url(wp-content/uploads/pre_code_bg_blk.gif) repeat-y left top;
	border:1px solid #999;
	color:#FFF;
	display:block;
	font-family:"Courier New",Courier,monospace;
	font-size:12px;
	line-height:20px;
	margin:10px 0 20px;
	overflow:auto;
	padding:18px 10px 17px;
	overflow-x:sroll;
}

Saya pun kemudian menautkannya ke mesin blog dengan pengaya WP-Typography, karena saya ogah bongkar style.css atau sejenisnya. Dan jadilah apa adanya.

Silakan jika ada yang ingin menggunakan, tapi tidak saya sarankan karena berisiko menghancurkan reputasi blog anda karena CSS yang amburadul.

Iklan

16 pemikiran pada “CSS Hooks untuk Pre-Tags

  1. Kontal adalah bahasa jawa yang artinya mental-terpental, balik sendiri.
    tapi seringnya seperti kemarin Spam deleted dan mudah-mudahan ini sudah teratasi 😀

    Suka

  2. rismaka

    Sepertinya pre tags di atas ada yang tidak efektif deh mas, yaitu elemen:

    position:relative;
    z-index:50;
    background: url(wp-content/uploads/pre_code_bg_blk.gif) repeat-y left top;
    overflow-x:sroll;

    Lebih baik tidak dituliskan, karena hasilnya akan sama saja CMIIW (belum praktekin langsung di blog ini.

    Dan ada elemen yg kurang, yaitu:

    margin:10px 0 20px;
    padding:18px 10px 17px;

    elemen itu tidak ditentukan lebar bagian kiri. jadi lebih baik penulisannya:

    margin:10px 0px 20px 0px;
    padding:18px 10px 17px 0px;

    Suka

  3. Mas Ris,

    Ha ha, ra mudeng aku, karena saya tidak belajar dari prinsip-nya CSS tapi langsung ke aplikasi.

    Nanti sore dah, saya tanyakan Bli Dani mumpung ada acara kopdar bareng. Saya agak telmi kalau belajar tentang markah beginian.

    Trims Mas Ris 🙂

    Suka

  4. Mas Agung,

    Ah…, saya tadinya tidak yakin kalau itu maknanya, walau ada firasat, tapi daripada salah menjawab, mending ditanyakan kembali.

    Masalah kemarin sepertinya diatur langsung sama Intense Debate, jadinya sekarang tidak ada lagi peringatan seperti itu, biasa-lah dia kan pakai akismet 😀

    Suka

  5. Mas Ris,

    Membantu sih Mas, tapi memang prinsip saya tidak membongkar style sheet asli dari sebuah tema 🙂

    Itu mencegah saya mempelajari dunia CSS lebih jauh lagi. He he, mau kundur kok malah nerusi, nanti dibilang begitu lagi 😀

    Makanya saya pakai wp-typography, sehingga masalah seperti ini bisa saya atasi tanpa terlalu banyak pusing dan belajar dari awal lagi.

    Lalu kalau kode saya di atas masuk yang pertama atau yang kedua dari blog Mas Ris? Saya takut lihat sumber halaman blog-nya Mas Rismaka, soalnya ada Hulk – hijau gede yang jagain pintunya 😆

    Suka

  6. Mas Ris,

    Kemarin saya tambahkan:

    <code>

    background: url(wp-content/uploads/pre_code_bg_blk.gif) repeat-y left top;

    </code>

    Karena background-nya jadi lucu dan bagus di latar gelap. Ah…, tapi kadang kelihatan dan kadang tidak, ya udah saya biarkan saya begitu.

    Kalau nilai 0 (zero) memangnya harus ditulis ya Mas elemennya? He he… (pertapaan yang gagal).

    Suka

  7. rismaka

    Kode di atas lebih baik gunakan class saja. Di blog saya juga menggunakan class, jadi tiak perlu menimpa elemen yg sudah ada (yg dpt menimbulkan konflik), tinggal tambahkan saja sebuah class, jadi penulisannya menjadi seperti ini:

    <pre class="namaclass"><code>

    blah blah blah

    blah blah blah

    </code></pre>

    Saya sendiri tidak menggunakan elemen <code><code></code> karena memang tidak berpengaruh.

    Ada hulk gede ya mas 😆

    Suka

  8. Kalau boleh menyumbang kode, bagaimana dengan yang ini:

    pre {
    overflow-x: auto; /* Use horizontal scroller if needed; for Firefox 2, not needed in Firefox 3 */
    white-space: pre-wrap; /* css-3 */
    white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
    white-space: -pre-wrap; /* Opera 4-6 */
    white-space: -o-pre-wrap; /* Opera 7 */
    /* width: 99%; */
    word-wrap: break-word; /* Internet Explorer 5.5+ */
    }

    Mungkin bisa dijadikan semacam eksperimen 🙂

    Suka

  9. Mas Ardianzzz,

    Saya sebenarnya tertarik untuk menambahkan itu, karena sempat saya baca di tutorial tentang membuat pre-tags yang ramah peramban 🙂

    Makasih Mas, nanti saya coba masukkan.

    Suka

      1. Nurul Imam

        Tapi Kok ngga berfungsi untuk moz box shadow dan zoom rotate CSS3

        apa ada yang salah yah ?

        saya coba cek dulu deh kodenya takut ada yang salah tulis

        Suka

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout /  Ubah )

Foto Google+

You are commenting using your Google+ account. Logout /  Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout /  Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout /  Ubah )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.