Gaya CSS untuk Kod di Blog anda

css

Seorang rakan saya bertanya kepada saya bagaimana saya membuat kawasan kod pada entri blog terakhir saya. Saya sebenarnya 'memalsukan' wilayah kod menggunakan gaya. Di dalam Blogger, anda boleh mengedit templat anda. Saya menambah gaya berikut:

p.code {font-family: Kurier Baru; saiz fon: 8pt; gaya sempadan: sisipan; lebar sempadan: 3px; pembalut: 5px; warna latar: #FFFFFF; ketinggian garisan: 100%; margin: 10 piksel}

Langkah seterusnya adalah mengedit tag saya dalam mod 'Edit Html'. Saya hanya menunjukkan gaya baru saya dengan membuat tanda. Voila! Mengurangkan gaya:

  • Tetapkan fon ke Courier New… kelihatan seperti penyunting kod generik
  • Tetapkan saiz fon ke 8pt agar kelihatan betul
  • Tetapkan gaya sempadan perenggan ke 'sisipan'. Ini meniru seperti apa bentuk teks di halaman.
  • Tetapkan lebar sempadan kepada 2 atau 3 piksel. Ini menjadikan gaya sempadan sisipan kelihatan betul.
  • Padding menetapkan jarak antara sempadan dan teks di dalamnya.
  • Warna latar belakang ... tetapkan ke putih (#FFFFFF)
  • Ketinggian garis - Saya menyesuaikannya menjadi 100% kerana beberapa gaya lain dalam tema blogger saya menjadikan ketinggian garis saya sekitar 200%
  • Tetapkan margin hingga 10 px. Ini memindahkan perenggan (p tag) 10 piksel dari semuanya.

Itu sahaja yang ada! Satu catatan: Editor yang disertakan dengan Blogger tidak mampu menampilkan seperti yang akan muncul di blog anda. Tetapi ia berfungsi dan kelihatan hebat!

Satu lagi nota… setelah anda mengedit pada teg, editor Blogger suka menggunakannya secara rawak di tempat lain di seluruh catatan anda. Ia sedikit menjengkelkan! Nasihat saya adalah menulis keseluruhan catatan anda dan kemudian membuat satu penyuntingan kecil selepas itu.

Satu nota terakhir ... pastikan untuk menggunakan Entiti HTML untuk memaparkan simbol anda! Beberapa contoh:

  • Petikan (") adalah"
  • > adalah>
  • > adalah>

Selamat Pengkodan!

3 Komen

  1. 1
  2. 2
  3. 3

    Saya tidak perlu menulis sekarang daripada. anda boleh menggunakan editor yang berguna. anda boleh memilih warna, sempadan dll.

Apa yang anda fikir?

Laman web ini menggunakan Akismet untuk mengurangkan spam. Ketahui bagaimana data komen anda diproses.