Orlok: Darstellung von Code im Wiki

Beitrag lesen

Hallo

Also ich verwurste das jetzt mal in chronologischer Reihenfolge in einem Beitrag. ;-)


Zunächst mal @Der Martin:

Dafür. Ob es jetzt den Lesefluss hemmt, sei dahingestellt, das ist mir zumindest noch nicht aufgefallen. Aber die abweichende Hintergrundfarbe lässt die Bausteine tatsächlich wie Klötzchen im Text erscheinen, und das wirkt sich IMO negativ auf das Schriftbild insgesamt aus. Ich sehe es "nur" als ästhetischen Aspekt, stimme aber zu, dass die Hintergrundfarbe nicht angefasst werden sollte.

Definitiv. Die ästhetische Betrachtung ist auch in mein Urteil eingeflossen. Hatte mich da etwas unpräzise ausgedrückt.

Technisch gesehen wäre hier background-color: transparent; richtiger.

Jep. Ist zwar nur eine provisorische Lösung, so dass es hier eigentlich egal wäre, aber ich habe es auf der Seite trotzdem mal verbessert.

Mir fällt außerdem auf, dass die Schrift der Code-Fragmente größer aussieht als die des Fließtexts.

Die Schrift selbst hatte ich da ja gar nicht angerührt, die sollte also dieselbe sein die dir auch auf den anderen Seiten im Wiki angezeigt wird, nur halt ohne Hintergrundfarbe.

Feste Schriftbreite, evtl. fett, andere Schriftfarbe muss vielleicht gar nicht sein.

Was das „fett“ und den Verzicht auf eine andere Schriftfarbe angeht, habe ich den Artikel jetzt nochmal überarbeitet, so dass nun die ersten Absätze sowohl in schwarzer Farbe als auch mit font-weight: bold versehen sind. Im Anschluss an das zweite Code-Beispiel habe ich dann nochmal einen Absatz ohne diese Angabe aber auch in schwarzer Farbe eingebaut.

Da müsste man mal ein paar Beispiele ausprobieren und zur Diskussion stellen.

Du sagst es. :-D

Deine beiden Vorschläge habe ich wie beschrieben ja nun schonmal in den Artikel eingebaut. Mehr dazu weiter unten in diesem Beitrag.


Nun @Auge:

Nach dem Besuch der verlinkten Seiten gehe ich davon aus, dass du nicht die Codeblöcke, sondern Codestücken innerhalb des normalen Fließtextes meinst.

Ja. Ich hoffte, das wäre bereits in meinem OP deutlich geworden, als ich von <code> schrieb, der von Fließtext umgeben ist. In den Codeblöcken der Beispiele wird der Code ja üblicherweise mit <source> bzw. <nowiki> ausgezeichnet.

Die nur mit Schriftart und -farbe vom Fließtext abzusetzen, halte ich für eine gute Idee. Die Hintergrundfarbe kam mir auch immer als störend, den Text zerhackstückelnd vor.

Sehe ich auch so und ich glaube, zumindest in diesem Punkt herrscht wohl soweit Einigkeit. Jedenfalls wenn man die bisherigen Antworten hier im Thread als Grundlage nimmt. ;-)


Und schließlich @Matthias Scharwies:

Einige der <code>-Schnipsel haben Links, die idealerweise mit color: #2673bf; eingefärbt sind, deshalb sollte man für nicht verlinkte irgendeine andere (blassere oder dunklere) Farbe nehmen.

Das habe ich bei meinen Veränderungen berücksichtigt. Ich habe in dem Artikel am Anfang den Link zu stopPropagation mal in <code> eingeschlossen. Fraglich ist halt, ob die hellblaue Farbe und der angepasste Cursor als Erkennungszeichen für Links im Wiki wirklich ausreichen, oder ob es nicht vielleicht doch besser wäre text-decoration: underline einzustellen!?


Um nun noch einmal auf Martins Feststellung zurückzukommen:

Da müsste man mal ein paar Beispiele ausprobieren und zur Diskussion stellen.

Als ich im OP fragte, „Welche Form der Darstellung würdet ihr euch wünschen?“, hatte ich eigentlich gehofft, dass vielleicht der ein oder andere die Initiative ergreift, sich einen beliebigen Wiki-Artikel raussucht, etwas bastelt und dann das Ergebnis hier zur Diskussion stellt, nach dem ich in dieser Hinsicht mit gutem (ok, mittelmäßigem) Beispiel vorangegangen bin. ;-)

Jedenfalls habe ich meinen Artikel zu stopImmediatePropagation nun wie gesagt nochmals überarbeitet.

Einige der Veränderungen habe ich in diesem Beitrag ja nun schon beschrieben. In den letzten 3 Absätzen habe ich darüber hinaus nun verschiedene Schriftfarben ausprobiert, nämlich einmal ein dunkles Blau [#191970], ein dunkles Grau [#5C5C5C] und schließlich im letzten Absatz ein helleres, etwas blasseres Blau [#36648B], wobei ich in diesem letzten Absatz im Gegensatz zu den anderen Absätzen auch eine Angabe zu font-family gemacht habe, nämlich Consolas, monospace.

Inwiefern die Schrift bei euch auch tatsächlich angezeigt wird oder ob dies überhaupt eine geeignete Wahl ist, kann ich nicht sagen. Mit Schriften kenne ich mich nicht so gut aus. Bei mir wird die Schrift jedenfalls angezeigt und ich finde sie schaut besser aus als die Defaultschrift. Aber wie gesagt, was das angeht, bin ich nicht wirklich der richtige Ansprechpartner. ;-)

Als ich die Artikel zum Thema Object.prototype geschrieben habe, hatte ich auf Code-Auszeichnung im Fließtext nahezu komplett verzichtet. Wer möchte kann sich also gerne einen dieser Artikel raussuchen und damit ein wenig experimentieren.

Ihr müsst dazu nur auf die entsprechende Seite gehen und oben im Menü [Bearbeiten] auswählen. Dann könnt ihr in der Textarea an passender Stelle ein <code style="..."> ... </code> einfügen, die Seite in der Vorschau betrachten und sie bei Gefallen abspeichern und hier verlinken.

Würde mich über weitere Beispiele freuen! :-)

Viele Grüße,

Orlok

--
„Das Wesentliche einer Kerze ist nicht das Wachs, das seine Spuren hinterlässt, sondern das Licht.“ Antoine de Saint-Exupéry