Suppression des espaces de retrait de la source HTML dans le pré/balises de code

J'ai actuellement le code html suivant dans un bloc de code:

                <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>

Il est en retrait dans la source html de mieux structurer dans le document. Comment puis-je supprimer le premier espace? Grâce à l'utilisation de javascript ou est-il plus simple de la méthode.

InformationsquelleAutor Deep | 2013-06-23

4

Vous pouvez simplement modifier la manière dont elle est sortie, mais il est assez simple de le faire avec JavaScript
```
var p = document.querySelector(".prettyprint");
p.textContent = p.textContent.replace(/^\s+/mg, "");
```
http://jsfiddle.net/a4gfZ/
- Merci cela a fonctionné exactement comme je le voulais! Juste une question générale est-il plus préférable pour les téléspectateurs d'avoir le code de l'attelle ou il suffit de flux et de faire défiler?
- Je serais personnellement préfèrent retour à la ligne
- Résout l'exemple particulier, mais si le code lui-même est en retrait, il perdrait ce tiret.
- En raison de @CiroSantilli烏坎事件2016六四事件法轮功 du commentaire, cette réponse n'est pas vraiment une solution au problème. C'est juste un monkeypatch pour cette manifestation particulière du problème.
InformationsquelleAutor Explosion Pills
33

La question demande si il y a un JavaScript solution ou une méthode plus simple pour la suppression des espaces blancs. Il y a une méthode plus simple:

CSS
```
pre, code {
    white-space: pre-line;
}
```
DÉMO

white-space

La white-space propriété est utilisée pour décrire la façon dont les espaces à l'intérieur de la
l'élément est traité.

pré-ligne

Séquences d'espaces sont réduits.
- Il supprime les non-leaders répété les espaces, ce qui pourrait ne pas être souhaitable: jsfiddle.net/0zLv0nod
InformationsquelleAutor Michael_B

J'aime vraiment Homam de l'idée, mais j'ai dû changer de pallier ce problème:

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

À le résoudre, je viens de prendre la première ligne si elle est vide:

[].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();
    }
});

(Je suis aussi le traitement <code> tags lieu de <pre> balises.)

Merci, tout ce dont j'avais besoin, une belle modification @homam réponse

InformationsquelleAutor voltrevo

4

L'extension de la solution ci-dessus, ce modèle suppose l'indentation de la première ligne à l'intérieur de <pre> est 0 et il réaligne toutes les lignes en fonction de la première ligne:
```
[].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();
  }
});
```
- Pour moi, cette réponse est le premier à réellement résoudre le problème.
- Ce n'est, cependant, bande de contenu HTML (pour la mise en forme, etc.) de la <pre> tag, ce qui n'est pas souhaitable
- Si vous remplacez les instances de textContent avec innerHTML, ce n'résoudre le problème. Il sera plus lent à exécuter si, si c'est un sujet de préoccupation.
InformationsquelleAutor homam
0

Lorsque vous utilisez pre, vous devez le formater son contenu à être exactement comme vous voulez qu'il soit rendu. C'est l'idée même de pre (texte préformaté). Mais si c'est juste de l'indentation, vous pouvez utiliser CSS: margin-left convient avec une valeur négative.

InformationsquelleAutor Jukka K. Korpela

Vous devez vous connecter pour publier un commentaire.