HTML forráskód szépségesítése

Időnként dolgozom olyan HTML markuppal, ami valamilyen CMS-ből jön és gusztustalanul hányadék a kinézete. Kerestem egy megoldást, amivel viszonylag fájdalommentesen lehet szépséges markupot alkotni. Codához sajnos nem találtam semmit, viszont Sublime 2-höz van egy elég jó node.js alapú kiegészítés, a Sublime-HTMLPrettify, ami HTML/CSS/JS kódot gyönyörűre formáz.

A telepítése picit utánaolvasós/trial-and-erroros, ezért gondoltam leírom, hátha más is felrakná:

1. node.js installer telepítése (PKG, next-next)

2. Sublime-HTMLPrettify letöltése a GitHubról

3. Csomagoljuk ki, aztán a keletkezett mappát nevezzük át erre: Sublime-HTMLPrettify

4. Sublime 2-ben a “Preferences – Browse Packages” megnyitja azt a mappát, ahol vannak az extensiönök, ide mozgassuk be a 3. pontban átnevezett mappánkat

5. Nekem hibára futott első futáskor, így a node parancshoz abszolút elérési útvonalat adtam meg. A Sublime-HTMLPrettify mappában levő HTMLPrettify.py fájlban kell csak beírni a node elé a pontos elérési útvonalat. Nálam ide telepítette az 1. pontban és a sárgával jelölt részt adtam hozzá a 20. sorban:

cmd = ["/usr/local/bin/node",scriptPath,self.view.file_name(),setings]

6. Bizonyos tagekről célszerű leszedni a formázást, ilyen pl. az a, em, strong, talán még a p is. Ezt a scripts/beautify-html.js fájlban tudjuk paraméterezni. Az 52. sorban:

unformatted = options.unformatted || ['a', 'span', 'strong', 'em', 'p'];

7. A HTMLPrettify scriptet úgy tudjuk futtatni, hogy kijelöljük a szöveget, aztán “Tools – Command Palette”, az itt megjelenő ablakból pedig kiválasztjuk a HTMLPrettify: Prettify opciót. El is kezdhetjük gépelni, vagy rárakhatunk shortcutot.

Remekül működik, mondjuk van egy olyan gondom még vele, hogy mindenáron elmentett fájlon hajlandó csak elvégezni a dolgát, pedig nekem erre legtöbbször nincs szükségem, csak van valami nyersanyagom, amit szeretnék kiformázni, áttekinthetőbbé tenni.