ZeilenNummer im laufen HTML anzeigen
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
-
Hallo,
kennt Ihr einen Trick, oder eine kleine SoftWare die es ermöglicht, in einer selbst geschriebenen HTML-Datei, wenn diese in den Browser übertragen ist, dort die ZeilenNummern unter der Cursor-Position zu ermitteln?
Danke -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
mukerbude schrieb:
Also jede andere Webseite, die ein Browser anzeigt, mit dem Unterschied, dass hier kein PHP oder eine andere Skriptsprache verwendet wird.
in einer selbst geschriebenen HTML-Datei, wenn diese in den Browser übertragen ist
mukerbude schrieb:
Zeilennummern unter der Cursorposition?
dort die ZeilenNummern unter der Cursor-Position zu ermitteln?
Meinst du, wenn du zum Beispiel einen Link mit dem Mauszeiger anwählst, dass dir angezeigt wird, in welcher Zeile vom HTML-Code das Anchor-Element definiert wurde? Du kannst die Entwicklertools nutzen (Rechtsklick --> Element untersuchen), aber damit kriegst du noch nicht die Zeilennummer.
Klingt für mich gerade stark nach einem XYProblem. https://xyproblem.info/
Was genau willst du erreichen, und wo kommst du gerade nicht weiter?
Beitrag zuletzt geändert: 23.3.2023 21:23:32 von witze-dschungel -
Ich schreibe eine HTML-Datei mit Phase 5
In Phase 5 kann man die Datei im ausgewählten Browser (Opera) starten, um zu kontrollieren ob alles passt
Im Browser möchte ich mit dem Cursor die entsprechende Zeile im Programm anzeigen, oder auch nur die ZeilenNummer angezeigt bekommen
Ich frage mich, warum jemand eine Frage negativ bewertet ?
Die negative Bewertung wurde zurückgenommen?! Seltsame Allüren.
- Im Prinzip würde mir so etwas simples genügen wie STRG-U, wenn dann im Quelltext die Zeile gekennzeichnet wäre, über der der Mauszeiger steht.
- Eine andere Methode wäre die ZeilenNummern im Browser anzeigen zu lassen, geht das?
In Opera habe dazu nichts gefunden.
- Da es sich ausschließlich um meine eigenen HTMLs handelt könnte ein Programm den Job erledigen … ?
- Im CSS gibt es eine Möglichkeit:
Durch Formatierung der <code> Elemente, die innerhalb eines präformatierten Blocks der Klasse sourcecode stehen. Mit der Pseudoklasse :before kann man Inhalte generieren, die vor dem eigentlichen Element angezeigt werden.
Leider zerstört bei 5 stelligen Zeilennummern deren Länge die Ansicht im Browser.
Beitrag zuletzt geändert: 24.3.2023 21:40:10 von mukerbude -
mukerbude schrieb:
Dazu ist mir eine keine Möglichkeit bekannt. Vielleicht wäre das über eine Browser-Erweiterung möglich, die sich entsprechend in Phase5 integriert.
Im Browser möchte ich mit dem Cursor die entsprechende Zeile im Programm anzeigen, oder auch nur die ZeilenNummer angezeigt bekommen
mukerbude schrieb:
Vielleicht ist es zu einfach gedacht, aber du könntest direkt die Entwicklerkonsole mit der Maus oder der Tastatur kombiniert mit der Editor-Suche nutzen.
Im Prinzip würde mir so etwas simples genügen wie STRG-U, wenn dann im Quelltext die Zeile gekennzeichnet wäre, über der der Mauszeiger steht.
1. Strg + Shift + C (Element untersuchen). Damit wird auch die aktuelle Mauszeigerposition in der Quelltextansicht berücksichtigt.
2. Strg + C, um den Code in der Entwickler-Konsole zu kopieren. Alternativ auf die Code-Zeile Rechtsklick --> Kopieren --> Element kopieren.
3. Alt + Tab, um zum Phase 5 Editor zu kommen, oder mit der Maus über die Taskleiste wechseln.
4. In Phase 5 Strg + F, oder über das Menü die Suche starten.
5. Text einfügen und Suche starten.
Über die Suche müsste die richtige Zeile automatisch im Text-Editor angezeigt werden.
Beitrag zuletzt geändert: 25.3.2023 22:47:59 von witze-dschungel -
@ witze-dschungel
danke für Deine interessanten Ideen.
Aber keine entspricht dem wonach ich suche.
Nochmal ganz einfach.
Sicher kennst Du pixie.exe, es ist eine kleine Soft die die Farben des Bildschirms unter dem Cursor anzeigt. So etwas in der Art stelle ich mir vor, zur Ermittlung der Programmzeilen einer WebSite.
-
Wenn ich das richtig sehe, kopiert pixie.exe auch nur die aktuelle Farbe in die Zwischenablage. Also nichts anders, was die Tastenkombination Strg + Shift + C und Strg + C im Browser mit HTML-Code erreicht.
Um nochmal auf die Frage zurückzukommen, was du eigentlich erreichen möchtest (Problem X) statt deinem bisherigerigen Lösungsansatz (Problem Y): Du möchtest eine Änderung in deiner Seite durchführen. Wenn du eine Stelle im Browser siehst, die du ändern möchtest, willst du diese Stelle schnell im Code-Editor wiederfinden. Du könntest von Hand suchen, aber es würde schneller gehen, wenn diese Programmzeile automatisch hervorgehoben wird, richtig?
Für mich klingt es nicht unbedingt danach, dass ein externes Programm notwendig ist. Manchmal gibt es nicht nur eine richtige Lösung für ein Problem.
Beitrag zuletzt geändert: 26.3.2023 17:33:19 von witze-dschungel -
Hallo witze-dschungel
du machst nichts anderes als, dass bereits gesagte zu wiederholen, damit vergeudest du deine und dazu noch meine Zeit.
Es wäre wirklich nett etwas konstruktiveres zu erfahren als solche Allgemeinplätze:witze-dschungel schrieb:
Für mich klingt es nicht unbedingt danach, dass ein externes Programm notwendig ist. Manchmal gibt es nicht nur eine richtige Lösung für ein Problem.
-
Ich weiß nicht, was du dir für eine Antwort erhoffst. Wenn es ein externes Programm sein soll, kannst du https://www.autohotkey.com/ ausprobieren und die eben genannten Shortcuts einprogrammieren.
Beitrag zuletzt geändert: 28.3.2023 1:08:29 von witze-dschungel -
Ist auch meine Beobachtung, daß das Unterfenster, welches aufklappt, wenn man ein Element inspizieren oder untersuchen (je nach Brauser und Version) will, so kommt man ohne Zeilennummer zum fraglichen Element, bekommt dies sogar in der Anzeige farblich markiert.
So kann man schnell etwas finden, dort in dem Unterfenster auch direkt bearbeiten, was ich gelegentlich nutze, um pessimierte Seiten anderer Anbieter für mich zugänglich zu machen.
Zeilennummern gibt es in der Quelltextanzeige, tja, die bekommt man aber wiederum nicht mit der Elementinspektion korreliert, nicht einmal bei SeaMonkey, welcher aus historischer Zeit noch einen Editor eingebaut hat.
Das Fehlen der Zeilennummern bei diesem Inspektor wird gelegentlich damit begründet, daß man da eben nicht den Quelltext der Seite sieht, vielmehr eine Repräsentation des DOMs, früher hieß das Teil auch mal DOM-Inspektor.
Daher kann man das für beliebige angezeigte Seiten dynamisch ändern, bekommt aber wohl erst einen dazu passend gebastelten Quelltext, wenn man die veränderte Seite anschließend wirklich abspeichert.
Zu dem Zeitpunkt ist allerdings keine aktuell korrellierbare Zeilennummer mehr gegeben.
Alternative: Über den DOM-Inspektor könnte man einen Marker einfügen, den Quelltext zum modifizierten DOM abspeichern, danach darin nach dem Marker suchen, auch wenig elegant, aber sollte gehen.
Also ohne Zeilennummer sofort mit dem DOM-Inspektor etwas ändern oder herumsuchen scheint im Angebot zu sein.
Sonst findet man dazu auch in Netz wenig, was helfen könnte, was über das hinausgeht, was hier bereits genannt wurde.
-
mukerbude schrieb:
Hallo,
kennt Ihr einen Trick, oder eine kleine SoftWare die es ermöglicht, in einer selbst geschriebenen HTML-Datei, wenn diese in den Browser übertragen ist, dort die ZeilenNummern unter der Cursor-Position zu ermitteln?
Danke
OpenAI schreibt dazu folgendes:
Ja, es gibt Möglichkeiten, in einer selbst geschriebenen HTML-Datei im Browser die Zeilennummern unter der Cursor-Position zu ermitteln. Allerdings erfordert dies in der Regel die Verwendung von JavaScript.
Ein Ansatz besteht darin, den Event-Listener "mousemove" auf das Dokument zu setzen und die Position des Cursors relativ zur Seitenansicht zu ermitteln. Mit dieser Position können Sie dann die Position innerhalb des HTML-Dokuments bestimmen, indem Sie die Verschiebung des Viewports berücksichtigen.
Hier ist ein einfacher Code, der Ihnen einen Eindruck davon gibt, wie dies umgesetzt werden könnte:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Zeilennummern ermitteln</title> <style> #lineNumber { position: fixed; bottom: 10px; right: 10px; background-color: white; padding: 5px; border: 1px solid black; } </style> </head> <body> <pre id="code"> Zeile 1 Zeile 2 Zeile 3 </pre> <div id="lineNumber">Zeilennummer: </div> <script> document.addEventListener('mousemove', function(e) { var codeElement = document.getElementById('code'); var lineNumberElement = document.getElementById('lineNumber'); var lineHeight = parseInt(window.getComputedStyle(codeElement).lineHeight); var rect = codeElement.getBoundingClientRect(); var lineNumber = Math.floor((e.clientY - rect.top) / lineHeight) + 1; lineNumberElement.textContent = 'Zeilennummer: ' + lineNumber; }); </script> </body> </html>
In diesem Beispiel wird das <pre>-Element verwendet, um den Code darzustellen. Der Event-Listener "mousemove" wird auf das Dokument angewendet und bei jedem Mausbewegungsereignis ausgelöst. Anschließend wird die Zeilennummer anhand der Mausposition und der Position des Code-Elements relativ zum Viewport berechnet.
Die Zeilennummer wird dann in einem separaten <div>-Element mit der ID "lineNumber" angezeigt. Sie können das Styling des Elements anpassen, um es nach Ihren Wünschen zu gestalten.
Quelle: https://chat.openai.com/ -
Hammer gut !
Werde das kleine Progrämmchen nachher ausprobieren und davon berichten.
Besten Dank.
P.S. Wie kann ich eine positive Bewertung schicken? -
mukerbude schrieb:
Hammer gut !
Werde das kleine Progrämmchen nachher ausprobieren und davon berichten.
Besten Dank.
P.S. Wie kann ich eine positive Bewertung schicken?
Nun Bewertungen kann ich leider auch nicht mehr abgeben. Warum weiß ich leider nicht.
Aber schön, dass ich dir mit ChatGPT helfen konnte auch wenn es nicht mein Wissen gewesen ist
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
