Raw HTML (brut) personnalisable avec l'éditeur de WP et de Blogger

J'utilise Codecolorer wp plug-in pour afficher les codes html bruts (raw html) et pour la coloration syntaxique. Mais mon problème, c'est que je ne peux pas personnaliser les codes à l'intérieur ou c'est possible mais très compliqué. Par exemple, si je voudrais faire quelques mots en gras, il ne me laisse pas le faire, pas de mots choisis individuellement. En plus, je ne peux pas colorer les codes exactement comme je voudrais, par exemple colorer chaque code individuellement. Mais la solution que je vous partage ici n'est pas si difficile, juste un peu plus de travail et on n'a besoin de rien, seulement notre éditeur de wordpress ou de blogger.


 
 
 
 
 
 
 

Mon code d’exemple (langue xml) ne contient pas seulement des balises qu'il faut transformer en codes bruts (<, > et ") mais aussi des codes qui sont déjà transformés en codes bruts et que je voudrais laisser comme ça (&quot;) :

<b:if cond='data:post.hasJumpLink'>
<a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a> |
</b:if>

 

Comment j'ai fait la démonstration ci-dessus ?

Option 1. Ouvrez l'onglet "VISUEL" (WP) ou "RÉDIGER" (Blogger) de l'éditeur

  • Ouvrez une nouvelle article ou page et assurez-vous que vous êtes bien dans l'onglet "Visuel" (ou "Rédiger" dans Blogger) de votre éditeur !
  • Collez ou tapez vos codes à la façon comme vous voulez les visualiser. Si vous voulez mettre des mots en gras, faites ici. Si vous voulez donner des différentes couleurs aux mots, colorez maintenant. Si vous voulez laisser quelques codes bruts, il faut tapez les codes bruts (noms d'entité de HTML, HTML entity names) ici !
  • Une fois la visualisation de vos codes est faite, changez votre éditeur à l'onglet "Texte" (WP) ou "Html" (Blogger) !
  • Maintenant vous voyez les codes transformés en langue HTML et ceux qui étaient déjà écrites en langue HTML sont corrigés aussi : (&amp;quot; au lieu de &quot;).

Sautez l'étape suivante (Option 2.) et continuez avec l'étape juste après !

Option 2. Commencer directement dans l'onglet "TEXTE" (WP) ou "HTML" (Blogger) de l'éditeur

  • Ouvrez une nouvelle article ou page et assurez-vous que vous êtes bien dans l'onglet "Texte" (ou "Html" dans Blogger) de votre éditeur !
  • Collez ou tapez vos codes à la façon comme vous voulez les visualiser.
  • Commencez de remplacer tous les < avec &lt; et tous les > avec &gt;.
  • Si vous voulez mettre des mots en gras, mettez les entre les balises <strong></strong> ou <b></b>, dépend de votre réglage css.
  • Si vous voulez colorer des mots, donnez leur un style css comme d'hab : <span class="rouge"></span> et rajoutez .rouge {color:#ff0000;} à votre feuille de style css.
  • Si vous voulez laisser quelques codes bruts (ou raw), comme &quot; de mon exemple, corrigez la partie du code "&" à celle-ci : &amp.

Attention !

Si une fois vous êtes prêt et vous changez l'éditeur du mode visuel au mode texte brut, NE REVENEZ PLUS à l'onglet "Visuel/Régiger" car le codage peut être retransformé et vous devrez recommencer tout de début !
Si vous voulez vraiment retourner à l'onglet "Visuel/Rédiger", copiez vos codes et collez les dans un éditeur de texte comme Bloc-notes ou Dreamweaver, mais pas OpenOffice, ni Word.

 

Mettre les codes dans une <div>

Vous devrez mettre vos codes de démo dans une <div> et lui donner un style sympa dans la feuille CSS. Je ne voudrais pas me plonger aux détails ici, vous allez avoir l'imagination pour un joli look... 🙂

 
 

raw html dans l'onglet Texte de l'éditeur
raw html dans l'onglet Rédiger de l'éditeur

 

Les commentaires sont fermés.