Outils

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.

Tags

Amah

Passionné de nouvelles technologies, je partage ici des innovations technologiques qui impactent notre quotidien, ainsi que des astuces & outils pour simplifier notre vie à l'ère du numérique. Tech addict & casual dev | Interested by Technology, Energy & Africa

Articles similaires

2 commentaires

  1. Un grand merci pour le partage. Un excellent outil que vous avez partagé. J’ai mis ce lien en signet pour mon utilisation ultérieure. Sans aucun doute, le processus de minification peut réduire la taille du code de 10% à 95%! Cela permettra au site Web de fonctionner plus rapidement et ainsi d’obtenir un score élevé d’optimisation des moteurs de recherche (SEO).

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

 

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Bouton retour en haut de la page
Fermer