A Cahya Legawa's Les pèlerins au-dessus des nuages

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.

Artikel Baru Terbit

  • Cyclospora: Parasit Mikroskopis yang Mengintai di Balik Sayuran dan Buah Segar
    Wabah cyclosporiasis melanda ratusan warga Amerika Serikat pada musim panas 2026, disebabkan parasit mikroskopis Cyclospora cayetanensis yang mencemari sayur dan buah segar. Artikel ini mengulas biologi parasit, gejala diare “meledak-ledak”, tantangan diagnosis laboratorium, terapi TMP-SMX, hingga relevansinya bagi keamanan pangan dan kewaspadaan klinis di Indonesia.
  • Ngopi Pagi di Sragen, Otot Lebih Padat: Apa Kata Riset Terbaru soal Kopi dan Komposisi Tubuh?
    Studi kohort Finlandia menemukan bahwa peminum kopi rutin memiliki lemak viseral lebih rendah dan massa otot lebih tinggi meskipun indeks massa tubuh serupa dibanding peminum kopi jarang. Pada pria, konsumsi kopi juga terkait dengan profil testosteron dan SHBG yang lebih baik, namun studi ini bersifat observasional dan tidak membuktikan hubungan sebab-akibat.
  • Faktor Kesuburan Pria: Sisi yang Sering Terlewat dalam Pencarian Momongan
    Faktor pria berkontribusi pada sekitar separuh kasus infertilitas pasangan, namun sering luput dari pemeriksaan awal. Artikel ini mengulas standar analisis sperma terbaru WHO edisi keenam serta bukti terkini mengenai pengaruh rokok, alkohol, berat badan, paparan panas, dan konsumsi gula terhadap kualitas dan integritas DNA sperma.
  • Ketika Muntah Datang Seperti Badai yang Terjadwal: Mengenal Cyclic Vomiting Syndrome
    Muntah hebat yang datang berulang lalu hilang seolah tak pernah terjadi—inilah wajah cyclic vomiting syndrome, gangguan interaksi otak-usus yang sering disalahpahami sebagai gastroenteritis biasa. Artikel ini mengulas patofisiologi, kriteria diagnosis Rome IV, pembaruan pedoman NASPGHAN 2025, serta tata laksana berbasis bukti terkini bagi klinisi di layanan primer maupun rujukan.
  • Demo Besar 27 Agustus 2026: Apa yang Perlu Dicermati Pelaku Bursa Saham dalam Jangka Pendek
    Besok, 27 Agustus 2026, Jakarta akan menggadakan unjuk rasa besar oleh berbagai aliansi. Tuntutan termasuk pengesahan RUU Perampasan Aset dan hukuman mati bagi koruptor. Polda Metro Jaya telah menyiapkan pengamanan. Aksi ini dapat mempengaruhi IHSG dan rupiah, dengan proyeksi pergerakan cenderung sideways dalam beberapa hari ke depan.

Commenting 101: “Be kind, and respect each other” // Bersikaplah baik, dan saling menghormati (Indonesian) // Soyez gentils et respectez-vous les uns les autres (French) // Sean amables y respétense mutuamente (Spanish) // 待人友善,互相尊重 (Chinese) // كونوا لطفاء واحترموا بعضكم البعض (Arabic) // Будьте добры и уважайте друг друга (Russian) // Seid freundlich und respektiert einander (German) // 親切にし、お互いを尊重し合いましょう (Japanese) // दयालु बनें, और एक दूसरे का सम्मान करें (Hindi) // Siate gentili e rispettatevi a vicenda (Italian)

16 tanggapan

  1. Avatar Nurul Imam
    Nurul Imam

    Syntax css buat safari apa yah ?

    kok ngga jalan ?

    1. Avatar Cahya

      Mas Nurul, maksudnya markah CSS apa? Rasanya tidak ada yang khusus dengan Safari, kan mengikuti standar web semua :).

      1. Avatar Nurul Imam
        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

      2. Avatar Cahya

        Weh, kalau CSS3 saya angkat tangan dah 🙂

  2. Avatar Cahya

    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.

  3. Avatar ardianzzz

    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 🙂

Tinggalkan Balasan

Eksplorasi konten lain dari Bhyllabus l'énigme

Langganan sekarang agar bisa terus membaca dan mendapatkan akses ke semua arsip.

Lanjutkan membaca