Wie schreibe ich Datei in HTML mit Schönheit?

Question

Ich möchte die test.html Datei diesen HTML schreiben:

<h2><strong><a href="http://awesome.com">AwesomeCom</a></strong><span>is awesome</span></h2> 

, die wie wird lokk:

<h2> 
    <strong> 
     <a href="http://awesome.com"> 
      AwesomeCom 
     </a> 
    </strong> 
    <span> 
     is awesome 
    </span> 
</h2> 

so ist es sieht Schönheit und so weiter ... und ich versuchte, dieser Code:

var html = require("html"); 
var beautify_html = require('js-beautify').html; 
var data = '<h2><strong><a href="http://awesome.com">AwesomeCom</a></strong><span>is awesome</span></h2>'; 
var beautyHtml= beautify_html(data); 
fs.writeFile('test.html',beautyHtml, function (err) {}); 

Aber es ist Aufenthalte in einer Linie ... ist es falsch, was ich geschrieben habe? oder muss ich etwas hinzufügen? Vielen Dank für das hilft

Answer 1

Dieses Problem scheint js-beautify

Es gibt ein paar verwandte offenen Fragen auf der GitHub Seite isoliert werden:

• https://github.com/beautify-web/js-beautify/issues/1184
• https://github.com/beautify-web/js-beautify/issues/1167

Sie kann auch sehen, nicht funktioniert, wenn Sie einfügen Ihre beliebigen HTML-Code in http://jsbeautifier.org/

---

Wenn ich ersetzen für pretty-data ich die gewünschte Ausgabe, bei der Formatierung als XML-js-verschönern:

var fs = require('fs'); 
var pd = require('pretty-data').pd; 
var data = '<h2><strong><a href="http://awesome.com">AwesomeCom</a></strong><span>is awesome</span></h2>'; 
var pdHtml= pd.xml(data); 

fs.writeFile('test.html',pdHtml, function (err){}); 

Ergebnisse in

<h2> 
    <strong> 
    <a href="http://awesome.com">AwesomeCom</a> 
    </strong> 
    <span>is awesome</span> 
</h2> 

Answer 2

Sie‘ nichts falsch machen. js-beautify hat definitiv Fehler und Einschränkungen. Es ist wahrscheinlich, dass Sie einer von ihnen begegnen. Sie sollten ein Problem melden.

Das heißt, ob es richtig ist, alle Elemente auf separaten Zeilen zu setzen, ist ein bisschen komplexer als es zunächst erscheint. js-beautify ist wesentlich genauer als die Verwendung einer Reihe von regulären Ausdrücken oder eines Tools, das HTML genauso behandelt wie XML, aber es analysiert den HTML-Code vor der Formatierung auch nicht vollständig, sodass einige Verhaltensweisen, die scheinbar trivial sind, nicht implementiert sind weil das Werkzeug nicht genügend Informationen hat, um dies sicher zu tun.

Zum Beispiel, wenn die Eingabe XML wäre, dann wäre die oben gezeigte gewünschte formatierte Ausgabe in Ordnung. Da es sich jedoch um HTML handelt, wird der in der Frage angezeigte Ausgabe-HTML-Code anders als die Eingabe angezeigt.

HTML (die Probe-Eingang) Gegeben:

<h2><strong><a href="http://awesome.com">AwesomeCom</a></strong><span>is awesome</span></h2> 

Der angezeigte Text wird wie folgt aussehen:

AwesomeComis awesome 

HTML Given (die gewünschte Ausgabe):

<h2> 
    <strong> 
    <a href="http://awesome.com">AwesomeCom</a> 
    </strong> 
    <span>is awesome</span> 
</h2> 

Der angezeigte Text sieht wie folgt aus:

AwesomeCom is awesome 

Der formatierte HTML-Ausgabe für die gegebene Eingabe kann entweder von diesen sein:

<h2> 
    <strong><a href="http://awesome.com">AwesomeCom</a></strong><span>is awesome</span> 
</h2> 

<h2><strong><a href="http://awesome.com">AwesomeCom</a></strong><span>is awesome</span></h2> 

Aber es ist auf jeden Fall nicht die gewünschte Ausgabe HTML-Code in der Frage gezeigt, sorry.

Als nächstes betrachten wir, warum <strong> und <a> möglicherweise nicht sicher zu trennen sind. Wenn die Eingabe der folgenden wurden, anschließend wurden Leerzeichen zwischen <strong> und <a> würden unterschiedliche angezeigten Text erzeugen:

<h2>The<strong><a href="http://awesome.com">AwesomeCom</a></strong><span>is awesome</span>!</h2> 

Im Falle des ursprünglichen Eingangs, eine neue Zeile hinzugefügt <strong> und <a> sicher ist, denn es gibt keinen Text zwischen <h2> und <strong>, aber js-beautify ist nicht schlau genug, um sicher zu sein. Selbst wenn es so wäre, ist fraglich, ob das das richtige Verhalten ist. das tun würde produzieren das folgende Verhalten, wo die Formatierung in Abhängigkeit unterscheidet sich wild auf das Vorhandensein der führenden Text und/oder Leerzeichen:

<!-- Input --> 
<h2><strong><a href="http://awesome.com">AwesomeCom</a></strong><span>is awesome</span>!</h2> 
<h2>The<strong><a href="http://awesome.com">AwesomeCom</a></strong><span>is awesome</span>!</h2> 

<!-- Output --> 
<h2> 
    <strong> 
    <a href="http://awesome.com">AwesomeCom</a></strong><span>is awesome</span>! 
</h2> 
<h2> 
    The<strong><a href="http://awesome.com">AwesomeCom</a></strong><span>is awesome</span>! 
</h2> 

Schließlich wollen wir einen Eingang betrachten, die eher wie ist das, was wahrscheinlich bedeutet, mit Leerzeichen in angemessenen Plätze:

<h2>The <strong><a href="http://awesome.com">AwesomeCom</a></strong> <span>is awesome</span>!</h2> 

Es gibt eine Reihe von Möglichkeiten, dies zu formatieren, die alle der unten vernünftig sind je nachdem wen man fragt:

<h2> 
    The 
    <strong><a href="http://awesome.com">AwesomeCom</a></strong> 
    <span>is awesome</span>! 
</h2> 

<h2> 
    The 
    <strong> 
    <a href="http://awesome.com">AwesomeCom</a> 
    </strong> 
    <span>is awesome</span>! 
</h2> 

<h2> 
    The <strong><a href="http://awesome.com">AwesomeCom</a></strong> 
    <span>is awesome</span>! 
</h2> 

<h2>The <strong><a href="http://awesome.com">AwesomeCom</a></strong> <span>is awesome</span>!</h2>