admtech
Goto Top

Entwicklertagebuch: Codeblöcke auf unseren Seiten

Hallo Administrator User,

Unsere Codeblöcke werden ab sofort anders dargestellt.
Mit  werden Codeblöcke erstellt

 Mit  werden Variablen, Funktionen, Konstanten etc. farblich hervorgehoben.

In Zukunft kommen neue Typen dazu. Hier ein Beispiel für ein PHP-Script:
<?php
if (extension_loaded("sodium")) {  
    $constants = get_defined_constants(true);
    var_dump([
        SODIUM_LIBRARY_VERSION,
        get_extension_funcs('sodium'),  
        $constants["sodium"]  
    ]);
} else {
    // sodium not found
}

Mit  werden die Zeilennummern komplett ausgeblendet.
Egal ob der Text mehrere Zeilen hat.


Die Codeblöcke können nun direkt per Copy&Paste kopiert werden. Das zusätzliche Fenster für den Quellcode fällt weg. Die Zeilennummern werden erst dann eingeblendet, wenn ein Codeblock aus mehr als nur einer Zeile besteht. Die Zeilen werden ab sofort nicht mehr Zwangsumgebrochen, es erscheint bei Bedarf eine Scrollbar.

Diese Änderung sind ein erster Teil der neuen Version unserer Seite. Später kommt noch die automatische Erkennung von mehreren Scriptsprachen und das Einfärben bzw. das Erkennen von Variablen, Konstanten etc. dazu.

Dabei soll unser Text-Parser (das ist die Programmierung, die unsere Formatierungen in eine lesbare Seite umwandelt) anhand von z.B. "<?php" oder "/bin/bash" Kürzeln in den Codeblöcken die Skripte automatisch erkennen, ohne das man den Typ angeben muss.

Die Abstände der Codeblöcke zum Text braucht ihr nicht im Editor per 'Return' angeben, dass wird nun per CSS gemacht. Evtl müsst ihr eure Texte oder Anleitungen dafür etwas anpassen.

Ich hoffe die Änderungen gefallen und freue mich, wie immer, auf Euer Feedback

Gruß
Frank

Content-Key: 536281

Url: https://administrator.de/contentid/536281

Ausgedruckt am: 19.03.2024 um 11:03 Uhr

Mitglied: tomolpi
tomolpi 17.01.2020 um 19:40:01 Uhr
Goto Top
Zitat von @admtech:
Ich hoffe die Änderungen gefallen und freue mich, wie immer, auf Euer Feedback
Das gibt's hier schon: Update der Codeblöcke
Gruß
Frank
LG
tomolpi
Mitglied: Frank
Frank 17.01.2020, aktualisiert am 18.01.2020 um 03:22:05 Uhr
Goto Top
@142232

Hm, also die Zeilennummern waren in der Hinsicht hilfreich das man dem TO eine Zeilennummer nennen konnte wenn man sich auf etwas bezog.

Laut meiner Analyse hat das aber kaum einer genutzt (unter 1% Erwähnungen in den Kommentaren). Der Nachteil mit Zeilennummer war, dass man den Code oder Text nicht einfach per Copy&Paste direkt aus dem Beitrag kopieren konnte. Das hat mich persönlich mehr gestört, als auf die Zeilennummer zu verweisen. Man musste immer erst den Quellcode Editor öffnen um es gescheit zu kopieren (gerade wenn man Anleitungen nachvollziehen wollte).

Zusätzlich geht jetzt ein STRG+A nicht mehr um den gesamten Code aus dem Quellcode-Fenster auszuwählen und zu kopieren

Das ist richtig, da soll später ein Popover-Menü erscheinen (wenn man über den Codeblock fährt), wo man den gesamten Code per klick kopieren kann.

@Lochkartenstanzer

Sinnvoller wäre es vielleicht, einen Button zum Ein- und Ausblenden von Nummern zu machen.

Evtl. baue ich in das Popover-Menü eine zusätzliche Ansicht mit Zeilen ein. Ich schau mal ob es passt.

Gruß
Frank
Mitglied: Lochkartenstanzer
Lochkartenstanzer 18.01.2020 aktualisiert um 00:48:01 Uhr
Goto Top
Warum ihr jetzt einen extra Beitrag dafür aufgemacht und nicht den Hauptbeitrag dazu genommen habt, ist mir ein Rätsel.

Frank



Ich habe übrigens nur auf die Frage geantwortet, war aber irgendwie der Meinung, daß das egentlich ein Kommentar hierzu war, weil ich übersehen habe, daß das eine Frage und nicht ein Kommentar war.

lks
Mitglied: 142232
142232 18.01.2020 aktualisiert um 08:57:24 Uhr
Goto Top
Warum ihr jetzt einen extra Beitrag dafür aufgemacht und nicht den Hauptbeitrag dazu genommen habt, ist mir ein Rätsel.
Der Wissensbeitrag dazu ist an mir vorbei gegangen, sorry hatte ich nicht gesehen.
[OFFTOPIC]
Aber noch kurz zu was anderem was mir neuerdings übelst aufstößt, und auch ein paar meiner Kollegen:

Normalerweise lasse ich hier ja den Werbeblocker ausgeschaltet um das Forum zu unterstützen, aber seitdem jetzt neuerdings auf jeder Detailseite unten ein selbst laufendes Video von der Platform *.pepsia.com abläuft bin ich gezwungen ihn einzuschalten, erstens weil das automatische Gezucke tierisch nervt und vom Beitrag ablenkt, zweitens erheblich zusätzlichen Traffic erzeugt (gerade Mobil gehen da in ein paar Sekunden 50-100MB flöten, in DE ist Traffic ja nicht gerade umsonst), und drittens die Seite auch verlangsamt. Ab und zu könnte ich das ja verstehen, aber bei jedem Beitrag immer und immer wieder, sehe ich persönlich nicht ein.
[/OFFTOPIC]
Mitglied: Frank
Frank 19.01.2020 aktualisiert um 12:24:24 Uhr
Goto Top
Hi,

Aber noch kurz zu was anderem was mir neuerdings übelst aufstößt, und auch ein paar meiner Kollegen:

hier und da teste ich mal neue Werbemöglichkeiten. Aber du hast recht, die Pepsia-Videos stören den Lesefluss, verbraucht viel Traffic und bringt im Gegenzug auch nicht viel ein. Daher habe ich sie wieder deaktiviert. Danke für Dein Feedback und nicht vergessen, den Werbeblocker wieder auszuschalten face-wink

Davon lebt die Seite!

Gruß
Frank
Mitglied: 142232
142232 19.01.2020 aktualisiert um 12:56:41 Uhr
Goto Top
Zitat von @Frank:

Daher habe ich sie wieder deaktiviert.
TOP 👍 👍
Danke für Dein Feedback und nicht vergessen, den Werbeblocker wieder auszuschalten face-wink
Done! Ebenso herzlichen Dank für das prompte Reagieren.

Gruß s.
Mitglied: rubberman
rubberman 19.01.2020 um 13:03:15 Uhr
Goto Top
Hallo Frank,

wie von anderen schon geschrieben, waren die Zeilennummern recht gut um sich auf bestimmte Zeilen beziehen zu können. Was ich aber noch schlimmer finde, ist, dass lange Zeilen nun einfach umgebrochen werden, ohne dass erkennbar ist, dass sie zusammen gehören.

Grüße
Steffen
Mitglied: colinardo
colinardo 19.01.2020, aktualisiert am 20.01.2020 um 12:57:22 Uhr
Goto Top
Zitat von @rubberman:
wie von anderen schon geschrieben, waren die Zeilennummern recht gut um sich auf bestimmte Zeilen beziehen zu können. Was ich aber noch schlimmer finde, ist, dass lange Zeilen nun einfach umgebrochen werden, ohne dass erkennbar ist, dass sie zusammen gehören.
Dito da stimme ich absolut zu, macht das direkte Lesen und Interpretieren längerer Codes jetzt ziemlich unangenehm ohne Umkopieren in den Editor seiner Wahl.

So was in der Art wie CodeMirror würde ich mir hier wünschen.

Grüße Uwe
Mitglied: Frank
Frank 22.01.2020 aktualisiert um 23:03:20 Uhr
Goto Top
Hallo,

auf vielseitigen Wunsch habe ich die neuen Codeblöcke um Zeilennummern erweitert. Hat ein Codeblock mehr als 1 Zeile, werden die Zeilennummer automatisch angezeigt. Mit kann man die Zeilennummern wieder komplett ausblenden. Ich habe den Originaltext oben dementsprechend geändert.

Auch werden die Zeilen nicht mehr Zwangsumgebrochen. Es erscheint bei Bedarf nun eine Scrollbar.

@colinardo CodeMirror ist leider zu langsam. Gerade bei großen Anleitungen (wie z.B. Deine) würde das Javascript von CodeMirror die Seite extrem verlangsamen, da die Autoren der Beiträge oft viele Codeblöcke benutzen.

Ich denke mit der Zeit bekommen wir eine vergleichbare Lösung, die viel schneller ist, selbst hin.

Danke für Euer Feedback face-smile

Gruß
Frank
Mitglied: colinardo
colinardo 23.01.2020 aktualisiert um 11:41:54 Uhr
Goto Top
Servus Frank,
so wie es jetzt ist reicht das ja auch, aber leider wird jetzt beim Copy n' Paste in den Boxen mit der Zeilennummerierung zwischen jeder Code-Zeile wieder eine Leerzeile eingefügt.

Habe schon ein einige Beschwerden bekommen ala dein "Code funktioniert doch nicht", eben aus dem Grund der zusätzlich generierten Leerzeilen beim Kopieren (bei den jeweiligen Codes war das relevant).

Grüße Uwe
Mitglied: colinardo
colinardo 23.01.2020 aktualisiert um 11:25:04 Uhr
Goto Top
Aaargh....Die Codeblöcke in den PNs sind ebenfalls unvollständig, Code wird unvollständig angezeigt und nicht scrollbar. Das bekommen die TOs nicht gebacken das da raus zu kopieren.
Mitglied: Frank
Frank 23.01.2020 aktualisiert um 11:51:18 Uhr
Goto Top
Hi,

@colinardo,

ruhig Blut. Das mit den Leerzeichen habe ich gerade behoben. Ich hatte es auf MacOS getestet und da gab es die Leerzeichen nicht (ich entwickle die Seite auf einem Mac). Wenn so ein Fehler auftritt, gleich eine PN schreiben und ich behebe das.
Auch sollten die PNs jetzt wieder funktionieren. Bitte mal prüfen!

Die Codeblöcke in den PNs sind ebenfalls unvollständig, Code wird unvollständig ...

Was meinst du denn damit genau? Ich habe es gerade getestet und die Codeblöcke in den Mails werden richtig dargestellt (mit Scrollbalken, wenn sie zu groß für die sichtbare Fläche sind). Da sich das CSS geändert hat, bitte mal den Cache löschen (oder shift-Reload drücken).

Es ist nicht einfach für so viele Systeme und Browser die optimale Code-Lösung zu finden face-smile

Gruß
Frank
Mitglied: colinardo
colinardo 23.01.2020 aktualisiert um 12:07:31 Uhr
Goto Top
Zitat von @Frank:

Hi,

@colinardo,

ruhig Blut.
Kein Problem, ist wohl falsch rübergekommen, das war nicht bös gemeint face-smile.
Das mit den Leerzeichen habe ich gerade behoben. Ich hatte es auf MacOS getestet und da gab es die Leerzeichen nicht (ich entwickle die Seite auf einem Mac). Wenn so ein Fehler auftritt, gleich eine PN schreiben und ich behebe das.
Auch sollten die PNs jetzt wieder funktionieren. Bitte mal prüfen!
Funktioniert ! Merci.
Die Codeblöcke in den PNs sind ebenfalls unvollständig, Code wird unvollständig ...

Was meinst du denn damit genau? Ich habe es gerade getestet und die Codeblöcke in den Mails werden richtig dargestellt (mit Scrollbalken, wenn sie zu groß für die sichtbare Fläche sind). Da sich das CSS geändert hat, bitte mal den Cache löschen (oder shift-Reload drücken).
Also jetzt gehen die auch wieder für den User "nutzbar", vorher war der DIV rechts abgeschnitten und der Code nicht umgebrochen (wahrscheinlich doch der Cache).
Was hier jedoch fehlt (OS Windows 10 / Browser Firefox 72.0.2) ist deine genannte Scrollbar und der graue Hintergrund und die Abstände (cache vollständig gelöscht)

Hier das Bild davon

screenshot

Es ist nicht einfach für so viele Systeme und Browser die optimale Code-Lösung zu finden face-smile
Verstehe ich vollkommen.
Mitglied: Lochkartenstanzer
Lochkartenstanzer 23.01.2020 um 12:03:33 Uhr
Goto Top
Zitat von @Frank:

Es ist nicht einfach für so viele Systeme und Browser die optimale Code-Lösung zu finden face-smile

.Mach doch für den Codeblock einfach einen downloadlink, der den Teil im Codeblock direkt als txt herunterladen läßt. Sollen doch die "Kopierer" das direkt aus Notepad herauskipieren, wenn sie nur einen Teil brauchen. face-smile


So
Mitglied: Frank
Frank 23.01.2020 aktualisiert um 12:15:43 Uhr
Goto Top
Hi,

@Lochkartenstanzer
ich hatte ja schon geschrieben, in der neuen Version ist ein Popover mit "Alles kopieren" und "Drucken" dabei.
Das hier in die alte Version einzubauen, wäre zu aufwendig.

@colinardo
Laut Screenshot ist das aber immer noch nicht richtig. Die Codeblöcke werden überall gleich dargestellt. Es gibt keinen Unterschied zwischen der Detailseite und einer PN. Um den Codeblock sollte eine Farbe sein und die Scrollbalken sollte bei Code-Überlänge angezeigt werden. Ich melde mich per PN.


Gruß
Frank
Mitglied: aqui
aqui 23.01.2020 um 12:40:20 Uhr
Goto Top
Mit kann man die Zeilennummern wieder komplett ausblenden.
Interessanterweise funktioniert das auch mit "type=plain" ! Bug or Feature ? face-wink
Mitglied: Frank
Frank 23.01.2020 aktualisiert um 14:02:35 Uhr
Goto Top
Zitat von @aqui:

Mit kann man die Zeilennummern wieder komplett ausblenden.
Interessanterweise funktioniert das auch mit "type=plain" ! Bug or Feature ? face-wink

Feature, da ich mich (und andere hier) manchmal verschreibe face-smile

Du solltest aber den Command: "typ=" nehmen (ohne e).

Ihr solltet alle immer den Command: "type=" nehmen face-smile

Gruß
Frank
Mitglied: aqui
aqui 23.01.2020 um 12:45:58 Uhr
Goto Top
Ich auch...man driftet dann ins Englische und es kommt automatisch aus den Fingern. face-wink
Mitglied: colinardo
colinardo 23.01.2020 aktualisiert um 12:48:39 Uhr
Goto Top
Du solltest aber den Command: "typ=" nehmen (ohne e).
Denglisch? Parametername auf Deutsch Parameterwert auf Englisch oder wie jetzt face-smile?
Mitglied: Lochkartenstanzer
Lochkartenstanzer 23.01.2020 um 12:56:53 Uhr
Goto Top
Zitat von @Frank:

Zitat von @aqui:

Mit kann man die Zeilennummern wieder komplett ausblenden.
Interessanterweise funktioniert das auch mit "type=plain" ! Bug or Feature ? face-wink

Feature, da ich mich (und andere hier) manchmal verschreibe face-smile
Du solltest aber den Command: "typ=" nehmen (ohne e).

In den FAQs steht aber was anderes. face-smile

lks
Mitglied: aqui
aqui 23.01.2020 um 12:59:52 Uhr
Goto Top
Stimmt auch wieder ! Dann verhalten wir uns im Gegensatz zu dem was @Frank uns sagt mit type also genau Foren Regel konform ! face-big-smile
Mitglied: Frank
Frank 23.01.2020 aktualisiert um 14:00:14 Uhr
Goto Top
Wenn das Euer einziges Problem ist face-wink

Stimmt, man sollte type= nehmen. Wir wollen ja nicht in die Denglish-Falle tappen. Ich korrigiere es gleich oben. Letztendlich egal, typ oder type - es wir immer beides funktionieren face-smile

Gruß
Frank
Mitglied: DerWoWusste
DerWoWusste 24.01.2020 aktualisiert um 15:11:16 Uhr
Goto Top
Hi Frank.

Du schreibst
Der Nachteil mit Zeilennummer war, dass man den Code oder Text nicht einfach per Copy&Paste direkt aus dem Beitrag kopieren konnte
Das konnte man mit einem weiteren Klick. Beispiel: Bitlocker-Verschlüsselung und -Monitoring ohne MBAM - da klicke ich auf "Quelltext" neben dem Codeblock und dann kann ich sowohl Zeilen selektieren, als auch CTRL-A nutzen - Letzteres geht jetzt nicht mehr - schade.

Beispiel: Upgrade auf Windows 10 - Phase Safe OS - versuch da mal, das Logfile schnell zu kopieren um es ins lokale notepad++ einzufüfgen - das nervt ein wenig.
Mitglied: Frank
Frank 24.01.2020 aktualisiert um 15:06:44 Uhr
Goto Top
@DerWoWusste

Das konnte man mit einem weiteren Klick ...

Das hatte ich oben bereits mehrfach erwähnt, in der neuen Version (V6) gibt es ein Popover mit den Punkten "Alles kopieren" und "Drucken". Hier in die alter Version (V5.8) werde ich das nicht mehr integrieren. Außerdem kommt es eher vor, dass man Commands oder kurze Teile kopiert z.B. um eine Anleitung nachzuvollziehen, als das man ganze Logfiles kopiert. Aber wie gesagt, in der nächsten Generation von unserer Seite ist "Alles kopieren" wieder mit dabei. Die eine Idee mit dem Download als Text fand ich auch gut.

Gruß
Frank
Mitglied: DerWoWusste
DerWoWusste 24.01.2020 um 15:11:04 Uhr
Goto Top
Entschuldige, das hatte ich nicht begriffen face-plain
Mitglied: Frank
Frank 24.01.2020 um 15:22:07 Uhr
Goto Top
Gar kein Problem! Evtl hatte ich es auch schlecht formuliert face-wink

Gruß
Frank
Mitglied: 142232
142232 26.01.2020 aktualisiert um 13:22:20 Uhr
Goto Top
Also was mir noch aufgefallen ist (nicht weiter schlimm, nur ein Hinweis), ist das einzeilige Codeblöcke komplett markiert werden wenn man sie nur ein einziges mal anklickt selektives Kopieren wie vorher ist dann nicht möglich.
Mitglied: Frank
Frank 07.02.2020, aktualisiert am 25.02.2020 um 10:56:12 Uhr
Goto Top
Hi @142232,

das ist eher ein Feature bzw. ein Test. Meist sind Einzeiler Bash oder Commando Befehle die damit sofort markiert werden. Damit teste ich, ob in der neuen Version Einzeiler Code sofort markieren sollen, oder ob man, wie bei Mehrzeiler, selektiv auswählen kann (ist im CSS nur ein einziger Befehl, um das zu ändern). Was meint ihr?

Gruß
Frank
Mitglied: 142232
142232 07.02.2020 aktualisiert um 07:27:21 Uhr
Goto Top
Zitat von @Frank:

Hi @142232,

das ist eher ein Feature bzw. ein Test. Meist sind Einzeiler Bash oder Commando Befehle die damit sofort markiert werden. Damit teste ich, ob in der neuen Version Einzeiler Code sofort markieren sollen, oder ob man, wie bei Mehrzeiler, selektiv auswählen kann (ist im CSS nur ein einziger Befehl, um das zu ändern). Was meinst ihr?
Ach so, hmm also mich irritiert es eher, ich bin gewohnt wenn sich alles so verhält wie man es von überall gewohnt ist, da denkt man im ersten Augenblick, shit was ist jetzt wieder kaputt. Just my 2 cent.