Estilo ng CSS para sa Code sa iyong Blog

css

Tinanong ako ng isang kaibigan ko kung paano ko nagawa ang mga rehiyon ng code sa aking huling entry sa blog. Talagang 'peke' ko ang rehiyon ng code na gumagamit ng isang estilo. Sa loob ng Blogger, maaari mong i-edit ang iyong template. Idinagdag ko ang sumusunod na istilo:

p.code {font-family: Courier New; laki ng font: 8pt; border-style: inset; border-width: 3px; padding: 5px; background-color: #FFFFFF; taas ng linya: 100%; margin: 10px}

Ang susunod na hakbang ay i-edit ang aking tag sa mode na 'I-edit ang html'. Itinuro ko lamang ang aking bagong estilo sa pamamagitan ng paggawa ng tag. Voila! Pagwawasak ng mga istilo:

  • Itakda ang font sa Courier New… mukhang isang generic code editor
  • Itakda ang laki ng font sa 8pt upang tumingin ng tama
  • Itakda ang istilo ng hangganan ng talata sa 'inset'. Kinokopya nito kung ano ang hitsura ng isang textarea sa pahina.
  • Itakda ang lapad ng hangganan sa 2 o 3 mga pixel. Ginagawa nitong tumingin nang tama ang istilo ng inset border.
  • Itinatakda ng padding ang distansya sa pagitan ng hangganan at ang teksto sa loob.
  • Kulay ng background… itakda ito sa puti (#FFFFFF)
  • Taas ng linya - Inayos ko ito sa 100% dahil ang ilan sa iba pang mga istilo sa tema ng aking blogger ay ginawang 200% ang taas ng aking linya
  • Itakda ang margin sa 10 px. Inililipat nito ang talata (p tag) 10 mga pixel ang layo mula sa lahat.

Iyon lang ang mayroon din! Isang tala: Ang editor na kasama ng Blogger ay hindi kayang ipakita ang dahil lilitaw ito sa iyong blog. Ngunit ito ay gumagana at mukhang mahusay!

Isa pang tala ... pagkatapos mong gawin ang pag-edit sa tag, gusto ng editor ng Blogger na sapalarang gamitin ito sa ibang lugar sa iyong post. Medyo nakakainis! Ang payo ko ay isulat ang iyong buong post at pagkatapos ay gawin ang isang maliit na pag-edit pagkatapos.

Isang pangwakas na tala ... tiyaking gumamit ng mga HTML na Entity upang maipakita ang iyong mga simbolo! Isang halimbawa ng mag-asawa:

  • Ang mga quote (") ay"
  • > ay>
  • > ay>

Maligayang Coding!

3 Comments

  1. 1
  2. 2
  3. 3

    bagay ako hindi na kailangang magsulat ngayon kaysa. maaari mong gamitin ang mga kapaki-pakinabang na editor. maaari kang pumili ng kulay, hangganan atbp.

Ano sa tingin ninyo?

Ang site na ito ay gumagamit ng Akismet upang mabawasan ang spam. Alamin kung paano naproseso ang data ng iyong komento.