Da hab ich schon lange nichts mehr veröffentlicht, und dann ist der erste neue Beitrag auch noch so etwas banales wie dieser kleine Schnipsel aus der Praxis… Die Lösung des Problems, das mich seit einiger Zeit umgetrieben hat, wollte ich aber nicht für mich behalten.

Folgende Problemstellung: Gegeben ist eine Website, deren Inhalte in weiten Teilen vorgegeben ist. Es handelt sich im weitesten Sinne um eine Landingpage, eine Übersichtsseite, die auf weitere Inhalte hinweisen und auf diese verlinken soll. So weit, so statisch. Auf dieser Seite soll aber ein Bereich aktuelle Neuigkeiten anzeigen. Und das möglichst ohne jedesmal das HTML direkt bearbeiten zu müssen. Jetzt könnte man natürlich an so etwas wie iFrames denken oder daran, dass man mit dem .load()-Befehl externe .html-Dateien einbinden könnte. Damit müsste man sich aber nach wie vor mit lästigem html-gecode herumschlagen. Eigentlich, so dachte ich, müsste sich das doch auch mit jQuery lösen lassen und da ich darüber hinaus großer Markdown-Fan ((Für alle, die bislang nichts mit Markdown zu tun hatten: Es handelt sich hierbei um eine Auszeichnungssprache, die die Arbeit mit HTML – und mit anderen Formaten – deutlich erleichtert, da sie eine auch für Laien verständliche Syntax aufweist. Außerdem handelt es sich um nichts anderes als einfache Textdateien, die schnell und einfach auch von Mobilgeräten aus synchronisiert werden können, ohne große Datenmengen herumschieben zu müssen.)) geworden bin, lag es nahe, als Quelle .md-Dateien einzubinden und diese parsen zu lassen, sodass am Ende ohne großen Aufwand eine wohlformatierte Infobox steht.

Umsetzung

Wohlan denn, frisch ans Werk. Als einfaches Grundgerüst sieht die gesamte Implementierung so aus:

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <title>Testseite</title>

    <!-- Einbindung jQuery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

    <!-- Einbindung marked -->
    <script src="scripts/marked.js"></script>
    
    <!-- Eigentliches Script -->
    <script type="text/javascript"> 
        
        var inhalt;
        $.get('news.md', function (data) {
            inhalt = data;
        }, 'text');

        $(function () {
            document.getElementById('content').innerHTML = marked(inhalt);
        });  
    </script> 
    
  </head>
  <body>
  
    <!-- Das div-Element, das den Inhalt darstellen soll -->
    <div id="content">
    
    </div>
  
  </bod>
 </html>

Betrachten wird den Code Schritt für Schritt:
In das Grundgerüst der Seite sind im head-Bereich die relevanten Skripte (jQuery und marked) eingebunden; bei marked handelt es sich dabei um einen Markdown-Parser, der lokal im Ordner scripts gespeichert ist:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
 
<script src="scripts/marked.js"></script>

In dem eigentlichen Skript wird zunächst eine Variable inhalt initialisiert, welche dann mit dem Inhalt der externen Datei news.md gefüllt wird:

var inhalt;
$.get('news.md', function (data) {
     inhalt = data;
}, 'text');

Dem im body-Bereich des Dokumentes platzierten Element mit der ID content müssen wir anschließend nur noch den Inhalt der Variable übergeben:

$(function () {
     document.getElementById('content').innerHTML = marked(inhalt);
});

Fertig. Jetzt sollte der Inhalt der .md-Datei korrekt formatiert angezeigt werden. Zum lokalen Testen sollte man allerdings Firefox verwenden, da Chrome die Einbindung lokaler Dateien anders handhabt. Wird die Seite von einem Server geladen, zeigt natürlich auch Chrome den Inhalt korrekt an.

Weiterführende Überlegungen

Anstatt nur ein einziges Element dynamisch erzeugen zu lassen, könnte man je nach Anwendungsbereich durchaus darüber nachdenken, mehrere div-Container dynamisch befüllen zu lassen. Auf diese Weise ließen sich etwa verschiedene Arten von Listen – ich denke etwa an Publikationslisten im akademischen Rahmen – oder andere Inhalte bequem auf einer Homepage verwalten ohne gleich ins Grundgerüst eingreifen zu müssen. Wird der Inhalt nicht unentwegt mehr, sodass die Seite immer länger werden würde, wie es etwa bei Blogs der Fall wäre, könnte man diese Methode als eine Art minimales CMS einsetzen.