HTML-Code ungesampelt auf Webseite zeigen - geht das? NICE TO HAVE
Linuchs
- dokumentation
- html
NICE TO HAVE
Moin,
bisher habe ich HTML-Code-Schnippsel in die Dokumentation kopiert und in der Kopie die <
durch <
ersetzt, aber bei der nächsten Programmänderung ist die Doku dann veraltet.
Wäre schön, zu einem bestimmten Kapitel der Platzhalter-Datei (Template) zu verlinken und im Browser den Code wie im Text-Editor zu sehen.
Kann man einen HTML-Code mit irgendwas umschließen, damit der Code vom Browser nicht ausgeführt, sondern nur als Text gezeigt wird?
Meine ausführbaren Programme holen sich NUR die Zeilen zwischen <!-- [...] -->
und <!-- [/...] -->
, deshalb kann ich davor und dahinter beliebigen Code setzen, der den Programmlauf nicht beeinflusst. Auch javascript.
Das hier bringt nicht das Ergebnis, nur als Idee:
<pre id=form_zugangscode>
<!-- [form_zugangscode] -->
<form ...>
...
</form>
<!-- [/form_zugangscode] -->
</pre>
Die aufwändige Lösung wäre ein PHP-Programm, das sich den Code-Schnippsel holt, alle <
durch <
ersetzt und dann anzeigt. Aber vielleicht get's ja einfacher.
Gruß, Linuchs
Hallo Linuchs,
ein solches Element gibt es - als dafür vorgesehenes Element - meines Wissens nicht. HTML Elemente werden immer geparsed. Fast...
Ein möglicher Workaround hätte <![CDATA[ ]]> sein können, aber CDATA Sektionen sind im normalen HTML nicht zugelassen, das ist XML und ist daher bestenfalls in einem SVG Element möglich (was Dir nicht hilft).
Das einzige HTML Element, dessen Inhalt nicht als HTML geparsed wird, ist <script>
. Und hier kannst Du ansetzen, denn der Browser führt Script nur als JavaScript aus, wenn es einen MIME-Typ für JavaScript hat. Alles andere ignoriert es. type="text/javascript" ist der Default, aber du kannst beliebig anderes setzen. Hinzu kommt, dass der Browser im Agent-Stylesheet eine Regel dieser Art enthält:
script {
display: none;
}
und die kannst Du überschreiben.
<script type="text/html">
<ul>
<li>Beispielliste Punkt 1</li>
<li>Beispielliste Punkt 2</li>
</ul>
</script>
Das machst Du mit dieser CSS Regel sichtbar:
script[type='text/html'] {
display: block;
white-space: pre;
font-family: monospace;
/* Nach Geschmack mit weiteren Zutaten verfeinern */
}
Rolf
Servus!
Hallo Linuchs,
ein solches Element gibt es - als dafür vorgesehenes Element - meines Wissens nicht.
Führer gab's mal: HTML/Elemente/xmp (Wird von Browsern auch noch verstanden, aber ohne Garantie für die Zukunft!
HTML Elemente werden immer geparsed. Fast...
Herzliche Grüße
Matthias Scharwies
Hallo Matthias Scharwies,
xmp
Wird auch heute noch verstanden, hat aber - zumindest in Chrome - nicht mehr die "Parse mich nicht" Semantik.
HTML-Maskierer
Ist etwas, was ich auch schon überlegt hatte. Die Frage war dann, wo ich den Quellcode hinterlege - und kam auf ein <script> Element. Und dann fiel mir auf: Das kann man ja auch sichtbar machen.
Ein Problem entsteht nur, wenn der Beispielcode <script></script> enthält, in dem Moment geht es schief, weil der script-Block vorzeitig beendet wird.
Die Alternative könnte ein <template> Element sein, aber dann braucht man wirklich JavaScript, um den Template-Inhalt in den Code-Rahmen zu übertragen.
Ein HTML Maskierer, um den HTML Code darzustellen, ist allerdings nicht erforderlich. Das Wiki-Beispiel ist in dieser Beziehung mehrfacher Müll - sorry, falls es von Dir stammt.
TL;DR: Ein HTML Maskierer ist in JavaScript zumeist überflüssig. Ich habe jederzeit die Wahl zwischen innerHTML und textContent, je nach Bedarf.
Wenn ich mich bis 15:00 nicht drum gekümmert habe, komme ich erst morgen dazu.
Rolf
Servus!
Hallo Matthias Scharwies,
xmp
Wird auch heute noch verstanden, hat aber - zumindest in Chrome - nicht mehr die "Parse mich nicht" Semantik.
HTML-Maskierer
Wenn ich mich bis 15:00 nicht drum gekümmert habe, komme ich erst morgen dazu.
+1
Herzliche Grüße
Matthias Scharwies
Hallo Matthias,
done
Rolf
Hallo Rolf,
du bist ein Zauberer (für jede Illusion eine Lösung). Das funktioniert hervorragend. Nun kann ich in der Doku zu jedem Kapitel verlinken.
Ich teste gerne Grenzen aus, funktioniert auch ein script im script?
https://remso.eu/100/p124_de.htm#form_gruppenmitglied
<script id=form_gruppenmitglied type="text/html">
<!-- [form_gruppenmitglied] -->
...
<script>
console.log ("Test: script in script" );
</script>
<!-- [/form_gruppenmitglied] -->
</script>
Das erste script zeigt im normalen Programmlauf den Text in der Konsole, beendet aber die „Spezial-anzeige“ der Dokumentation vorzeitig. Damit kann ich leben und weiterarbeiten. Danke nochmal.
Hallo Linuchs,
das Thema script-in-script hat mich nicht losgelassen. Ich habe jetzt diesen Vorschlag, mit einem template-Element (welches Du mutmaßlich in deinen Codeschnipseln nicht verwendest):
<p>Beispiel 1:</p>
<template class="example-code"><ul>
<li>Beispielliste 1 Punkt 1</li><script></script>
<li>Beispielliste 1 Punkt 2</li>
</ul></template>
<p>Beispiel 2:</p>
<template class="example-code"><ul>
<li>Beispielliste 2 Punkt 1</li><script></script>
<li>Beispielliste 2
mit diesem Helper-Script:
document.querySelectorAll(".example-code").forEach(sample => {
let htmlConvert = document.createElement("div");
htmlConvert.appendChild(sample.content.cloneNode(true));
let showSample = document.createElement("samp");
showSample.className = "example-code";
showSample.textContent = htmlConvert.innerHTML;
sample.after(showSample);
});
Je template mit class="example-code"
wird die Pfeilfunktion durchgeführt, und sie fügt einfach hinter dem Template ein <samp>
-Element ein mit dem HTML Text des Template-Inhalts. Damit das geht, muss der Template-Inhalt erstmal in ein HTML Element übertragen werden. Dazu ist das <div>
-Element da (das ist temporär und wird nicht ins DOM gestellt), dort kann ich mit innerHTML
dann auch einfach den HTML Quelltext des Beispiels auslesen und ihn als textContent
ins <samp>
-Element setzen. Ein in JavaScript geschriebener HTML Maskierer ist nicht nötig.
Du müsstest noch etwas CSS ergänzen, um samp.example-code schick zu machen. Es braucht zumindest white-space:pre
.
Rolf
Hallo Rolf,
das Thema script-in-script hat mich nicht losgelassen.
Nachdem dein erster Vorschlag so hervorragend funktionierte, dachte ich: Schalte die gesamte Code-Anzeige mit einem script aus und nur die Formulare wieder ein.
Das wäre ein realistischer script-im-script Fall.
Aber jetzt mache ich erstmal im Tagesablauf weiter ...
Gruß, Linuchs
Die aufwändige Lösung wäre ein PHP-Programm, das sich den Code-Schnippsel holt, alle
<
durch<
ersetzt und dann anzeigt. Aber vielleicht get's ja einfacher.
Das ist 1. nicht „aufwändig“ und 2. willst Du bitte einfach htmlspecialchars( $txt ) verwenden.
Hallo Raketenwilli,
okay, da hast Du eigentlich eine deutlich einfachere Lösung. Einfach die .htm Dateien der Doku nach .php umbenennen. Der Abruf der Dokuseiten wird damit etwas teurer, weil dann PHP ausgeführt werden muss, aber so viele Leute werden diese Seiten nicht abrufen.
Für das Verfassen der Doku ist es dann sicherlich einfacher. Nix mehr kopieren, einfach so:
<?php require_once("doku_tools.php"); ?>
DOKU
BLAH
BLUB
TEXT
<?php get_snippet("foo.php", "form_gruppenmitglied" ?>
BLAH
BLUB
<?php get_snippet("foo.php", "menu_verteiler" ?>
LABER
FASEL
get_snippet liest die Quelldatei und holt den von Linuchs entsprechend markierten Bereich heraus. Passt 😀
Rolf