Seiten

Freitag, 17. September 2010

CodeBox - Syntax Darstellung in Silverlight für jede Programmiersprache

CodeBox ist ein Silverlight 4 UserControl. Mit CodeBox kann die Darstellung von Quellcode jeder beliebigen Programmiersprache als Silverlight 4 Anwendung in eine Website eingebunden werden.

Das ist CodeBox:


CodeBox ist wahrscheinlich die simpelste SyntaxHighlighting Lösung überhaupt. CodeBox verzichtet auf eigenes Programmieren eines Code-Parsers und auf umständliche Konvertierungen von Klartext zu RichText oder von RichText zu HTML.

CodeBox nutzt schlicht das neue Silverlight 4 RichTextBox Steuerelement für die absolut syntaxgetreu formatierte Darstellung von Quellcode. Und das Beste daran: Mit CodeBox kann jede beliebige Programmiersprache dargestellt werden. Egal ob C#, VB.NET, F#, C++, HTML, XAML, XML oder was auch immer. Alles wird exakt so dargestellt, wie es im Visual Studio Code-Editor dargestellt ist.

Die Verwendung von CodeBox

Mit CodeBox eine syntaxgetreu formatierte Darstellung von Quellcode in Silverlight 4 darzustellen geht folgendermaßen:

1. CodeBox herunterladen.

2. Ein neues Silverlight 4 Projekt öffnen.

3. Das Beispiel-Projekt aus dem Download öffnen und die Datei "SilverLawCodeBoxControl.xaml" kopieren (Rechtsklick ... kopieren) und in das neue Projekt einfügen (Rechtsklick auf das neue Projekt im Projekt-Explorer von Blend 4 und Einfügen).

4. Die XAML-Ansicht von SilverLawCodeBoxControl.xaml öffnen und x:Class="CodeBoxControlSolution.SilverLawCodeBoxControl" durch x:Class="DeinProjektName.SilverLawCodeBoxControl" ersetzen.

5. Den Quellcode, der dargestellt werden soll, aus dem Visual Studio Code-Editor in die Zwischenablage kopieren.

6. Zurück in die Design-Ansicht von SilverLawCodeBoxControl.xaml in Expression Blend 4 und in der Registerkarte Objekte und Zeitachsen das Element mit dem Namen "CodeBox" selektieren (das ist eine simple RichTextBox).

7. In der Design-UI von Blend einen Doppelklick auf die CodeBox-RichTextBox machen, wonach der gesamte Text in der CodeBox-RichTextBox markiert ist.

8. Mit Strg-V den in die Zwischenablage kopierten Quellcode in die CodeBox-RichTextBox einfügen.

9. F5.

Das war's!

Zur Laufzeit kann durch Klicken und Ziehen mit dem Mauszeiger entweder ein Teil des Textes oder über das Context-Menü der gesamte Text markiert werden. Über das Context-Menü kann der markierte Text in die Zwischenablage kopiert werden.

Aus der Zwischenablage kann der Text dann wieder in den Visual Studio Code-Editor eingefügt werden.

Ach ja. Und wenn Ihr mit CodeBox in einem Google Blogger Blog Quellcode darstellen wollt müßt Ihr folgendes machen:

1. Eine Silverlight 4-Anwendung mit einer CodeBox herstellen.

2. Die TestPage.html zusammen mit der .xap-Datei auf einem Web-Server ablegen.

3. In der HTML-Ansicht des Post-Designers von blogger den folgenden Code an der Stelle einfügen, in der die CodeBox erscheinen soll:


Also ... viel Spaß mit CodeBox.


Bitte beachtet noch folgendes, wenn Ihr CodeBox in Eurer Website nutzen wollt:
Der HyperlinkButton mit dem Namen hbDownload darf weder vollständig entfernt, noch darf der dort gesetzte Link auf die originale Download-Quelle in der Expression Gallery entfernt werden.

Keine Kommentare:

Kommentar veröffentlichen