AccueilFAQRechercherMembresGroupesS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.


    Ré-indenter facilement son code (beautify)

    Partagez
    avatar
    Nihil Scar Winspeare
    Messages : 4839

    le Ven 19 Sep 2014 - 17:53

    Hello :)

    Il ne s'agit pas d'un générateur de code donc je le propose ici, n'hésitez pas à bien le replacer. '-'

    Parfois en adaptant un tutoriel, on a tendance à simplement faire en sorte que ça marche sans vraiment faire attention à ce que le code soit lisible... Et quand quelques semaines après on doit re-regarder on n'y comprends plus rien. Il y a des balises qui s'ouvrent et se ferment partout et honnêtement... On a la flemme de tout re-nettoyer.

    Un petit lien utile pour rendre plus lisible le HTML ou le Javascript : http://jsbeautifier.org/

    Exemple :
    Code:
    <div class="fiche-1"><div class="pseudo">Totot</div><div class="titre">Un super titre <div class="sous-titre">Avec un sous titre</div></div>
    <div class="contenu_presentation1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis aperiam labore id nobis repellat fuga tempora dolores dolorum odio placeat soluta eaque excepturi ducimus officiis ipsam atque aliquid. Fuga perferendis.
    </div><img src="ADRESSEIMG" alt="Nom image"/></div>

    Après avoir été bien indenté donnera ceci :
    Code:
    <div class="fiche-1">
        <div class="pseudo">Totot</div>
        <div class="titre">Un super titre
            <div class="sous-titre">Avec un sous titre</div>
        </div>
        <div class="contenu_presentation1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis aperiam labore id nobis repellat fuga tempora dolores dolorum odio placeat soluta eaque excepturi ducimus officiis ipsam atque aliquid. Fuga perferendis.</div>
        <img src="ADRESSEIMG" alt="Nom image" />
    </div>

    C'est quand même plus facile à lire :toto: ? Bien entendu c'est automatique donc il peut y avoir des parties à revoir, on a tous ses préférences, mais quand on arrive sur un code juste incompréhensible, cela peut aider ♥
    avatar
    Alzufen
    MasculinAge : 22Messages : 2103

    le Ven 19 Sep 2014 - 18:38

    Je rajouterais en complément de ce que Nihil a dit, un site dans le même style faisant aussi bien le Jquery/JS que le HTML ou même le CSS, bien que je ne sois pas toujours d'accord avec la mise en forme, il reste assez simple et pratique, je préfère cela dit faire la chose moi-même mais quand je prend le code d'un autre pour l'aider, ou de quelqu'un part, ça me facilite grandement la tâche pour y voir plus clair; ou parfois quand j'ai la flemme de faire mes propres codes car à la base c'était juste un test qui se fini en véritable code de 5000 mètres XD

    http://tools.arantius.com/tabifier (Pour le Jquery/JS il faut choisir "JSON")




      La date/heure actuelle est Sam 16 Déc 2017 - 6:05