Rigueur. Et passion !

Ne dites pas à ma mère que je suis artisan en architecture de l'information appliquée aux sites web : elle croit que je suis webdesigner, intégrateur HTML & CSS, rédacteur web, formateur NTIC et consultant en webmarketing depuis 2001 ! Voulez-vous en savoir plus ?

Le blog de l'intégrateur web

Memento pour la syntaxe Markdown en usage dans les commentaires

Vous pouvez désormais utiliser la syntaxe Markdown dans la zone des commentaires. Cette syntaxe est très facile à utiliser et également très complète, mais tout n’est pas indispensables pour écrire un commentaire. Voici donc les éléments les plus utiles :

Paragraphe

Un nouveau paragraphe s’obtient en sautant une ligne. Comme d’habitude.

Blocs de citation

> Voici une citation qui tient sur un paragraphe

> Voici une citation qui contient deux paragraphes : le premier,

> et le deuxième.

Bloc de code

Pour écrire un bloc de code, il suffit d’indenter chaque ligne avec au moins 4 espaces ou une tabulation :

Un paragraphe normal     un bloc de code

Note : pour écrire du code au fil du texte, il faut utiliser l’accent grave seul (Alt GR 7 sur mon clavier suivi d’un espace)

Je préfère `text-indent: -9999` à `display: none`

Les listes

Listes non-ordonnée ul

Démarrez avec un astérisque. Il est possible d’utiliser le signe + (plus) ou le – (tiret) à la place.

* item 1

* item 2

* item 3

Listes ordonnée ol

Démarrez avec un chiffre suivi d’un point.

  1. item 1

  2. item 2

  3. item 3

Les liens

L’ancre du lien est délimitée par des crochets, tandis que l’URL est encadrée par des parenthèses.

Voici la syntaxe pour donner un [lien externe](url du lien externe).

Pour les plus pointilleux d’entre vous, voici un [lien](url du lien "le title") agrémenté d’un title.

Mise en évidence

Il faut utiliser deux astérisques devant et après le terme pour renforcer le texte strong

**En gras sur ce blog**

Utilisez un astérisque avant et après le terme à mettre en emphase em

*En italique sur ce blog*

Conclusion

Je vous invite fortement à vous rendre sur le site de Michel Fortin pour voir les possibilités de Markdown. Voici d’autres informations sur Markdown avec WordPress.

PS : Le respect de la vie privée sur internet est important : j'ai décidé d'échanger mon bouton Like de Facebook par un bouton Faire un don de Paypal car Il n'y pas d'amour, il n'y a que des preuves d'amour (Jean Cocteau) ;) Merci d'avance.



21 commentaires pour “Memento pour la syntaxe Markdown en usage dans les commentaires”

  1. Martin dit :

    J’avoue ne pas être très fan de ce genre de solutions qui peuvent s’avérer intéressantes quand on écrit via un éditeur non WYSIWYG de longs textes, mais qui n’a pas grand intérêt dans le cadre des commentaires, notamment, ou lorsqu’on peut tout simplement ajouter un éditeur WYSIWYG, comme TinyMCE, par exemple, en version allégée si besoin, sans que cela ne soit très coûteux (mise en cache par le navigateur, compression des scripts, etc.), quitte à mettre la page de saisie du commentaire sur une page distincte.

    (Tiens, je suis fort intrigué de savoir pourquoi cette page comporte deux publicités contextuelles assez originales : .l’une pour un tchat gay, .l’autre pour un site de rencontres hétérosexuel.)

  2. Martin dit :

    Mince, je ne suis pas doué pour MarkDown, on dirait… (cf. fin du commentaire précédent). Comme quoi, garder une même technologie (en l’occurrence ici le XHTML) pour la rédaction des commentaires est un bon plan. Essayons pour voir :

    1. un,
    2. deux.

    J’aurai l’air fin si ma démonstration ne fonctionne pas ! ;-)

  3. Martin dit :

    Oh, ma démonstration en XHMLT a fonctionné ! En revanche, ton CSS ne semble pas supporter de listes numérotées dans les commentaires…

  4. Luc dit :

    Ben ouaip… Je suis pour l’utilisation de tinyMCE dans les commentaires… Ca permettras au nouveau sur le site, ceux qui ne conaissent pas la syntax et autre de publier avec toutes les options necessaires

    surtout que l’on sait que tinyMCE en advanced est assez facilement customizable pour autoriser ou supprimer des fonctions…

    quitte a aller jusqu’a la CSS de l’éditeur…

  5. Bruno Bichet dit :

    @Martin > En fait, tout dépend du public et du style des commentaires. La plupart du temps les commentaires sont composés d’un ou deux paragraphes et il n’y a pas forcément besoin d’outils de mise en forme.

    En fait, j’ai un peu peur que la mise à disposition d’un éditeur WYSIWYG dans cette zone n’incite quelques uns à mettre du gras, de l’italique de partout au risque de tuer la lisibilité.

    Alors, c’est un peu « élitiste », j’en conviens, mais je préfère « réserver » aux visiteurs avisés la possibilité de laisser un commentaire enrichi en liste, emphase, etc. en connaissance de cause.

    pourquoi cette page comporte deux publicités contextuelles assez originales

    Pour les publicité « contextuelles », je ne sais pas exactement comment Google fonctionne. Enfin, si j’ai bien une idée un peu tirée par les cheveux :

    Google ne sa base pas que sur le contenu d’un site pour placer les publicités, il se base aussi sur le profil des visiteurs : un blog de geek ou un blog qui traite de développement attire majoritairement :

    • des personnes du sexe masculin (voilà pour les pubs hétérosexuelles)
    • et à fort pouvoir d’achat (voilà pour les tchats gays) ;))

    PS : je viens de corriger les liste ordonnées.

  6. Bruno Bichet dit :

    @Luc > C’est pas faux, mais je trouve que pour les commentaires Markdown est amplement suffisant et suffisamment léger pour ne pas se faire remarquer, autant dans le code que visuellement. C’est juste une aide pour les contributeurs les plus motivés, vu qu’il était déjà possible de saisir des balises html.

    Et puis quand on rédige vite fait, je trouve que les blocs de citations sont plus rapides à faire qu’en wysiwyg, comme beaucoup d’autres manipulations, d’ailleurs :)

  7. Martin dit :

    Alors dans ce cas, posons le problème autrement : combien d’utilisateurs utilisernt la syntaxe Markdown dans les 30 jours à venir ? combien d’entre eux continueront à utiliser du XHTML dans l’espoir qu’un éditeur WYSIWYG soit mis à disposition sur tous les blogs ?

    Certains blogs Over-Blog utilisent TinyMCE pour les commentaires et très peu de gens s’en servent pour enrichir les commentaires de mise en page (je dois en être le principal utilisateur… ;-)) En revanche, quand on fait du XHTML à la main, on a tendance à oublier une balise @lt;b> ouverte sans la fermer et ça casse toute la mise en page d’un blog rapidement. J’ai déjà vu ça chez pas mal de blogueurs et j’ai moi-même laissé des commentaires aux balises erronnées.

    Bien sûr, tu peux affirmer, cher Bruno (tiens, je peux mettre du gras, na !), que justement, notre ami Markdown ne permet pas d’oublier une balise ouverte non fermée. Cependant, après avoir passé trois ans sans éditeur WYSIWYG à taper du XHTML à la main de bout en bout, alors que j’avais deux ou trois dialectes de Markdown volontairement désactivés, je peux t’assurer qu’à moins de faire d’énormes efforts, je continuerai à utiliser du XHTML pour polluer ton blog de ma prose ! :-P

    (D’ailleurs, tu as vu les quelques mots-clés mis en italique ? On verra si ça sert au référencement. J’aime aussi jouer sur le référencement de mes amis les blogueurs. ;-))

  8. Bruno Bichet dit :

    @Martin > je te comprends bien dans la mesure où j’ai passé ma première année de blogging avec Dotclear 1.2.x qui proposait soit de saisir les billets en xhtml soit en wiki.

    N’aimant pas trop le wiki, j’ai tout fait en xhtml, en validant systématiquement les billets depuis l’éditeur de Dotclear (tiens, un validateur intégré, ça manque à WordPress).

    Mais dans le cadre des commentaires, Markdown me convient bien. Et si je devais être le seul à l’utiliser dans les 30 jours à venir, je serais déjà satisfait :)

    Tu seras toujours le bienvenue pour pouvoir « polluer » ce blog imparfait avec ta prose toujours pertinente (enfin, pour l’instant :D )

    PS : merci de contribuer à augmenter la densité en mots-clés pour favoriser mon référencement naturel !

    a++

  9. Li-An dit :

    Moi je suis un fervent défenseur de Markdown. Comme par défaut, il fonctionne dans les commentaires, je l’ai signalé à mes visiteurs. Seuls quelques uns l’utilisent régulièrement mais je trouve cette solution plus souple que **TinyMCE** qui pollue les thèmes avec ses icones flashy :-)

  10. Martin dit :

    @Li-An : Il suffit de ne pas permettre aux utilisateurs d’ajouter des icônes flashy dans l’interface des commentaires de TinyMCE. Pour ma part, je note que le premier utilisateur externe à publier un commentaire en Markdown abuse des étoiles « * » ! ;-)

  11. Martin dit :

    Oh, tiens, autre chose : pas besoin de TinyMCE pour polluer les commentaires de smileys à la con ! :-P À croire que ce n’est pas ton TinyMCE le responsable, mais la case cochée permettant l’insertion automatique d’icônes de WordPress !

  12. Bruno Bichet dit :

    @Li-An: J’aime bien la simplicité de Markdown, mais comme je l’utilise uniquement dans les commentaires, c’est une solution discrète qui risque de passer inaperçue de la plupart des commentateurs…

    @Martin: … donc je verrais bien à l’usage si les lecteurs s’en servent un peu, beaucoup, passionnément ou pas du tout ;)

    Mais perso, je n’ai rien contre tinyMCE, et après avoir cherché longtemps une alternative à l’éditeur intégré de WP, je trouve qu’ils ont fait pas mal de progrès avec la dernière version.

  13. Luc dit :

    Je test :

    test de citation

    ça marche ?

  14. Bruno Bichet dit :

    @Luc: si tu a voulu citer une citation, alors oui, ça a marché :)

  15. Li-An dit :

    Tiens, je reviens pour dire que je pensais que les ** me feraient du gras mais ça n’a pas marché ?

  16. Bruno Bichet dit :

    @Li-An : si si, je vois bien le mot gras en gras mais c’est léger, en effet ;)

  17. Mathieu dit :

    Je n’ai jamais utilisé le markdown mais ça à l’air d’être une bonne alternative au HTML.

  18. David dit :

    J’en ai marre. Non, le style magazine n’est pas une question de look. Vous faites une grave erreur. Tout est question de structure, de visibilité et d’organisation du contenu. Je trouve que la navigation dans le site est une catastrophe. Je me suis perdu dès le départ. Aussi, trop de pub tue la pub. Et pourquoi diable une page propre au champ de recherche ?!!! Mais arrêtez bon sang ! Retirez le mot « tendance » de votre vocabulaire. Un jour « style web 2.0″, puis « style grunge », puis « style vintage », puis « style hand-writing » et j’en passe ! J’ai compris qu’il n’existait qu’un seul style valable et authentique : « Designer son soi-même ». Oui, on a le droit de copier un style, non il n’y a rien de mal a ça. Et même mieux, essayons d’améliorer le style, l’idée, et pas seulement en faire une pâle copie « sans âme ». C’est une calamité de tomber sur un tel contenu lorsque je tape « thème magazine » sur Google.fr. Ressaisissez-vous. Copie à refaire.

  19. Mathieu dit :

    mais oui quelle calamité! où va le monde! oh là là vite David montrez nous la voie.

  20. Bruno Bichet dit :

    @David:

    Non, le style magazine n’est pas une question de look

    Bah, si un peu quand même ;) D’ailleurs, dans style magazine (ta propre formulation) il y a « style » et le style, c’est du look ! CQFD.

    Tout est question de structure, de visibilité et d’organisation du contenu

    Tout à fait d’accord, et ce n’est pas forcément en contradition avec la question du look.

    Je trouve que la navigation dans le site est une catastrophe.

    Il y a pas mal de choses qui me gêne moi aussi, mais bon, faut pas exagérer : mon site est quand même assez proche du fonctionnement d’un blog et au final, à part le fait d’avoir un édito et un billet « Vu sur le web » qui ne suivent pas la chronologie, tout le reste est accessible comme sur n’importe quel blog.

    Aussi, trop de pub tue la pub

    Vi, mais par ces temps de crise, il faut ce qu’il faut, non ?

    Et pourquoi diable une page propre au champ de recherche

    Parce que j’avais besoin de la recherche Google pour remplacer (enfin, l’ancien champs de recherche existe toujours) la recherche intégrée à WordPress. Mais il est prévu que le champs Google remplace le champs d’origine quand j’aurais un peu de temps ;)

    Retirez le mot “tendance” de votre vocabulaire. Un jour “style web 2.0″, puis “style grunge”, puis “style vintage”, puis “style hand-writing” et j’en passe !

    La requête « style magazine » appportait pas mal de visiteurs sur ce blog. je vais essayer “style grunge”, puis “style vintage”, puis “style hand-writing” pour voir :D

    Oui, on a le droit de copier un style, non il n’y a rien de mal a ça

    Heu, là, je ne vois pas trop quel style j’aurais copié

    C’est une calamité de tomber sur un tel contenu lorsque je tape “thème magazine” sur Google.fr.

    Tout le monde a le droit d’être déçu. Finalement, c’est la faute à Google, pas la mienne.

    @Mathieu: lol, c’est vrai ça, ou va-t-on si on laisse des pauvres intégrateurs web parler de thème magazine, de graphisme, etc. ;)

  21. David dit :

    Je n’ai pas de leçon à donner Mathieu. Bruno, mon commentaire était un avis totalement personnel. Peut-être aurai-je du insister sur le fait, au final, qu’il ne s’agissait que d’une question de goût (d’un internaute parmi d’autres) Vous m’avez répondu honnêtement et c’est bien. Personne n’aime se faire critiquer aussi facilement. Sachez simplement que je n’avais pas la volonté d’être désagréable. Je suis déçu, c’est tout.

Laissez un commentaire

Vous pouvez utiliser les balises HTML suivantes : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Les commentaires sont publiés sous votre pleine et entière responsabilité et ne doivent pas contrevenir aux lois et règlementations en vigueur. Les propos racistes ou antisémites, diffamatoire ou injurieux, divulguant des informations fausses, relatives à la vie privée d'une personne ou utilisant des oeuvres protégées par les droits d'auteurs ne sont pas les bienvenus et seront modérés sans modération.

Merci d'être constructif et n'oubliez pas : « sans la liberté de ramer il n'est point d'éloge flotteur ! »



Colophon

css 4 design est une publication irrégulomadaire à tendance hebdomadaire
éditée par Bruno Bichet qui carbure à WordPress et au café équitable.
Tous droits réservés © 2006 - 2010.

Contactez l'auteur du site

Google Analytics Alternative