Convertisseur de caractères spéciaux en entités HTML

ConvertirHTML est un outil très pratique qui permet de convertir facilement les caractères spéciaux présents dans votre texte ou dans vos lignes de codes en entités HTML valides.

En effet, l'encodage HTML permet de traduire chaque caractère spécial par un code alpha numérique commençant par & (esperluète) et se terminant par ; (point virgule). Par exemple, l'espace insécable peut être affichée avec les codes   ou  

Voici à présent les caractères spéciaux les plus fréquents et leur équivalent en entités HTML :

"&" (et commercial) devient "&"

""" (guillemets doubles) devient """

"'" (guillemet simple) devient "'"

"<" (inférieur à) devient "<"

">" (supérieur à) devient ">"

Pour traduire les caractères spéciaux, rien de plus simple !

D'abord, insérez votre texte ou votre code dans la boite ci-dessous
Cochez ensuite les cases selon vos besoins
Enfin démarrez le processus en cliquant sur «Convertir »

Notez bien : cliquez sur le bouton Effacer avant de lancer une nouvelle conversion de caractères.

Pourquoi faut-il convertir les caractères spéciaux en entités HTML

Lorsque vous codez une page web, vous utilisez souvent les caractères < et > qui sont respectivement considérés comme balise ouvrante et fermante en langage HTML. Ces caractères sont indispensables pour formater une page web.

Si vous saisissez par exemple un texte contenant des caractères spéciaux tels que < et >, vous devez impérativement les traduire en entités HTML valides pour éviter les soucis de formatage et ne pas engendrer des problèmes d'affichage.

Convertir les caractères spéciaux en entités HTML hors ligne avec Notepad++

L'extension "HTML Tag" permet d'effectuer les opérations d'encodage et de décodage des caractères spéciaux. Elle est disponible gratuitement dans la bibliothèque des extensions Notepad++ " Modules d'extension" > "Gestionnaire des modules d'extension".

Pour les instructions d'installation, suivez ce guide.

Retrouver l'extension après installation dans " Modules d'extension" > " HTML Tag "
Maintenant, pour convertir les caractères spéciaux (encodage), il suffit de sélectionner votre code ou votre texte et cliquez sur " Modules d'extension" > " HTML Tag " > "Encode entities"
Pour effectuer l'opération inverse (décodage HTML), cliquez sur " Modules d'extension" > " HTML Tag " > "Decode entities"

Préserver le formatage d'un code après son insertion dans l'éditeur visuel de WordPress

Lors de l'édition d'un article, lorsque vous souhaitez inclure un morceau de code (HTML, JavaScript, PHP, etc.) dans l'éditeur visuel de WordPress, vous remarquerez que le formatage du code est supprimé automatiquement. Par conséquent, si vous prévisualisez votre article vous verrez que l'indentation (retraits en début de ligne) a simplement disparu (voir l'image ci-dessous).

Cette problématique n'est pas spécifique à WordPress, mais on la rencontre dans plusieurs plateformes de créations de sites web disposant d'un éditeur visuel pour la création des articles.

À titre d'exemple, voici un code HTML avant son insertion dans l'éditeur visuel WordPress

<div class='nav-navigation'>
    <div class='body-row menu-wrap'>
        <nav><a class='resp-menu2' href='#' id='resp-menu'>Menu</a>
            <ul class='menu'>
                <li><a expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='name'>Accueil</span></a></li>
                <li><a href='#'>Voyages</a></li>
            </ul>
        </nav>
    </div>
</div>

Voici maintenant le résultat lorsqu'on le copie directement dans WordPress :

On voit bien que les retraits en début de ligne ont été enlevés automatiquement et ce problème persiste même après l'ajout des balises <pre> ou <code> à notre code.

Pour garder le formatage intact avec les espacements et l'indentation qui rendent un code plus lisible et plus compréhensible, il faudra utiliser au préalable un convertisseur de caractères spéciaux en entités HTML comme celui présent dans ce site web.

Voici le procédé à suivre :

D'abord, convertissez votre code (HTML, JavaScript, PHP, etc.) en entité HTML à l'aide de l'outil ConvertirHTML en cochant toutes les cases comme sur l'image qui suit :

Ensuite, copier le code fraichement converti dans l'éditeur "Text" en prenant soin d'envelopper votre code entre les deux balises<pre> et </pre> ou encore entre les balises <pre><code> et </code></pre> comme ceci :

Résultat dans l'éditeur visuel :

Voilà ! grâce à l'encodage HTML, le formatage du code est intact et sera affiché proprement dans votre article WordPress.