En Avant pour le Makdown.

Bonjour à tous on va parler markdown!

Vous avez sûrement entendu parler de markdown ici et là avec l’arrivée de ghost par exemple et la généralisation de ghitub et dans pas mal de pages de commentaires de blog ainsi que dans stackoverflow la plateforme de question-réponse.

Mais d’abord on commence pas citer Wikipedia, pour L’histoire :

Markdown est un language de balisage léger créé par John Gruber et Aaron Swartz en 2004. Son but est d’offrir une syntaxe facile à lire et à écrire. Un document formaté selon Markdown devrait pouvoir être publié comme tel, en texte, sans donner l’impression qu’il a été marqué par des balises ou des instructions de formatage.

Un document rédigé en Markdown peut être converti facilement en HTML.

Voilà ?..

Concrètement c’est une façon facile et élégante de faire de la mise en page pour des documents destinés au web, donc à être transformé en HTML <h1><p><strong> etc sans avoir à l’écrire, ce qui permet d’ajouter à nos textes du gras où de l’italique, faire des titres hiérarchique h1,h2 et de créer des liens sans se prendre la tête simplement au clavier, pas ou peu de crt alt tout est basé sur l’ajout de dièse, étoile, point, égal, underscore autour des mots. Ainsi vos textes restent bien lisibles.

Dans un cas pratique: c’est toujours galère de se retrouver à devoir expliquer à un client comment mettre son texte en page dans les fichiers fournis ou sous WordPress.
Et pour en finir avec les fichiers “Word” tout chenit. Dans un cas comme celui du podcast le markdown va nous permettre de rédiger les notes (dans des applications, Native, Web ou iPad directement avec la bonne mise en page et ensuite de copier coller simplement nos notes dans le billet du blog.

Le markdown étant un language basé sur du text plain, vous pouvez facilement créer des fichiers .txt avec le bloc-note. Mais il existe quelques apps qui façilitent davantage la chose… Mais ça, on en parle après

Allez passons au markdown!

Voici quelques exemples de balisage.

Les syntaxes de base pour le markdown sont:

Les titres:

Pour créer des titres, on utilise le dièse # autant de dièses que la valeur de la balise <h>un dièse pour un h1 deux dièses pour un h2.

    #titre sera l'équivalent d'un <h1> en html.
    ##titre2 sera l'équivalent html d'un <h2>
    ###titre3 #####titre4 ainsi de suite jusqu'à 6. 

À noter que vous pouvez aussi fermer le titre avec des dièses mais ce n’est pas obligatoire, ce n’est qu’une question d’esthétique .. Et que leur nombre est égal.

On peut aussi, pour les titres de niveau 1 et 2 créer un effet plus visuel qui, une fois converti en html sera aussi des h1 et h2.

On peut donc écrire:

Mon titre de niveau 1 
================

 Mon titre de niveau 2
------------------------------

Ce qui peut rendre le fichier en markdown plus jol. le nombre de signes importe peu, mais il en faut minimum 3.

Les mises en formes:

Pour la suite du balisage simple on retrouve donc le gras et l’italique qui se font comme ça:

Le gras **gras** ou __gras__ donc double étoile ou double underscore de chaque côté du mot. 

Personnellement, je préfère les doubles ** plus lisible et plus simple à la frappe.

Pour l’italique:
C’est encore plus simple italique ou italique donc simple étoile ou underscore de chaque côté du mot.

Là encore, les étoiles sont plus simples et lisibles.

Pour les paragraphes et sauts de lignes:

Pour créer un paragraphe, il faut faire 2 retours à la ligne. Un seul vous permet de limiter la longueur d’un texte mais ne fera pas de nouveau paragraphe ni de saut de ligne <br/> pour faire ce dernier, il faut ajouter 2 espaces à la fin d’une ligne.

Pour créer une ligne horizontale ou <hr /> plusieurs options s’offrent à vous. Il faut simplement les avoir seuls, donc 2 sauts de lignes avant et 2 sauts lignes après. Ensuite ce n’est qu’une question d’esthétique chacunes de ces syntaxes produiront au final un <hr /> .

* * *

***

*****

- - -

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

_ _ _

Les Listes

Je vais poursuive avec les listes ordonnées ( 1. 2. 3. ) et non ordonnées (bullet point).
C’est le plus ennuyeux à écrire lorsque l’on veut faire des listes en html car il faut les mettre entre plusieurs lignes de code:

 <ul>
          <li> premier bullet point</li>
          <li> second bullet point</li>
 <\ul>

C’est vraiment fastidieux à écrire. Mais Markdown est notre ami!
Il suffira pour des bullets point. Là encore plusieurs solutions s’offrent à vous mais produisent le même code au final. Nous avons le choix entre, l’étoile, le plus ou le moins:


* 1er de la liste
* second de la liste
* troisième de la liste

.
Il faut bien mettre un espace entre l’étoile et le texte ce qui rend ça (ici sur 925 les puces sont remplacée par des +):

  • 1er de la liste
  • second de la liste
  • troisième de la liste

. On peut imbriquer les listes facilement:


* liste 1.1
 * sous liste 1
 * sous liste 2 
* liste 2.1 

Ce qui a pour rendu ceci:

  • liste 1.1
    • sous liste 1
    • sous liste 2
  • liste 2.1

On pourrait pour un soucis de lisibilité varier les marqueurs


* liste 1.1
  - sous liste 1
  - sous liste 2 
* liste 2.1 

Ce qui aurait le même rendu.

Pour les listes ordonnées même façon de faire: les marqueurs seront simplement un chiffre suivi d’un . et d’un espace:


1. Premier
2. Deuxième 
3. Troisième 

Ce qui va avoir cette apparence:

  1. Premier
  2. Deuxième
  3. Troisième

Petit truc amusant, on peut mélanger les chiffres du moment que l’on commence par 1.


1. Premier
3. Deuxième 
6. Troisième 

aura le même rendu que la liste d’avant à savoir:

  1. Premier
  2. Deuxième
  3. Troisième

pour terminer avec les listes on peut bien sûr imbriquer une liste ordonnée dans une liste non ordonnée et vice et versa.

Les citations

pour créer une citation ou un <blockquote>

Il suffit de voir comme il est communément utilisé, de la correspondance par mail de mettre le signe > au début de chaque phrase de la quote ou lorsqu’on est des fainéants, au début de chaque paragraphe à mettre en quote

 >  If you do what you always did, you will get what you always got.

donnera:

If you do what you always did, you will get what you always got.

ou comme ceci:

> A good designer finds an elegant way to put everything you need on a page.
> A great designer convinces you half that shit is unnecessary.
>— MIKE MONTEIRO

A good designer finds an elegant way to put everything you need on a page.
A great designer convinces you half that shit is unnecessary.
— MIKE MONTEIRO

il est bien sûr possible de mettre du gras ou des titres dans les citations. et même d’imbriquer ces dernières.

le Code

Comment afficher du code? Je ne vous cache pas que cet article c’est la partie que j’ai le plus utilisé. En gros 2 façons d’afficher du code: soit par block. soit juste une phrase ou mot. Commençons avec les block de code pour afficher comme dans cet article des blocks de code. Il suffit de mettre quartes espaces ou une tabulation, avant chaque ligne de la partie à mettre en code.

_ _ _ _ <h1>le titre</h1>
_ _ _ _  <p class="copyright">©6clicks</p>

dans ces parties de code tout est interpreté comme du texte le markdown transformera automatiquement le code ci-dessus en (les petits traits étaient pour symboliser 4 espaces)

<pre><code>
 &lt;h1&gt;le titre&lt;/h1&gt;
 &lt;p class="copyright"&gt;©6clicks&lt;/p&gt;
</code></pre>

il est aussi possible de mettre juste un mot ou une phrase en code comme quand je cite une balise par exemple.
Avec autour du mot des accents graves. ( bonjour le raccourcis clavier de m….) sur un clavier QWERTZ (Suisse MAC) c’est MAJ ^ et sur un AZERTY c’est Alt Gr + 7 ( d’après OpenclassRoom).

les titres de niveaux supérieur son entre des balises <h1>

et en HTML

    <p>les titres de niveaux supérieur sont entre des balises <code>&lt;h1&gt;</code></p>

Il nous reste une partie importante: les liens et les images. Vous verrez c’est plutôt proche comme approche:

Les liens

tout de suite 2 voir 3 façons différentes de gérer les liens. On va aller dans l’ordre de complexité.

La première dite du fainéant (simple link): tout simplement taper l’url entouré de <et de > comme ceci: <http://www.podsource.ch> ce qui aura comme rendu:
http://www.podsource.ch
fait!
Ok mais c’est moche comme rendu moi je veux un mot clicable (in line link).
On commence par donner le mot qui sera clicable entre crochets:
[mon mot](toujours pour la Suisse sur MAC “Alt ( option) 5 pour ouvrir et 6 pour fermer). dans notre cas [podsource] ensuite on déclare l’URL tout de suite après entre parenthèses (http://www.podsource.ch) et en option on peut et on devrais déclarer le texte alternatif ( affiché au survol ) donc encore dans la parenthèse entre guillemets cette fois le texte alternatif "Webdesign Podcast" au final [podsource](http://www.podsource.ch"Webdesign Podcast") et le rendu: podsource
C’est bien beau mais on s’éloigne du but premier de markdown d’être avant tout lisible ce gros paté dans le texte merci! Et c’est là qu’arrive la troisième solution ( Referenced link): on déclare le texte du link comme avant entre les crochets: [podsource] suivi d’autres crochets [] ici encore 2 options: soit on met les crochets vide soit on écrit une “id” dedans ( 1, 2, 3) . regardons les deux dans un joli exemple:

je trouve facilement [podsource][] en recherchant dans [ google ][]

ou

je trouve facilement [podsource][1] en recherchant dans [ google ][2]

ensuite peut importe l’endroit dans le fichier (de préférence à la fin ) on déclare les références des lien comme suit:
pour le premier avec les [] vide.

[podsource] http://www.podsource.ch 'Webdesign Podcast'  
[google] http://www.google.com 'big brother'

le second avec les “Id” référencée:

[1] http://www.podsource.ch 'Webdesign Podcast'  
[2] http://www.google.com 'big brother'

Ici encore il y plein plein de façons avec <> ou encore "" je vous donnerai de toute manière le lien sur la doc officielle plus bas.

Mais notre fichier est bien plus lisible!

avant de passer aux images il reste les liens sur des mails! le mailto: qui en html est pas cool.

<a href="mailto:john@podsource.ch">

en markdown easy comme le 1er lien

<john@podsource.ch>

vous donnera john@podsource.ch à noter que markdown transforme le lien pour que les robots aient plus de mal:

<ahref="&#x6D;&#x61;i&#x6C;&#x74;&#x6F;:&#x61;&#x64;&
#x64;&#x72;&#x65;&#115;&#115;&#64;&#101;&#120;&#x61;&#109;&
#x70;&#x6C;e&#x2E;&#99;&#111;&#109;">&#x61;&#x64;&#x64;&#x72;
&#x65;&#115;&#115;&#64;&#101;&#120;&#x61;&#109;&#x70;&#x6C;
e&#x2E;&#99;&#111;&#109;</a>

on peut aussi mettre le mailto: sur un mot comme pour un lien:



[ contact ](mailto:john@podsource.ch)

voici le rendu:

contact

Les Images

pour les images c’est quasi la même démarche que pour les liens . On ajoute juste un ! avant la déclaration et biensûr l’url de l’image à la place du lien. Voici en action les différentes solutions.

![Alt text](/chemin/vers/img.jpg)

![Alt text](/chemin/vers/img.jpg "title en Option")

dans les faits :

![Way of Life](https://d13yacurqjgara.cloudfront.net/users/40462/screenshots/1585072/wayoflife_teaser.jpg "Way of life")

Way of Life

à nouveau bonjour la lisibilité donc même principe d‘“id”

![Alt text][id]

dans mon cas :

![Way of life][imgsurf]

j’ai choisi ici un “id” plus explicite pour comprendre quelle image sera à cet emplacement. Et en bas de fichier on remplit les liens:

[id]: url/vers/image  "titre attr. en Option"

en vrai:

[imgsurf]:https://d13yacurqjgara.cloudfront.net/users/40462/screenshots/1585072/wayoflife_teaser.jpg "Way of life".

à noter que markdown vit bien sa vie avec le html et que vous pouvez déclarer votre images dans les balises standards.

Echapp

il reste un dernier point à préciser maintenant que vous avez bien compris le principe, vous voudriez parfois écrire dans une phrase du style ” 1. blabla ” sans que cela soit pris pour une balise de markdown. il y a comme dans certains languages style JS, simplement à mettre un backslash\ (là encore un racc clavier qwertz MAC Alt Maj 7)

Mixité:

beaucoup d’articles que j’ai lus commencent avec cette explication. Moi, je préfère terminer avec, maintenant que vous avez compris le concept du markdown. Il est clair que c’est un language qui sert à rendre du texte destiné à être publié en html plus lisible et non à remplacer le thml.

Je vais reprendre la citation de la doc

Le HTML est un format de publication, Markdown est un format d’écriture

Pour n’importe quelle fonction qui n’est pas couverte par la syntaxe de Markdown, vous utilisez directement une balise HTML pas besoin d’avertir au passage de html à markdown et vice et versa.

Pour les balises de block <div>, <table>, <pre>, <p> juste toujours laisser 2 lignes au-dessus et au-dessous de la balise.

Attention les éléments à l’intérieur des balises block ne sont plus traitées par MARKDOWN

par contre vous pouvez utiliser les balises <span>, <cite> ou <del> et là ce qui est à l’intérieur sera traité par markdown. vous pouvez aussi utiliser les balises <img> et <a> si vous le préférez.

Ceci clôture mon article sur le Markdown dans le prochain article on va parler des outils et de l’intégration avec WordPress mais comme dirait quelqu’un de célèbre .

One more thing.

Je ne vais pas vous venter les mérites de Markdown et vous planter sans petit prog: voici la liste des apps que j’utilise et que je détaillerai dans le prochain article.

Pour MAC et PC :

Voici 2 outils en ligne et gratuit syncronisable avec dropbox :

pour Ipad le mieux pour l’instant: http://writeboxapps.com/ CHF 2.-

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *