Da hab ich schon lange nichts mehr ver\u00f6ffentlicht, und dann ist der erste neue Beitrag auch noch so etwas banales wie dieser kleine Schnipsel aus der Praxis… Die L\u00f6sung des Problems, das mich seit einiger Zeit umgetrieben hat, wollte ich aber nicht f\u00fcr mich behalten.<\/p>\n
Folgende Problemstellung: Gegeben ist eine Website, deren Inhalte in weiten Teilen vorgegeben ist. Es handelt sich im weitesten Sinne um eine Landingpage, eine \u00dcbersichtsseite, 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\u00f6glichst ohne jedesmal das HTML direkt bearbeiten zu m\u00fcssen. Jetzt k\u00f6nnte man nat\u00fcrlich an so etwas wie iFrames<\/a> denken oder daran, dass man mit dem <\/p>\n Wohlan denn, frisch ans Werk. Als einfaches Grundger\u00fcst sieht die gesamte Implementierung so aus:<\/p>\n.load()<\/code>-Befehl externe .html<\/code>-Dateien einbinden k\u00f6nnte. Damit m\u00fcsste man sich aber nach wie vor mit l\u00e4stigem html-gecode herumschlagen. Eigentlich, so dachte ich, m\u00fcsste sich das doch auch mit jQuery<\/a> l\u00f6sen lassen und da ich dar\u00fcber hinaus gro\u00dfer Markdown-Fan ((F\u00fcr 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\u00fcr Laien verst\u00e4ndliche Syntax aufweist. Au\u00dferdem handelt es sich um nichts anderes als einfache Textdateien, die schnell und einfach auch von Mobilger\u00e4ten aus synchronisiert werden k\u00f6nnen, ohne gro\u00dfe Datenmengen herumschieben zu m\u00fcssen.)) geworden bin, lag es nahe, als Quelle .md<\/code>-Dateien einzubinden und diese parsen zu lassen, sodass am Ende ohne gro\u00dfen Aufwand eine wohlformatierte Infobox steht.<\/p>\nUmsetzung<\/h3>\n
<!DOCTYPE html>\n<html lang=\"de\">\n <head>\n <meta charset=\"utf-8\">\n <title>Testseite<\/title>\n\n <!-- Einbindung jQuery -->\n <script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.11.2\/jquery.min.js\"><\/script>\n\n <!-- Einbindung marked -->\n <script src=\"scripts\/marked.js\"><\/script>\n \n <!-- Eigentliches Script -->\n <script type=\"text\/javascript\"> \n \n var inhalt;\n $.get('news.md', function (data) {\n inhalt = data;\n }, 'text');\n\n $(function () {\n document.getElementById('content').innerHTML = marked(inhalt);\n }); \n <\/script> \n \n <\/head>\n <body>\n \n <!-- Das div-Element, das den Inhalt darstellen soll -->\n <div id=\"content\">\n \n <\/div>\n \n <\/bod>\n <\/html><\/pre>\n