CSS-Stil für Code in Ihrem Blog

css

A friend of mine asked me how I made the code regions on my last blog entry. I actually ‘faked’ the code region utilizing a style. Within Blogger, you can edit your template. I added the following style:

p.code {Schriftfamilie: Courier New; Schriftgröße: 8pt; Randstil: Einschub; Randbreite: 3px; Polsterung: 5px; Hintergrundfarbe: #FFFFFF; Zeilenhöhe: 100%; Rand: 10px}

The next step is to edit my tag in the ‘Edit Html’ mode. I simply point to my new style by making the tag. Voila! Breaking down the styles:

  • Stellen Sie die Schriftart auf Courier New ein. Sieht aus wie ein generischer Code-Editor
  • Stellen Sie die Schriftgröße auf 8pt ein, damit sie richtig aussieht
  • Set the paragraph border style to ‘inset’. This replicates what a textarea looks like on the page.
  • Stellen Sie die Rahmenbreite auf 2 oder 3 Pixel ein. Dadurch sieht der eingefügte Randstil richtig aus.
  • Durch Auffüllen wird der Abstand zwischen dem Rand und dem darin enthaltenen Text festgelegt.
  • Hintergrundfarbe… auf Weiß setzen (#FFFFFF)
  • Zeilenhöhe - Ich habe dies auf 100% angepasst, da einige der anderen Stile in meinem Blogger-Thema meine Zeilenhöhe auf etwa 200% festgelegt haben.
  • Stellen Sie den Rand auf 10 px ein. Dadurch wird der Absatz (p-Tag) 10 Pixel von allem entfernt.

That’s all there is too it! One note: The editor that comes with Blogger isn’t capable of displaying the as it will appear in your blog. But it works and looks great!

One more note… after you make the edit to the tag, the Blogger editor likes to randomly use it elsewhere across your post. It’s a little bit annoying! My advice would be to write your entire post and then make the one small edit afterwards.

Ein letzter Hinweis… verwenden Sie unbedingt HTML-Entitäten, um Ihre Symbole anzuzeigen! Ein paar Beispiele:

  • Anführungszeichen (“) sind“
  • > ist>
  • > ist>

Viel Spaß beim Codieren!

3 Kommentare

  1. 1
  2. 2
  3. 3

    Ich denke, es gibt keine Notwendigkeit, jetzt zu schreiben als. Sie können hilfreiche Editoren verwenden. Sie können Farbe, Rahmen usw. auswählen.

Was denken Sie?

Diese Seite verwendet Akismet, um Spam zu reduzieren. Erfahren Sie, wie Ihre Kommentardaten verarbeitet werden.