Weblog Startseite Twitter Tweets von @intervista_ag

Kategorie

Webmontag I – Codelistings mit XHTML & CSS

In diesem Artikel geht es darum Codebeispiel auf einer Webseite übersichtlich zur Verfügung zu stellen.

In erster Linie gibt es zum Darstellen von Codebeispielen das Element <code></code> welches in den meißten Browser den Inhalt in einer Schreibmaschinen- Schrift anzeigen lässt.

  1. <code>Das ist ein Programmcode</code>

Dies ist ausreichend wenn ein Tag oder ein ganz kurzes Codebeispiel in einem Fließtext vorkommt. Geht es aber darum größere Listings darzustellen, ist der  <code>– Tag nicht ausreichend.
Viel mehr wäre es wichtig die Zeilennummer mit abzubilden und unterschiedliche Highlights zu haben. Der Programmcode und die Kommentaren sollen zum Beispiel unterschiedliche Highlights haben, so wie man es von diversen Editoren kennt.

Wie das Beispiel zeigt, gibt es durchaus Möglichkeit dies mit xHTML und CSS zu bewerkstelligen. Hierzu wird die geordnete, nummerierte Liste zu Hilfe genommen. Sie wird eingeleitet mit einem <ol> und beendet mit </ol>.
Zwischen dem Anfangs und Endtag kommen die einzelnen Listeneinträge (<li></li>). Ein Listeneinträg spiegelt eine Zeile Code wieder.

Jetzt sollte möglichst ein Kommentar innerhalb des Codebeispieles eine andere Farbe (grau) haben als zum Beispiel der HTML Code.
Dafür bedienen wir uns einiger HTML- Klassen. In diesem Blog werden unter anderem folgende farblich unterschiedliche Klassen benutzt:

  • Kommentare (<code class=“kommentar“)
  • HTML (<code class=“html“>)
  • Programmcode (<code class=“source“>)
  • CSS (<code class=“css“>)

Das ganze ist aber noch nicht zu gebrauchen. Was wir benötigen ist CSS um den einzelnen Elementen die richtige Formatierung zu geben.

  1. /* Fuer die Darstellung von Codezeilen */
  2. ol.code {
  3.    background-color: #DB663B;
  4.    color: #FFFFFF;
  5.    border-top: 1px solid;
  6.    border-right: 1px solid;
  7.    border-bottom: 1px solid;
  8.    border-left: 1px solid;
  9.    list-style-type: decimal;
  10.    margin-left: 20px;
  11.    margin-right: 40px;
  12. }
  13. ol.code > li {
  14.    background-color: #FFFFCC;
  15.    border-bottom-width: 1px;
  16.    border-bottom-style: solid;
  17.    border-bottom-color: #999999;
  18.    padding-left: 10px;
  19.    color: #FFFFFF;
  20. }
  21. code {
  22.    font-family: "Courier New", Courier, mono;
  23.    color: #000000;
  24.    font-size: 11px;
  25. }
  26.    .html, .source {
  27.    color: #0000FF
  28. }
  29. .css {
  30.    color: #FF00FF;
  31. }
  32. .kommentar {
  33.    color: #999999;
  34. }

Um die Darstellung seinen Anforderungen entsprechend zu relasieren, gibt es noch ein paar kleine Beispiele um ein Codebeispiel noch leserlicher zu machen.

Es ist kein Problem ein Programmzeile und ein Kommentar in ein und der selben Zeile zu schreiben.

  1. echo "Hallo Welt" /*Das ist ein Kommentar */
  2. <li><code class="html">echo &quot;Hallo Welt&quot;</code>
  3. <code class="kommentar">/*Das ist ein Kommentar</code></li>

Auch Lehrzeichen lassen sich realsieren.

  1. &nbsp;

Genaus gut kann man natürlich auch eine Klasse erstellen. Die Klasse erhält dann zum Beispiel einen gewünschten Einzug von 20px.

2 Responses to “Webmontag I – Codelistings mit XHTML & CSS”

  1. Annerose sagt:

    danke für die detaillierte Darstellung. ich habe da nicht so viel Ahnung wie Du. Hast Du Dir das Wissen selbst angeeignet oder bist Du dafür auf Schulung gegangen? Würde mich mal interessieren.

  2. Also eine Schulung habe ich dafür nicht besucht. Bei der ständigen Arbeit an Webfrontends stößt man immer wieder auf Probleme und Anregungen um neue Sachen zu realisieren. Einiges sieht man bei anderen und kombiniert es mit vorhandenem Wissen.
    Also kurz gesagt. „Man nehme das eigene Wissen, das der anderen und das von Google. Manchmal ist ein wenig Tüfteln und Kreativität gefragt.
    Andere spannende Beiträge auch zum Thema Webdesign findest du in meinem privaten Blog (http://www.blog.bluehilltec.com)

Hinterlasse ein Kommentar: