danke - große Klasse!

[Rolf B]

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