Inhalt
open / close sub Hilfe
Inhalte der Webseiten
open / close sub Registrieren und Einloggen
open / close sub Beiträge/Themen lesen
open / close sub Beiträge/Themen schreiben und bearbeiten
open / close sub Zuerst Suchen!
Welche Sparte?
Hinweise (optional)
Titel
Fragenstatus
Infofelder (optional)
Der Text
open / close sub BBCodes
Beiträge zitieren
Beiträge bearbeiten
Entwürfe einfügen
Dateianhänge
open / close sub Sitemap
open / close sub Sidebar
Beitragszähler
Benutzergruppen & versteckte Sparten
Sitemap
Virtueller Anprechpartner
open / close sub Promotiontour
Sitemap
Die Liste der letzten 10 Topics
Eigene Beiträge & Topics hervorheben
PDF und PDF-Korb
Die Code-Tags
Der Fragenstatus
Der virtuelle Ansprechpartner
Sitemap
Code-Tags
von user profile iconAndreas L.


Bei vielen Programmier-Problemen ist es hilfreich ein Stück Code im Beitrag einzufügen. Der potenzielle Antworter kann so schneller sehen was falsch ist und muss nicht erst Fragen stellen wie z. B. "Was geht nicht? Kannst du nicht ein Stück Code posten..." oder gar "Hmm... Meine Glaskugel ist defekt. Wie soll ich dir ohne Code helfen?" Ok, man fügt nun den Code im Beitragseditor ein und klickt auf Absenden. Der Schock für den Leser: Der Code ist nicht formatiert, nicht eingefärbt. Also hat man sich hier, wie auch in vielen anderen Foren, etwas einfallen lassen: Es wurde im Forum ein Syntax-Highlighter für Delphi-, C#-, SQL- und XML- Code integriert. Wie man diesen verwendet und was er noch alles kann möchte ich in diesen kleinen Artikel erläutern.

Die BBCode-Tags

Die BBCodes sind einfach zu merken und schnell getippt:
[code:1:61f13c59bc]
ausblenden Delphi-Quelltext
1:
{PROTECTTAGcc60c46e94068e056fe8dd354f8a4663}					


Ein Beispiel:
Aus folgenden Code<span class="inlineSyntax"><span class="codecomment">{PROTECTTAG1f2c81ef3ca8e1818541b5bd12e916e4}</span></span>
wird in der Beitragsansicht
ausblenden Delphi-Quelltext
1:
2:
3:
4:
function foobar:String;
begin
 result:= 'foo' + 'bar';
end;


Noch schneller, noch bequemer

Wenn man sich Tipparbeit ersparen möchte fügt man einfach nur seinen Quellcode im Beitragseditor ein, markiert diesen, wählt oben links die jeweilige Programmiersprache und klickt auf das kleine Plus neben den Auswahlfeld. Der Beitragseditor schreibt die BBCodes automatisch um den Code. Die Tastenkombination ALT + R ist dasselbe als wenn man auf den Plus-Button klickt.

user defined image


Den Code betiteln

Wenn man möchte kann dem Code auch ein Titel zugewiesen werden. Einfach im Anfangstag ="MEIN TITEL" einfügen. Hier ein kleines Beispiel:
ausblenden Quelltext
1:
<span class="inlineSyntax"><span class="codecomment">{PROTECTTAG1f2c81ef3ca8e1818541b5bd12e916e4}</span></span>					

ergibt
ausblenden Die Funktion foobar
1:
2:
3:
4:
function foobar:String;
begin
 result:= 'foo' + 'bar';
end;


Zahlen und Zeilen

Es gibt auch die Möglichkeit der Zeilennummerierung einen anderen Anfangswert zu geben. Dies kann sinnvoll sein wenn man eine Compilermeldung ala "Undefinierter Bezeichner: Zeile 125" hat. Woher soll der Leser wissen das Zeile 7 im Codeschnipsel der Zeile 125 im originalen Sourcecode entspricht. Also lässt man die Nummerierung genau so wie in Delphi darstellen. Um dies zu realisieren muss man einfach nur eine Klammer mit der "Startzeile" im Code-Tag einfügen:
ausblenden Quelltext
1:
2:
3:
4:
<div class="syntaxContainer">  <div class="syntaxSelect">    <a class="genmed" style="text-decoration: none" href="javascript:selectAll(140)">markieren</a>  </div>  <div class="syntaxTitle genmed">        <a style="text-decoration: none" href="javascript:toggleCode(140)">            <span  id="minusFor140"><img class="codecollapse crispscaling" align="top" src="./graphics/bbcode/code_hide.png" border="0" alt="ausblenden" title="ausblenden"/></span>            <span style="display: none;" id="plusFor140"><img class="codecollapse crispscaling" align="top" src="./graphics/bbcode/code_show.png" border="0" alt="anzeigen" title="anzeigen"/></span>        </a>                <b>Delphi-Quelltext</b>        <span class="copyright" style="display: none" id="hintFor140">                       </span>  </div>  <div id="code140" class="syntax" style=" ">    <table cellspacing="0" cellpadding="0">      <tr>        <td valign="top" style="text-align: right; padding-right: 3px; border: #DBE4EB solid; border-width: 0px 1px 0px 0px;">          <pre> 
123:
</pre>        </td>        <td valign="top" style="width: 100%; padding-left: 3px;">          <pre class="sourcecode"><span style="color: #777777">{ ... }</span>
<span class="codecomment">{PROTECTTAG3ecb1ea18059f5fcb5fe8bac07183c4f}</span>          </pre>        </td>      </tr>    </table>  </div></div>


ausblenden Delphi-Quelltext
 
123:
124:
125:
126:
{ ... }
procedure ButtonClick(Sender: TObject);
begin
 bla := edit1.text + label1.caption;
end;


Wow, bunte Wörter

Hilfreich für den Leser ist auch bestimmte Zeilen oder Wörter etwas hevorzuheben. Z. B. um einen Fehler zu kennzeichnen. Dafür gibt es den Highlight-Tag welcher auch mit anderen BBCodes als den Code-Tags benutzt werden kann. Anzumerken ist, das der Highlight-Tag der einzige Tag ist, der in den Code-Tags dargestellt werden kann. D. h. ich kann Codes wie [ b ] nicht in Code-Tags verwenden. Ein Beispiel:<span class="inlineSyntax"><span class="codecomment">{PROTECTTAG08224d9c2ef6fb65e0ea5cd97efe58ca}</span></span>

Achtung: Ich musste vor und hinter des Wortes "highlight" Leerzeichen einfügen, ansonsten könnte man nicht sehen wie die Syntax lautet. Will man den Highlight-Tag richtig benutzen dürfen da natürlich keine Leerzeichen hin.

ausblenden Delphi-Quelltext
1:
2:
dosomething;
Writeln('Hello, World');


Einstellungs-Sache

Im Benutzer-Profil kann jeder für sich auswählen ob der Code standardmäßig angezeigt also ausgeklappt sein soll und ob man Scrollbalken oder doch lieber den gesamten Code sehen möchte. Diese Einstellung ist unter Meine Ecke > Einstellungen > Erweitert fast am Ende der Seite zu finden.

Kleine Extras für den Leser

Abgesehen davon das der Code besser gelesen werden kann, bekommt der Leser auch ein bisschen Komfort. Mit einem Klick auf den Schriftzug "markieren" lässt sich der komplette Code markieren und mit einen Klick auf das Minus lässt sich der Code ausblenden.

MfG,
Andreas Lauß

Entwickler-Ecke.de rev.276b99aea638 based on phpBB
Copyright 2002 - 2011 by Tino Teuber, Copyright 2011 - 2024 by Christian Stelzmann Alle Rechte vorbehalten.