CSS-stijl voor code op uw blog

css

Een vriend van me vroeg me hoe ik de codegebieden heb gemaakt op mijn laatste blogbericht. Ik heb het codegebied eigenlijk 'vervalst' met behulp van een stijl. Binnen Blogger kunt u uw sjabloon bewerken. Ik heb de volgende stijl toegevoegd:

p.code {font-family: Courier New; lettergrootte: 8pt; randstijl: inzet; border-breedte: 3px; opvulling: 5px; achtergrondkleur: #FFFFFF; lijnhoogte: 100%; marge: 10px}

De volgende stap is om mijn tag te bewerken in de modus 'Html bewerken'. Ik wijs simpelweg naar mijn nieuwe stijl door de tag te maken. Voila! De stijlen opsplitsen:

  • Stel het lettertype in op Courier New… ziet eruit als een generieke code-editor
  • Stel de lettergrootte in op 8pt om er goed uit te zien
  • Zet de randstijl van de alinea op 'inzet'. Dit repliceert hoe een tekstgebied eruitziet op de pagina.
  • Stel de randbreedte in op 2 of 3 pixels. Hierdoor ziet de stijl van de inzetrand er goed uit.
  • Opvulling bepaalt de afstand tussen de rand en de tekst erin.
  • Achtergrondkleur ... zet deze op wit (#FFFFFF)
  • Lijnhoogte - ik heb dit aangepast naar 100% omdat sommige van de andere stijlen in mijn blogger-thema mijn lijnhoogte ongeveer 200% maakten
  • Stel de marge in op 10 px. Hierdoor wordt de alinea (p-tag) 10 pixels verwijderd van alles.

Dat is alles wat er ook is! Een opmerking: de editor die bij Blogger wordt geleverd, is niet in staat om het weer te geven zoals het in je blog zal verschijnen. Maar het werkt en ziet er geweldig uit!

Nog een opmerking… nadat je de tag hebt bewerkt, gebruikt de Blogger-editor deze graag ergens anders in je bericht. Het is een beetje vervelend! Mijn advies zou zijn om je hele bericht te schrijven en daarna de enige kleine bewerking uit te voeren.

Een laatste opmerking ... zorg ervoor dat u HTML-entiteiten gebruikt om uw symbolen weer te geven! Een paar voorbeelden:

  • Aanhalingstekens (") zijn"
  • > is>
  • > is>

Gelukkig codering!

3 reacties

  1. 1
  2. 2
  3. 3

Wat denk je?

Deze site gebruikt Akismet om spam te verminderen. Ontdek hoe uw reactiegegevens worden verwerkt.