afficher du code sur son wordpress : wp-codebox

bonjour,

Voilà, je rencontre très souvent le même problème quand je passe en mode mini-geek, c’est que je n’arrive pas à vous mettre du code proprement sur ce blog pour vous expliquer un truc que j’ai fait par exemple. Et là, je suis en train de tester trois éditeurs de php gratuits, et de chercher quel est le plus sympa. Pour vous montrer tout ça, je risque d’avoir besoin de vous mettre du code, et donc je me retrouve avec la balise <pre> et… ben c’est tout… Pas top top, ça donne ça :

<br>voilà, la je tape le code en <b>gras</b> par exemple <br>

et moi, ça me plait pas des masses… Alors je me suis mise à fureter à la recherche du plugin qui va bien… Alors j’en ai essayé plein, des très complets, des compliqués, et j’aime pas trop me prendre la tête… Et j’ai trouvé wp-codebox, très simple, se base sur la balise <pre>, vous rajoutez le langage que vous souhaitez afficher le le tour est joué : <pre lang= »php »> par exemple ici : l’endroit à modifier dans ma sidebar pour mettre les liens vers mes catégories :

^?View Code PHP

1
2
3
4

<!-- THESE ARE THE LINKS YOU GO TO WHEN YOU CLICK ON A SLIDING DOOR IMAGE-->
				<!-- change the href to look like this: <a href="yourlink.com" mce_href="yourlink.com">     -->
	<li class="bk1"><a href="http://drine.info/category/photo-nature/">Photos Nature</a></li>
	<li class="bk2"><a href="http://drine.info/category/photo-faune/">Photos Faune</a></li>

J’aime avoir la coloration syntaxique, très pratique, j’aime avoir la numérotation des lignes… vous pouvez commencer la numérotation des lignes plus loin en rajoutant par exemple line= »15″, ce qui donne :

^?View Code PHP

15
16
17
18

<!-- THESE ARE THE LINKS YOU GO TO WHEN YOU CLICK ON A SLIDING DOOR IMAGE-->
				<!-- change the href to look like this: <a href="yourlink.com" mce_href="yourlink.com">     -->
	<li class="bk1"><a href="http://drine.info/category/photo-nature/">Photos Nature</a></li>
	<li class="bk2"><a href="http://drine.info/category/photo-faune/">Photos Faune</a></li>

pour finir, vous pouvez afficher ou masquer la box en ajoutant colla= »+ » ou colla= »- »

^?View Code PHP

1
2
3
4

<!-- THESE ARE THE LINKS YOU GO TO WHEN YOU CLICK ON A SLIDING DOOR IMAGE-->
				<!-- change the href to look like this: <a href="yourlink.com" mce_href="yourlink.com">     -->
	<li class="bk1"><a href="http://drine.info/category/photo-nature/">Photos Nature</a></li>
	<li class="bk2"><a href="http://drine.info/category/photo-faune/">Photos Faune</a></li>

Vous avez une petite interface d’administration, et de nombreux langages sont supportés. Par contre, l’éditeur visuel de wordpress ne le supporte pas, et le code s’affiche comme s’il était transformé (là pour le coup, je vois une liste avec « photos nature » et « photos faune »). Pour info, je suis revenue à l’éditeur visuel de base de wordpress après de nombreuses pérégrinations.

Sinon, vous avez d’autres exemples de ses capacités ici : http://www.ericbess.com/ericblog/2008/03/03/wp-codebox/#examples

En cliquant sur « viewcode », vos lecteurs auront une petite pop-up qui apparait avec le code brut, facile à copier.

voili voiloup, je comptais taper mon autre billet aujourd’hui, mais EDF nous a annoncé une coupure de courant une bonne partie de l’aprèm… pas grave, on commence à avoir l’habitude…..
bonne journée 

EDIT = au moment de publier, les deux possibilités de commencer la numérotation plus loin et de faire apparaitre ou non la box ont été scratchées par mon wp… il faut éviter de repasser par l’éditeur visuel avant la publication apparemment… et on dit merci wordpress