Babylon Design

par Samuel Le Morvan

Chez vous aussi, utilisez un Web de qualité

Rubrique Développement Web

Profitez des astuces en tous genres portant sur le développement en général !

Rubrique Développement Web

Markdown et SmartyPants

Présentation rapide de deux outils très pratiques pour vos futurs CMS ou pour tout simplement rédiger facilement vos documents Web.

John Gruber est un rédacteur technique américain de 34 ans. Il tient un blog dédié au Web et au Mac depuis août 2002. Parmi ces projets, deux sont très populaires et très intéressants, Markdown et SmartyPants.

Ces deux projets ont initialement été écrits en Perl mais Michel Fortin à produit une conversion en PHP bien pratique et s’est également chargé de traduire en détails la documentation en français.

Il est alors très facile de mettre en place ces outils sur vos plateformes (WordPress, bBlog, TextPattern, Smarty, etc).

Les deux outils sont par ailleurs librement exploitables (logiciels libres, utilisables selon les termes d’une licence à code ouvert de style BSD).


Markdown

Markdown est un convertisseur de texte vers HTML.

Vous produisez simplement un document au format texte qui sera facilement lisible “brut”, et il sera également facilement transformable en XHTML valide.

C’est très intéressant car il offre la possibilité aux personnes qui ne connaissent pas bien le langage HTML, d’écrire un code propre, adapté au Web, et de façon très simple.

Il est alors possible d’écrire :

  • paragraphes,
  • sauts de ligne,
  • titres,
  • citations,
  • listes,
  • codes,
  • lignes horizontales,
  • liens,
  • emphases,
  • et images.

Markdown Extra

Pour étendre encore plus les possibilités de l’outil, une version spéciale à été développée.

Il est permit alors :

  • d’intercaler du véritable HTML dans le document,
  • d’identifier (id) vos titres,
  • de créer des tableaux simples,
  • d’écrire des listes de définitions,
  • d’écrire des notes de bas de page,
  • et de préciser des abréviations.

SmartyPants

SmartyPants permet de facilement transformer la ponctuation en simple caractères ASCII en entités HTML de ponctuation de façon “typographiquement intelligente.”

Il est en effet assez difficile de bien respecter les régles de ponctuation française sur le Web.

SmartyPants convertira automatiquement :

  • les guillemets,
  • les tirets,
  • et les points de suspension.

SmartyPants Typographer

Là encore, l’outil à été amélorié. SmartyPants Typographer permet :

  • de coder les guillemets en fonction de la langue,
  • et de normaliser les espaces (sécables et insécables).

Exemple

Ce billet est par exemple intégralement mis en forme à l’aide de Markdown et de SmartyPants. Voici le code pour que vous poussiez vous rendre compte de la simplicité du langage et de sa lisibilité.

Markdown et SmartyPants ----------------------- John Gruber est un rédacteur technique américain de 34 ans. Il tient [un blog](http://daringfireball.net/) dédié au Web et au Mac depuis août 2002. Parmi ces projets, deux sont très populaires et très intéressants, _Markdown_ et _SmartyPants._ Ces deux projets ont initialement été écrits en Peal mais [Michel Fortin](http://michelf.com/) à produit une conversion en PHP bien pratique et s'est également chargé de traduire en détails la documentation en français. Il est alors très facile de mettre en place ces outils sur vos plateformes (WordPress, bBlog, TextPattern, Smarty, etc). Les deux outils sont par ailleurs librement exploitables (logiciels libres, utilisables selon les termes d’une licence à code ouvert de style BSD). -------------------------------------------------------------------------------- ### Markdown Markdown est un **convertisseur de texte vers HTML.** Vous produisez simplement un document au format texte qui sera facilement lisible "brut", et il sera également facilement transformable en XHTML valide. C'est très intéressant car il offre la possibilité aux personnes qui ne connaissent pas bien le langage HTML, d'écrire un code propre, adapté au Web, et de façon très simple. Il est alors possible d'écrire :  - paragraphes,  - sauts de ligne,  - titres,  - citations,  - listes,  - codes,  - lignes horizontales,  - liens,  - emphases,  - et images. #### Markdown Extra Pour étendre encore plus les possibilités de l'outil, une version spéciale à été développée. Il est permit alors :  - d'intercaler du véritable HTML dans le document,  - d'identifier (`id`) vos titres,  - de créer des tableaux simples,  - d'écrire des listes de définitions,  - d'écrire des notes de bas de page,  - et de préciser des abréviations. -------------------------------------------------------------------------------- ### SmartyPants SmartyPants permet de facilement transformer la **ponctuation** en simple caractères ASCII en entités HTML de ponctuation de façon **"typographiquement intelligente."** Il est en effet assez difficile de bien respecter les [régles de ponctuation française sur le Web](http://edu.ca.edu/typo/). SmartyPants convertira automatiquement :  - les guillemets,  - les tirets,  - et les points de suspension. #### SmartyPants Typographer Là encore, l'outil à été amélorié. SmartyPants Typographer permet :  - de coder les guillemets en fonction de la langue,  - et de normaliser les espaces (sécables et insécables). -------------------------------------------------------------------------------- ### Exemple Ce billet est par exemple **intégralement** mis en forme à l'aide de Markdown et de SmartyPants. Voici le code pour que vous poussiez vous rendre compte de la simplicité du langage et de sa lisibilité.     (ici se trouve le code) Regardez également le code HTML produit si vous le désirez. Et profitez-en pour noter les subtilités mise en place au niveau de la ponctuation. -------------------------------------------------------------------------------- ### Ressources  - [Le projet Markdown chez John Gruber](http://daringfireball.net/projects/markdown/)  - [Le projet Markdown chez Michel Fortin](http://michelf.com/projets/php-markdown/)  - [Le projet Markdown Extra chez Michel Fortin](http://michelf.com/projets/php-markdown/extra/)  - [Le projet SmartyPants chez John Gruber](http://daringfireball.net/projects/smartypants/)  - [Le projet SmartyPants chez Michel Fortin](http://michelf.com/projets/php-smartypants/)  - [Le projet SmartyPants Typographer chez Michel Fortin](http://michelf.com/projets/php-smartypants/typographer/)  - [Le banc d'essai chez Michel Fortin](http://michelf.com/projets/php-markdown/banc-d'essai/) *[XHTML]: eXtensible Hypertext Markup Language *[HTML]: Hypertext Markup Language *[ASCII]: American Standard Code for Information Interchange *[PHP]:   PHP Hypertext Preprocessor *[etc]:   et cætera *[BSD]:   Berkeley Software Distribution 

Regardez également le code HTML produit si vous le désirez. Et profitez-en pour noter les subtilités mise en place au niveau de la ponctuation.


Ressources

Les commentaires sont clos.