Wäre es manchmal nicht ganz praktisch, wenn die Code-Felder im Forum den Quellcode etwas farbig hervorheben würden? Immerhin erhöht das die Lesbarkeit um einiges und erinnert ein wenig an Entwicklungsumgebungen zum Schreiben von Quellcodes. Jedenfalls dachte ich mir das schon lange und habe bereits Anfang 2008 eine Anfrage im Support-Forum gestellt. Es sah zwar damals so aus, als würde bald so ein Feature kommen, aber letztendlich hat sich da bis heute leider nichts getan.
Da ich selbst schon lange darauf warte und mehr oder weniger durch den Beitrag von Movert wieder daran erinnert wurde, machte ich mich erneut auf die Suche nach einer Lösung. Letztendlich bin ich nun kurz vor veröffentlichen der Lösung noch auf eine zweite gestoßen. Ich werde im Folgenden nun beide erklären, wobei die erste einen eigenen Webspace benötigt (die zweite nicht unbedingt). Ich selbst verwende im Moment die zweite Lösung, kann aber jederzeit die erste einschalten, welche ich auch zuerst eingebaut und getestet hatte. Die erste unterstützt u.a. noch das Generieren von Zeilennummern (für Forum irrelevant) und die zweite stellt mehrere Designs zur Auswahl.
Lest euch die Anleitung für die prettify.js von google-code-prettify durch. Sie erleichtert etwas den Einbau bzw. hilft auch dabei, falls ihr Syntax-Highlighting auf einer anderen Website als euer Forum einbauen wollt. Außerdem steht dort, wie auch Zeilennummern generiert werden können, was allerdings im Forum bereits automatisch durchgeführt wird und damit überflüssig ist.
Ladet euch dort also die Quelldateien für das Syntax-Highlighting herunter. Ihr erhaltet dabei eine tar.bz2-Datei, welche aber mit einem gängigen Packprogramm entpackbar sein sollte. Entpackt für euer Forum die Dateien aus dem src-Ordner in ein beliebiges Verzeichnis auf eurem externen Webspace. Wenn ihr die Dateien nicht für euer Forum sondern eine andere Website benötigt, könnt ihr auch stattdessen gleich die Dateien aus dem distrib -> google-code-prettify -Ordner verwenden. Diese sind in der Dateigröße kleiner und dafür aber nicht mehr so anpassbar.
Für den Einbau in euer Forum öffnet ihr noch die "prettify.js", um Anpassungen vorzunehmen, damit auch dort alles funktioniert. Ihr findet darin die Funktion prettyPrint, in welcher ihr an der hier mit dem Kommentar markierten Stelle:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
function prettyPrint(opt_whenDone) { function byTagName(tn) { return document.getElementsByTagName(tn); } // fetch a list of nodes to rewrite var codeSegments = [byTagName('pre'), byTagName('code'), byTagName('xmp')]; var elements = []; for (var i = 0; i < codeSegments.length; ++i) { for (var j = 0, n = codeSegments[i].length; j < n; ++j) {
/* * Diesen Kommentar entfernen und * Xobor-Anpassungen hier einfügen... */
// Anpassung für Xobor (Homepagemodules/Dynamicboard): if (codeSegments[i][j].tagName.toLowerCase() == 'code' && codeSegments[i][j].parentNode.parentNode.className == 'code') { codeSegments[i][j].className = 'prettyprint'; }
Die Funktion befindet sich im Moment in Zeile 1347, also ziemlich weit unten. Ergänzt sie also um die angegebenen Xobor-Anpassung und sorgt dafür, dass sie dann auf den Webspace hochgeladen wurde.
Jetzt müsst ihr nur noch im Forum irgendwo zwischen den HEAD-Tags (am besten kurz vor deren Ende) in der Oberen Leiste die Quellcodes zugänglich machen:
Statt den Beispiel-Links tragt ihr natürlich die Pfade zur prettify.css bzw. prettify.js auf eurem Webspace ein.
Als letztes sorgt ihr noch dafür, dass per Onload die Funktion prettyPrint(); aufgerufen wird.
Somit habt ihr nun den Einbau für das Syntax-Highlighting erledigt und könnt dies mit euren geposteten Quellcodes gleich testen.
Hinweis: Solltet ihr Probleme mit dem entpacken der Dateien oder dem Anpassen der prettify.js haben, dann könnt ihr auch das ZIP-Archiv im Anhang benutzen. Benutzt dort für euer Forum die Dateien aus dem prettify-Ordner, sie sind schon für das Forum angepasst und müssen nur noch hochgeladen und im Forum zugänglich gemacht werden. Für eure Website könnt ihr die verkleinerten Dateien aus dem prettify-Ordner verwenden. Sie enthalten nicht die nötige Anpassung für Xobor-Foren.
Diese Lösung ist vermutlich die etwas einfachere und benötigt auch nicht zwingend einen eigenen Webspace. Um zu entscheiden, welche die bessere ist, muss man einfach einmal beide ausprobieren.
Die zweite Variante basiert auf der highlight.js und benötigt keine Anpassungen mehr in den Dateien. Außerdem unterstützt sie sogar mehrere vorgefertigte Designs für das Highlighting. Diese könnt ihr alle auf der Beispielseite ansehen, wechseln könnt ihr ganz oben über die Style-Bezeichnungen.
Zum Einbau müsst ihr z.B. nur folgende Zeilen innerhalb der HEAD-Tags (am besten kurz vor deren Ende) in der oberen Leiste einbauen:
Das ist auch nochmals nachzulesen unter highlight.js: download. Wobei ich hier aber schon den Default-Style durch den Google-Code-Style ersetzt habe. Auf dieser Seite kann auch eine Auswahl getroffen werden, welche Sprachen überhaupt für Syntax-Highlighting zur Verfügung stehen sollen. Allerdings ist bei vielen die highlight.min.js bereits ausreichend, was der Auflistung unter Common: entspricht.
Solltet ihr alle verfügbaren Sprachen, also auch die unter Other:, verwenden wollen, könnt ihr auch statt alles auszuwählen und dann zu downloaden, die highlight.pack.js verwenden. Diese ist schon eine in der Größe redizierte Version, welche alle Sprachen enthält. Setzt einfach deren URL für den Einbau anstatt der highlight.min.js ein.
Die Styles ersetzt ihr analog dazu genauso. Tragt für die CSS-Datei statt dem Google-Code-Style wie hier oder dem Default-Style wie auf der Seite vorgegeben einfach die Adresse zu eurem gewünschten Style ein. Die gewünschte Adresse lautet: http://yandex.st/highlightjs/6.2/styles/STYLENAME.min.css Solltet ihr Probleme beim herausfinden der CSS-Dateinamen haben, dann schaut einfach unter http://softwaremaniacs.org/media/soft/highlight/styles/ vorbei. Dort sind alle Style-Dateien mit dem entsprechenden Namen gelistet. Aber beachtet, nicht diese Dateien direkt zu verwenden, sondern nur den Style-Namen bei der Yandex.st-URL vor .min.css einzutragen und dann diese Adresse zu verwenden.
Allerdings kann es nun passieren, dass die Zeilen nicht mehr zu den von Xobor generierten Zeilennummern passen und die Linien hinter der Schrift nun teilweise bedeckt werden. Falls ihr also nicht die Zeilennummern und Hintergrund-Linien im Code-Feld ausgeblendet habt, müsst ihr noch eine Kleinigkeit anpassen, um die Zeilen wieder zu den Code-Linien und dem Hintergrund anzupassen. Ergänzt die CSS-Anweisungen in eurem Forum einfach um folgenden Code um evtl. Design-Probleme wieder zu beheben:
1 2 3 4 5
/* CSS-Fix für Syntax-Highlighting: */ pre code { background-color:transparent !important; padding:inherit !important; }
Damit sollte der Einbau der zweiten Lösung nun auch abgeschlossen sein.
Hinweis: Wenn ihr eure Auswahl nicht auf Common: alleine oder alles inklusive Other: treffen wollt, dann müsst ihr eben den Download durchführen und die Dateien selbst hochladen. Auf die Einbindung in diesem Spezialfall werde ich jetzt aber nicht mehr genauer eingehen.
Für Spezialisten kann ich noch den SyntaxHighlighter vorschlagen. Er wird schon für viele andere bereits etablierte Projekte verwendet, ist jedoch beim Einbau etwas anspruchsvoller und nicht im Forum möglich, da er die automatische Erkennung von Quellcodes nicht unterstützt. Dafür kann er auch Zeilennummern generieren und sogar einzelne Zeilen hervorheben. Außerdem sind Links im Code sogar klickbar möglich und die Skripte können bei Bedarf erst nach Klick angezeigt werden, ähnlich einem Spoiler.
Ich wünsche euch dann noch viel Spaß mit den nun schön bunten Quellcodes...
florian-zier
hat folgende Dateien an diesen Beitrag angehängt
Hallo Movert, das wird nicht ohne Bruch der Kompatibilität funktionieren, da du ja den BBCode für CODE nicht ändern kannst. Man könnte nur neue BBCodes dafür um den vorhandenen CODE-Block einfügen.
Sollte sich aber Xobor einmal dafür entscheiden, dem CODE-Tag Parameter mitzugeben oder einen eigenen [.HTML]-Code zu definieren, dann könnte es Probleme mit deinen dann alten eigenen Tags geben. Es wird also wohl nicht ganz unmöglich sein, aber ich empfehle, es bei der automatischen Erkennung zu belassen. Zumal die eigentlich ganz zuverlässig funktioniert, zumindest wenn man auch etwas mehr als nur vielleicht zwei Zeilen hat.
Ansonsten ist eigentlich eine Kombination aus benanntem Spoiler und Code-Feld ganz gut. Hier mal ein Beispiel mit der prettify.js:
Dabei bin ich jetzt davon ausgegangen, dass du die erste Lösung oben verwendet hast, da eigentlich nur sie mit Onload beschrieben war. Infos zum Onload kannst du nochmals im Beitrag Onload im Body-Tag verkürzen nachlesen. Kommt eben darauf an, für welche Variante du dich entschieden hast...
habs in einem <script> tag im Head bereich drin (die Onload) und die Datei von einem Webspace Inkludiert, aber es funktioniert nicht. die CSS ist ebenfalls Includiert.
Naja, schwierig, jetzt eine Aussage zu treffen. Prüfe dein Forum mal darauf, ob Javascript-Fehler erzeugt werden, falls ja kommt die Ausführung evtl. nicht bis zur neuen Funktion. Achte außerdem darauf, dass du nicht mehrere Onloads definiert hast, sie könnten sich sonst evtl. überschreiben.
Alternativ bleibt dir noch, die andere Lösungs-Methode (auch ohne eigenen Webspace) auszuprobieren.
Wenn ein Bild über "Datei anhängen" mit in den Beitrag kommt, wird der Effekt des "Syntax-Highlighting" ausgeschaltet. Das mit [code)...[/code] umschlossene Script wird in Schwarz wiedergegeben. Ein Bild mit [img]..[/img] hat keinen Einfluss!
Hier ein Beispiel:
Bild über "Datei anhängen" eingefügt ([[File:1tys-57.jpg|none|fullsize]]).
<div class="mtextwrap"> <div class="spacer10"> <div class="mtext"> <div class="attention" style="margin-bottom: 10px;"> <span><img src="http://files.homepagemodules.de/b2001010/a_775_50353579.png" />Bitte beachten Sie,</strong> dass dies eine Vorschau ist!</span> Um den Beitrag zu speichern und zu veröffentlichen klicken Sie bitte auf Beitrag speichern. <script> $('#savepreview').click(function() { $('#submitform').submit(); }); </script> </div>
PS: Leider kann ich den Effekt nicht richtig wiedergeben, da im Augenblick der BB-Code [code]..[/code] bei Dir nicht funktioniert! Scheint alles zusammenzuhängen!?
Das [code]...[/code] nicht ging (#8), lag an der runden abschließenden Klammer hinter ...code). Hier hätte eine eckige Klammer hingemusst. Hatte zur Darstellung dann [pre]..[/pre] genommen. Damit man den BB-Codes darstellen kann, ohne gleich eine Tabelle drumherum zu bauen, füge ich immer [u][/u] mit ein. Der BB-Code wird dann nicht ausgeführt.
Also hier nochmal das farblose "Syntax-Highlighting ".
[[File:1tys-57.jpg|none|auto]]
1 2 3 4 5 6 7 8
<script> //Test - Mit "Datei anhängen" ist alles farblos! $('#savepreview').click(function() { $('#submitform').submit(); }); </script>
Nachtrag2: Habe etwas eingrenzen können.
Die folgenden Zeichen verursachen das Deaktivieren des "Syntax-Highlighting ", auch dann, wenn sie mit [code]...[/code] umschlossen werden!!! Wird das Bild nicht im Beitrag eingefügt und liegt im Anhang, funktioniert "Syntax-Highlighting " wieder!
Sehr komisch, wie ich sehe, reicht sogar bereits nur [[File: zu schreiben. Skriptfehler sind auch keine in der Konsole zu sehen.
EDIT:
Mir ist doch noch etwas aufgefallen was auch erklärt, warum es keine Script-Fehler gab. Die HTML-Struktur der Code-Boxen ändert sich, wenn eine Datei in den Beitrag eingebunden wird.
Struktur einer normalen Codebox:
div.bbcode_code div.codeblock div.codelines […] div.code pre code […]
Sobald jedoch eine Datei in den Beitrag eingebunden wird, fällt bei den Code-Boxen das letzte CODE-Tag weg. Der angezeigte Code steht dann bereits direkt innerhalb des PRE-Tags. Das Skript würde das Syntax-Highlighting jedoch nur auf das nicht vorhandene CODE-Tag anwenden. Da dies ein sehr ungewöhnliches Verhalten der BBCodes ist, würde ich aktuell eher sagen, dass ich daran nichts umbauen werde. Wenn die Code-Boxen die gleiche Struktur beibehalten würden, dann gäbe es keine Probleme.
Hallo Florian, vielleicht kann man das Xobor-Team dazu bringen den Code-Boxen eine gleiche Struktur beizubringen.
Ich habe einiges versucht, um einen Fehler durch die Strukturveränderung zu provozieren. Ich habe auch versucht mit [/pre], [pre],[code], [/code] etwas auszulösen. Noch nichts gefunden.
mit den BBCodes für code und pre wird es wohl nicht funktionieren. Die HTML-Struktur für die Codes würde trotzdem nie gleich werden. Es sieht aus, als würden bei Beiträgen mit [File: andere Ersetzungen für Foren-Codes als sonst verwendet, was ich so allerdings kaum glauben kann. Notwendig dürfte eine Struktur-Änderung doch eigentlich nicht sein. Das Einfügen von Dateien erzeugt nur einen vom Rest abgeschlossenen Link oder ein Thumbnail, welches Inhalte davor oder danach normalerweise nicht beeinflussen sollte.
Hast du Xobor bereits etwas gemeldet oder machst du das noch? Vielleicht ist ihnen das einfach nur noch nie aufgefallen, weil es sich optisch in einem unveränderten Forum nie wirklich bemerkbar macht. Würde jedenfalls nicht sagen, dass diese Unterschiede absichtlich entstehen sollen.
Hallo Florian, ich habe Xobor noch nichts geschrieben, wüste auch garnicht so recht, wie ich das Thema angehen sollte. Würde ich ein Fehler finden, der durch andere BB-Code oder andere Scripte verursacht wird, hätte ich einen Aufhänger.
Kannst Du das übernehmen? Ich finde das "Syntax-Highlighting" eine super Idee und es währe schade, wenn es nur zur Hälfte funktioniert!
Florians Forum
»
Webmaster
»
Xobor (Homepagemodules & Dynamicboard)
»
Funktionen & Template
»
Syntax-Highlighting - DO IT YOURSELF
14.03.2015 14:32 (zuletzt bearbeitet: 14.03.2015 17:46)
http://www.florian-zier.de
Thema drucken
prettify.zip
Antworten
