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.
Bhyllabus l'énigme 
16 tanggapan untuk “CSS Hooks untuk Pre-Tags”
Syntax css buat safari apa yah ?
kok ngga jalan ?
SukaSuka
Mas Nurul, maksudnya markah CSS apa? Rasanya tidak ada yang khusus dengan Safari, kan mengikuti standar web semua :).
SukaSuka
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
SukaSuka
Weh, kalau CSS3 saya angkat tangan dah 🙂
SukaSuka
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.
SukaSuka
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 🙂
SukaSuka
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 😆
SukaSuka
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).
SukaSuka
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 😆
SukaSuka
Kira-kira postingan saya yang berjudulMenampilkan Markah PHP atau HTML Untuk Tutorial membantu akan membantu ga mas?
SukaSuka
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 😀
SukaSuka
[OOT]
Beberapa hari ini saya selalu kontal saat mengisi komentar disini.
Apakah pagi ini juga akan terjadi hal yang sama
SukaSuka
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 🙂
SukaSuka
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;
SukaSuka
Kontal adalah bahasa jawa yang artinya mental-terpental, balik sendiri.
tapi seringnya seperti kemarin Spam deleted dan mudah-mudahan ini sudah teratasi 😀
SukaSuka
Mas Agung,
Hmm…, kontal itu apa ya?
SukaSuka