CSS-Stil für Code in Ihrem Blog

css

Ein Freund von mir hat mich in meinem letzten Blogeintrag gefragt, wie ich die Coderegionen erstellt habe. Ich habe die Coderegion 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 weise einfach auf meinen neuen Stil hin, 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 "Einfügung". 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 auch alles! Ein Hinweis: Der mit Blogger gelieferte Editor ist nicht in der Lage, das so anzuzeigen, wie es in Ihrem Blog erscheinen wird. Aber es funktioniert und sieht toll aus!

Noch eine Anmerkung: Nachdem Sie das Tag bearbeitet haben, verwendet der Blogger-Editor es gerne an anderer Stelle in Ihrem Beitrag. Es ist ein bisschen nervig! Mein Rat wäre, Ihren gesamten Beitrag zu schreiben und dann die eine kleine Bearbeitung danach 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.