Entfernen führender Leerzeichen aus eingerückten HTML-Quellen in pre/code-Tags

Lesezeit: 5 Minuten

Benutzer-Avatar
Tief

Ich habe derzeit den folgenden HTML-Code in einem Pre-Code-Block:

                <pre class="prettyprint"><code>
                    &lt;html&gt;
                    &lt;body&gt;

                    &lt;form name=&quot;input&quot; action=&quot;html_form_action.asp&quot; method=&quot;get&quot;&gt;
                    &lt;input type=&quot;radio&quot; name=&quot;sex&quot; value=&quot;male&quot;&gt;Male&lt;br&gt;
                    &lt;input type=&quot;radio&quot; name=&quot;sex&quot; value=&quot;female&quot;&gt;Female&lt;br&gt;
                    &lt;input type=&quot;submit&quot; value=&quot;Submit&quot;&gt;
                    &lt;/form&gt; 

                    &lt;p&gt;If you click the &quot;Submit&quot; button, the form-data will be sent to a page called &quot;html_form_action.asp&quot;.&lt;/p&gt;

                    &lt;/body&gt;
                    &lt;/html&gt;
                </code></pre>

Es wird innerhalb der HTML-Quelle eingerückt, um eine bessere Struktur innerhalb des Dokuments zu erreichen. Wie kann ich das führende Leerzeichen entfernen? Durch die Verwendung von Javascript oder gibt es eine einfachere Methode.

Benutzer-Avatar
Michael Benjamin

Die Frage lautet, ob es eine JavaScript-Lösung oder eine einfachere Methode zum Entfernen führender Leerzeichen gibt. Es gibt eine einfachere Methode:

CSS

pre, code {
    white-space: pre-line;
}

DEMO

Leerraum

Das white-space -Eigenschaft wird verwendet, um zu beschreiben, wie Leerzeichen innerhalb des Elements behandelt werden.

Vorlinie

Sequenzen von Leerzeichen werden reduziert.

Um vorhandene Leerzeichen oder Einrückungen beizubehalten, kann jede Zeile in ein untergeordnetes Tag mit eingeschlossen werden white-space zurücksetzen auf pre auf Zeilenebene:

HTML

<pre>
    <code>
        <i>fn main() {</i>
        <i>    println!("hello world!");</i>
        <i>}</i>
    </code>
</pre>

CSS

pre, code {
    white-space: pre-line;
}

pre > code > i {
    white-space: pre;
}

  • Es entfernt auch nicht führende wiederholte Leerzeichen, was möglicherweise nicht wünschenswert ist: jsfiddle.net/0zLv0nod

    – Corei

    26. Mai 2017 um 13:53 Uhr

  • Ich möchte Leerzeichen nur in der ersten Zeile einer hübsch gedruckten JSON-Zeichenfolge entfernen, und diese Lösung entfernt den Einzug aus jeder Zeile der Zeichenfolge. 🙁

    – Djangofan

    14. November 2020 um 2:48 Uhr

  • @djangofan Setzen Sie den Einzug für jede Zeile in das untergeordnete Tag.

    – Louise Eggleton

    30. Mai um 10:26 Uhr

Benutzer-Avatar
Voltrevo

Ich mag Homams Idee wirklich, aber ich musste sie ändern, um damit fertig zu werden:

<pre><code><!-- There's nothing on this line, so the script thinks the indentation is zero -->
    foo = bar
</code></pre>

Um das Problem zu beheben, nehme ich einfach die erste Zeile heraus, wenn sie leer ist:

[].forEach.call(document.querySelectorAll('code'), function($code) {
    var lines = $code.textContent.split('\n');

    if (lines[0] === '')
    {
        lines.shift()
    }

    var matches;
    var indentation = (matches = /^[\s\t]+/.exec(lines[0])) !== null ? matches[0] : null;
    if (!!indentation) {
        lines = lines.map(function(line) {
            line = line.replace(indentation, '')
            return line.replace(/\t/g, '    ')
        });

        $code.textContent = lines.join('\n').trim();
    }
});

(Ich verarbeite auch <code> Tags statt <pre> Stichworte.)

  • Danke, genau das, was ich brauchte, eine nette Änderung der Antwort von @homam

    – BSG

    15. Dezember 2016 um 14:51 Uhr

  • Ihre Antwort kann mit dem ersten Codeblock enden, dieser Ausschnitt öffnet mir die Augen …

    – gfentwicklung

    18. September 2020 um 23:24 Uhr

Vielleicht möchten Sie nur ändern, wie es ausgegeben wird, aber mit JavaScript ist es ziemlich einfach

var p = document.querySelector(".prettyprint");
p.textContent = p.textContent.replace(/^\s+/mg, "");

http://jsfiddle.net/a4gfZ/

  • Danke, es hat genau so funktioniert, wie ich es wollte! Nur eine allgemeine Frage, ist es für die Zuschauer vorzuziehen, den Codeumbruch zu haben, oder dass er einfach fließt und durchscrollt?

    – Tief

    23. Juni 2013 um 3:47 Uhr

  • @Deep Ich persönlich würde es vorziehen, es zu wickeln

    – Explosionspillen

    23. Juni 2013 um 4:09 Uhr

  • Löst das spezielle Beispiel, aber wenn der Code selbst eingerückt ist, würde er diesen Einzug verlieren.

    – Ciro Santilli Путлер Капут 六四事

    11. Juni 2014 um 0:54 Uhr


  • Aufgrund des Kommentars von @CiroSantilli烏坎事件2016六四事件法轮功 ist diese Antwort nicht wirklich eine Lösung für das Problem. Es ist nur ein Monkeypatch für diese spezielle Manifestation des Problems.

    – BSG

    15. Dezember 2016 um 14:36 ​​Uhr

Benutzer-Avatar
homam

Dieses Snippet erweitert die obige Lösung und geht von der Einrückung der ersten Zeile im Inneren aus <pre> ist 0 und richtet alle Zeilen basierend auf der ersten Zeile neu aus:

[].forEach.call(document.querySelectorAll('pre'), function($pre) {
  var lines = $pre.textContent.split('\n');
  var matches;
  var indentation = (matches = /^\s+/.exec(lines[0])) != null ? matches[0] : null;
  if (!!indentation) {
    lines = lines.map(function(line) {
      return line.replace(indentation, '');
    });
    return $pre.textContent = lines.join('\n').trim();
  }
});

Wenn Sie verwenden pre, sollten Sie den Inhalt so formatieren, dass er genau so formatiert wird, wie er gerendert werden soll. Das ist die Idee von pre (vorformatierter Text). Aber wenn es nur Einzug ist, könnten Sie CSS verwenden: margin-left mit einem geeigneten negativen Wert.

  • Nur diese Lösung hat bei mir funktioniert. white-space: pre-line css fügt jede Zeile ganz links ein, was ich für meine restlichen Zeilen nicht möchte.

    – Suraj Lama

    7. Januar 2020 um 17:12 Uhr

  • Nur diese Lösung hat bei mir funktioniert. white-space: pre-line css fügt jede Zeile ganz links ein, was ich für meine restlichen Zeilen nicht möchte.

    – Suraj Lama

    7. Januar 2020 um 17:12 Uhr

1094930cookie-checkEntfernen führender Leerzeichen aus eingerückten HTML-Quellen in pre/code-Tags

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy