CSS-Stil für Code in Ihrem Blog

css

Ein Freund von mir fragte mich, wie ich die Code-Regionen in meinem letzten Blogeintrag erstellt habe. Ich habe die Code-Region tatsächlich mit einem Stil "gefälscht". In Blogger können Sie Ihre Vorlage bearbeiten. Ich habe folgenden Stil hinzugefügt:

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

Der nächste Schritt besteht darin, mein Tag im Modus "HTML bearbeiten" zu bearbeiten. Ich zeige einfach auf meinen neuen Stil, indem ich das Tag mache. Voila! Aufschlüsselung der Stile:

  • 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
  • Setzen Sie den Absatzrahmenstil auf "Einschub". Dies repliziert, wie ein Textbereich auf der Seite aussieht.
  • 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.

Das ist alles was es auch gibt! Ein Hinweis: Der mit Blogger gelieferte Editor kann das nicht so anzeigen, wie es in Ihrem Blog angezeigt wird. Aber es funktioniert und sieht gut aus!

Noch ein Hinweis… Nachdem Sie das Tag bearbeitet haben, verwendet der Blogger-Editor es gerne an einer anderen Stelle in Ihrem Beitrag. Es ist ein bisschen nervig! Mein Rat wäre, Ihren gesamten Beitrag zu schreiben und anschließend die eine kleine Bearbeitung vorzunehmen.

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.