Dirty markup : organiser son code HTML, CSS et JavaScript [#DevWeb]

Dirty markup : organiser son code HTML, CSS et JavaScript [#DevWeb]

Dirty Markup est un outil en ligne gratuit vous permettant de nettoyer et d’organiser son code HTML, JS ou CSS. Pour cela, un copier-coller et quelques options suffisent.
Lorsqu’on écrit des lignes de codes, on respecte certaines règles d’indentation pour organiser son code de façon à la rendre lisible et compréhensible pour ne pas s’y perdre ou pour faciliter la tâche à une personne qui reprendrait son code. On peut aussi vouloir modifier des versions compressées de code (appelées « minified » ) qui sont très embêtant parce que tout le code tient sur une ligne.

Exemple code:

body { position: relative; overflow-x: hidden; background-color: #F1C3A9 } .boxed #wrapper { padding: 0px 20px; background: #fff; position:relative; overflow-x: hidden; } .boxed #header, .boxed #footer, .boxed #copyright { margin-right: -20px; margin-left: -20px;} .stretched #wrapper.container { overflow: hidden; width: 100%; height: 100%; background: url(images/fond/bg.png);}

Pour bien organiser son code à postériori, il suffit de le copier, se rendre sur http://www.dirtymarkup.com, choisir le langage (les choix proposés sont HTML, CSS et JavaScript) et cliquer sur le bouton « CLEAN » et le tour est joué. Il ne vous reste qu’à recopier le code nettoyé.

DirtyMarkup_cleancode

Options proposées:

Quelques options différentes pour chaque langage sont proposées pour configurer le résultat final suivant ses habitudes ou envies.

DirtyMarkup_options

NB: Si à l’inverse, vous souhaitez compresser votre code, cela est possible pour le CSS sur http://cssminifier.com/ et pour JavaScript sur http://javascript-minifier.com/.

Si vous connaissez d’autres outils permettant de réaliser cette manip, n’hésitez pas à les partager en commentaires.

Vous avez trouvé cet article utile? Partagez le !

Leave a Reply

Petit défi pour filtrer les messages automatiques : * Time limit is exhausted. Please reload CAPTCHA.