Schlagwort-Archive: beautifier

tidy2 (für schöneres HTML) in notepad++

Bei diesem Tool habe ich innerhalb kürzester Zeit einen erheblichen Bug gefunden – und kann nur vermuten, dass es weitere gibt, die Codeteile einfach verschwinden lassen und man merkt es nicht mal. Also empfehle ich beim WebStorm-Artikel weiterzulesen.

Wenn man Folgendes tidied:

<ol class=“carousel-indicators“>
<li data-target=“#myCarousel“ data-slide-to=“0″ class=“active“></li>
<li data-target=“#myCarousel“ data-slide-to=“1″></li>
<li data-target=“#myCarousel“ data-slide-to=“2″></li>
</ol>

… dann verschwinden einfach sämtliche <li>-Elemente. Von tidy2 muss ich also auch abraten.

Die Erweiterung tidy2 über den Plugin-Manager installieren.

Anschließend findet sich im Menü Erweiterungen tidy2.

Das wichtigste beim HTML tidy-up ist das Einrücken (indent) und das wird in allen drei default-configs gemacht. In den config-files kann man die Anzahl der Spaces für die Einrückungen bestimmen uvm.

htmltidy.net

Leider gibt’s aktuell einen Bug in diesem Tool, der eine sinnvolle Benutzung des indents unmöglich macht. Ein solcher Code, wenn zwei mal eingerückt erzeugt aus heiterem Himmel ein neues unpassendes Leerzeichen zwischen dem letzten Buchstaben des Linktextes und einem darauffolgenden Punkt:

<p><a href=“http://www.it-freelancer-magazin.de/index.php/it-freelancer-des-jahres/“>IT Freelancer des Jahres</a>. Mit 2017 kamen viele neue tollen Features hinzu.</p>

Daher meine Empfehlung weiterhin Tidy2 in notepad++ zu verwenden.

Um Deinen HTML Sourcecode online aufzuräumen, bietet sich http://htmltidy.net/ an. Einfach Deinen schmutzigen HTML-Code ins rechte Fenster copy&pasten.
Ganz nützlich ist die Anzeige der Anzahl der Zeichen:

Nachdem man nun Komprimieren geklickt hat, sollte sich diese sichtbar reduzieren:

Um Dir einen Überblick zu verschaffen, erstmal ein oder mehrmals ‚Indent text‘ klicken:
.

Wenn irgendwo die schließenden Tags fehlen, wird das in rot signalisiert. Wenn Du Änderungen am Code durchführst, werden diese simultan im linken Fenster sichtbar. Zusätzlich kann man den dort befindlichen WYSIWYG-Editor nutzen. Dort kann man beispielsweise mit View -> Show Blocks die div’s optisch anzeigen.

Mit der Tidy-Toolbox hat man ein Bündel weiterer HTML-Optimierungen an der Hand:

Z.B. Inline styles: Wer HTML-Code von einer fremden Seite in die eigene einbetten will, findet dort oft inline-styles drinnen, die die Optik der alten Seite repräsentieren. So könnten z.B. per inline style bestimmte Links pink dargestellt werden, wobei Du eigentlich diese ganz normal in blau haben möchtest.