←

→

Markdown et SmartyPants

octobre 25th, 2008 | Bonnes pratiques

Billet initialement publié chez Babylon-Design, reprit ici pour :

  1. faire la promotion de ses deux outils que j’affectionne particulièrement ;
  2. compléter un peu plus mon analyse.

Introduction

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 en à produit une conversion en PHP. Il c’est également chargé de traduire en détails la documentation en français.

Vous verrez qu’il est par ailleurs très facile de mettre en place ces deux outils (complémentaires) sur vos plateformes habituelles (WordPress, bBlog, TextPattern, Smarty, etc).

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

Markdown

Markdown est un un langage de balisage léger qui convertit du texte en HTML.

Vous produisez simplement un document au format texte et il sera facilement transformé en XHTML valide.

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

Autre avantage1, Markdown propose un langage très lisible dans son format texte.

Il sera 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 avec cette version Extra :

  • d’intercaler du véritable HTML dans le document ;
  • d’identifier (par des id) vos titres2 ;
  • de créer des tableaux simples ;
  • d’écrire des listes de définitions (dl,dt,dd) ;
  • d’écrire des notes de bas de page ;
  • et de préciser des abréviations (mais pas les acronymes).

Somme tout une panoplie d’éléments très riche, qui s’enrichit d’autant que ses éléments peuvent se combiner entre eux.

SmartyPants

SmartyPants permet de facilement transformer la ponctuation « courante » en entités HTML et ce 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 donc pour vous automatiquement :

  • les guillemets (« comme ici ») ;
  • les tirets (ou - comme là) ;
  • et les points de suspension (enfin vous voyez quoi…).

SmartyPants Typographer

Là encore, l’outil à été amélioré et 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. Aucun code HTML n’a été tapé. Voici le code pour que vous poussiez vous rendre compte de la simplicité du langage et de sa lisibilité.

    _Billet [initialement publié chez Babylon-Design](http://www.babylon-design.com/site/index.php/2008/02/18/217-markdown-et-smartypants), reprit ici pour :_

    1. _faire la promotion de ses deux outils que j'affectionne particulièrement ;_
    2. _compléter un peu plus mon analyse._

    --------------------------------------------------------------------------------

    ### Introduction

    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](http://fr.wikipedia.org/wiki/Perl_5) mais [Michel Fortin](http://michelf.com/) en à produit une conversion en PHP. Il c'est également chargé de traduire en détails la documentation en français.

    Vous verrez qu'il est par ailleurs très facile de mettre en place ces deux outils (complémentaires) sur vos plateformes habituelles (WordPress, bBlog, TextPattern, Smarty, etc).

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

    --------------------------------------------------------------------------------

    ### Markdown

    Markdown est un un [langage de balisage léger](http://fr.wikipedia.org/wiki/Langage_de_balisage_l%C3%A9ger) qui **convertit du texte en HTML.**

    Vous produisez simplement un document au format texte et il sera facilement transformé en XHTML valide.

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

    Autre avantage[^1], Markdown propose un langage **très lisible dans son format texte.**

    Il sera 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 avec cette version Extra :

     - d'intercaler du véritable HTML dans le document ;
     - d'identifier (par des `id`) vos titres[^2] ;
     - de créer des tableaux simples ;
     - d'écrire des listes de définitions (`dl`,`dt`,`dd`) ;
     - d'écrire des notes de bas de page ;
     - et de préciser des abréviations (mais pas les acronymes).

    Somme tout une panoplie d'éléments très riche, qui s'enrichit d'autant que ses éléments peuvent se combiner entre eux.

    --------------------------------------------------------------------------------

    ### SmartyPants

    SmartyPants permet de facilement transformer la ponctuation "courante" en entités HTML et ce 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 donc pour vous automatiquement :

     - les guillemets ("comme ici") ;
     - les tirets (ou - comme là) ;
     - et les points de suspension (enfin vous voyez quoi...).


    #### SmartyPants Typographer

    Là encore, l'outil à été amélioré et 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. Aucun code HTML n'a été tapé.
    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 (en affichant la source). Et profitez-en pour noter les subtilités mise en place au niveau de la ponctuation.

    --------------------------------------------------------------------------------

    ### Limitations et alternatives

    Markdown à de nombreux concurrents : 

     - [Textile](http://fr.wikipedia.org/wiki/Textile_(langage))
     - [Wikitexte](http://fr.wikipedia.org/wiki/Wikitexte)
     - [BBCode](http://fr.wikipedia.org/wiki/BBCode)
     - [Raccourcis SPIP](http://www.spip.net/fr_article1578.html)

    Cependant ils présentent tous sans exception une syntaxe un peu plus complexe à lire au format texte brut.

    Cependant le langage Markdown n'est pas exempt de défaut. Il lui manque actuellement une gestion de l'accessibilité qui permettrait de préciser les changements de langue par exemple.  

    --------------------------------------------------------------------------------

    ### 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/)

    [^1]:Et c'est ce qui fait la grande force de cet outil !

    [^2]:Et donc de créer par exemple des sommaires...

    *[XHTML]: eXtensible Hypertext Markup Language
    *[HTML]: Hypertext Markup Language
    *[PHP]: PHP Hypertext Preprocessor
    *[etc]: et cætera
    *[SPIP]: Système de Publication pour l'Internet Partagé 
    *[BSD]: Berkeley Software Distribution

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

Limitations et alternatives

Markdown à de nombreux concurrents :

Cependant ils présentent tous sans exception une syntaxe un peu plus complexe à lire au format texte brut.

Cependant le langage Markdown n’est pas exempt de défaut. Il lui manque actuellement une gestion de l’accessibilité qui permettrait de préciser les changements de langue par exemple.

Ressources

  1. Et c’est ce qui fait la grande force de cet outil ! ↩

  2. Et donc de créer par exemple des sommaires… ↩

4 commentaires ↓

#1 Stéphane Deschamps le 10.28.08 à 22:49

Oui, pas mal.

</taquin> :)

Mais bon, internationalisation, etc. ?

#2 Vincent le 10.28.08 à 23:21

Zut, j’avais oublié ça… Ouep, SPIP est bien plus complet sur ce point aussi !

#3 Vincent le 06.10.09 à 13:09

Tiens je précise quand même qu’il est tout à fait possible de se débrouiller quand même un peu :

### <span lang="en">Markdown</span>, c'est **super !**

#4 Vincent le 06.10.09 à 13:16

D’autres liens :

Laisser un commentaire

Mise en forme : vous pouvez utiliser la syntaxe Markdown. Vous verrez, c’est chouette !