Web Blog mit Syntax Highlighter

Tutorial zur Integration von Syntax Highlighter in Asp.Net master page

von: Andreas Schimböck

In diesem Artikel beschreibe ich, wie man in einer ASP.NET Webseite einen Syntax Highlighter implementieren kann.



Demo

Das Ziel ist, kurze Code Beispiele in der Webseite einzufügen und mit Hilfe von Syntax Highlighting ähnlich wie im Entwicklungstool lesbar darzustellen.

Dazu verwende ich den auf JavaScript aufbauenden Syntax Highlighter von Alex Gorbatchev.

Anmerkungen oder Fragen zum Artikel richte bitte an meine Facebook Seite (rechts oben). Auf Anfrage stelle ich gerne ein vollfunktionsfähiges Demoprojekt zur Verfügung.

Der Source Code wird auf der Seite hervorgehoben:

using System;

namespace HelloAndreas
{
    class Program
    {
        static void Main(string[] args)
        {
            Console.WriteLine("hello!");
            Console.WriteLine("have a nice day with www.schimboeck.com");

            Console.ReadLine();
        }
    }
}
Buchtipps

Vorbereitung

Der Syntax Highlighter besteht aus mehreren JavaScript Bibliotheken und Cascading Stylesheet Dateien, diese müssen in das ASP.NET Web Projekt Eingebungen werden.

Zur Implementierung meiner Anwendungen verwende ich Visual Studio Community, diese Edition enthält den vollständigen Funktionsumfang und kann kostenlos verwendet werden (Lizenzbedingungen beachten).

Am Beginn wird Visual Studio geöffnet, um ein neues Projekt zu erstellen. Als Projektvorlage wird ASP.NET-Webanwendung ausgewählt. Als Projektname wird SyntaxHighlighterDemo festgelegt.

Im nächsten Schritt werden die erforderlichen NuGet-Pakete in das Projekt eingefügt. Wählen Sie dazu im Kontextmenü des Projekts den Menüpunkg NuGet-Pakete Verwalten aus. Das Paket SyntaxHighlighter.NuGet 3.0.83.1 muss installiert werden. Dem Web Projekt werden im Ordner Scripts/SyntaxHighlighter die erforderlichen JavaScript- bzw. Stylesheet Dateien hinzugefügt. Außerdem muss noch das Paket jQuery installiert werden.

Für verschiedene Programmiersprachen und Code Typen (Asp.Net, Xml, C#,...) werden unterschiedliche Scripts bereitgestellt. Es sollten aber unbedingt nur jene Scripts ausgewählt werden, die man tatsächlich benötigt. Anderenfalls könnte das negative Auswirkungen auf die Ladezeiten der Webseite nach sich ziehen.

Jetzt muss noch die neue ASP.NET Seite in das Projekt eingefügt werden (Projektmappen-Explorer, Kontextmenü Projekt SyntaxHighlighterDemo, Hinzufügen, Web Form). Im ersten Schritt wird eine einfache Seite ohne Seitenvorlage eingefügt. Ich benenne diese SimpleDemoPage.aspx und lege diese als Startseite in meinem Projekt fest.

Referenzen einfügen

Zuerst müssen die erforderlichen CSS und JavaScript Dateien in der Seite referenziert werden. Diese werden in das head tag der Seite  eingefügt.
Zusätzlich wird eine Referenz auf die JavaScript Datei jquery-2.2.0.js im head benötigt.
 

Syntax Highlighter Initialisieren

Damit der Syntax Highlighter richtig arbeiten kann, muss er noch durch ein paar JavaScript Befehle initialisiert werden.

Code einfügen

Damit der Code wie gewünscht in der Webseite mit Hilfe des Syntax Highlighter dargestellt wird, muss dieser innerhalb des pre tags eingefügt werden. Als Style Sheet Klasse wird die erforderliche brush angegeben, hier im Beispiel ist das brush: csharp, für die Darstellung von C# Code.
        

            using System;
            namespace HelloAndreas
            {
                class Program
                
                static void Main(string[] args)
                {
                    Console.WriteLine("hello!");
                    Console.WriteLine("have a nice day with www.schimboeck.com");

                    Console.ReadLine();
                }
            }