Apprenez Markdown en 8 jours…!

Voire en 8 heures ou 8 minutes si motivé…!
dans | dans mon bocal | écrire | groummphh | mémoire |

Dès que j’évoque Markdown, j’ai le droit à…

— Oh, mais cela semble super compliqué le balisage Markdown !

Suivi de…

  1. Ça me donne la migraine rien que d’y penser (…provoque une éruption de boutons)
  2. C’est moche (…hideux, laid, abomifreux)
  3. Ces balises sont incompréhensibles et perturbent ma lecture…
  4. Moi, Moooonsieur, j’utilise le même traitement de texte depuis “x” ans et je ne suis pas près de changer, nom de Bleu…!
  5. Mais, le format .txt est forcement propriétaire, non…?

Ne reculant devant aucun sacrifice, faisant fi du ridicule (…qui ne tue pas, rappelons-le… — enfin, pas trop vite !), hop, ce billet qui traite du markdown. une sorte de Méthode Dukown (…un max…) mais pas tant que ça…! Écrit pour ma fille et à mon propre usage…

Préalable : quels outils pour s’y mettre…?

Vous pouvez employer votre traitement de texte habituel mais baliser à la main, c’est (très) vite chi@nt. Autant employer l’une des applications ad hoc disponible (…et souvent proposée à un prix défiant toute concurrence, certaines étant limitées mais gratuites…).

Ce sont elles qui vous permettront d’exporter votre texte balisé en RTF, HTML, PDF, Docx, ePub, etc. Attention, chaque app a des options d’export plus ou moins étendues…

Une rapide sélection parmi celles que j’emploie…

Sous iOS, les traitements de texte Markdown possèdent généralement une barre additionnelle. Ajoutez TextExpander et c’est redoutable. Note que des app comme Drafts ou Day One supportent aussi Markdown.

Alors, cette Méthode Dukown…?!!!

Allons-y par petites étapes (…j’ai certainement omis quelques détails que j’ajouterais ultérieurement).

Jour 1 – Italique, Gras et, exceptionnellement, les deux
Jour 2 – Paragraphes et retour forcé…
Jour 3 – Titres et niveaux…
Jour 4 – Les listes à puce ou numérotées
Jour 5 – Blockquote ou texte en retrait
Jour 6 – Les liens vers le web…
Jour 7 – Les liens vers les images…
Jour 8 – À propos du Code et autres…

Bien entendu, tout ceci peut être appris en une heure…


Jour 1

Commençons par les commandes clés, celles dont vous avez impérativement besoin dans un traitement de texte…

Italique, Gras et, exceptionnellement, les deux…

Attention, ce sont souvent les mêmes équivalents clavier en général que sur n’importe quel traitement de texte sous OSX…! Si, si…!

  • Sous OSX, si vous effectuez un Commande-I sur une sélection, hop (!!), votre sélection passe en italique… Et cela se visualise ainsi *italique*
  • Plus compliqué, si vous faites Commande-B sur une sélection, le gras s’applique… Cela s’écrit ainsi **gras**
  • Nettement plus compliqué (roulements de tambour…), si vous faites le combo Commande-B suivi de Commande-I sur une sélection, paf, du gras italique… Se distingue par ses trois astérisques ***gras italique***

Dingue non…?

Sous iOS, il suffit généralement de sélectionner le texte à passer en gras ou autre et utiliser une des touches ad hoc de la barre additionnelle qui surmonte le clavier tactile.

C’est tout pour aujourd’hui…

Non…! Non, je me refuse à vous dire que vous pouvez employer des _ (des underscores) en lieu et place des *, cela risque de vous perturber…
Mais ça fonctionne aussi…!
Ainsi ce ___texte est en gras italique___ comme ***cet autre texte en gras italique***
Incredible (prononcez : in-cré-dit-beeuuuulll)…!


Jour 2

Comment gérer les paragraphes en Markdown ?! Ben oui…! Ça va sans dire mais c’est mieux en le disant…

Paragraphes et retour forcé…

  • Un paragraphe, c’est une série de phrases à la suite…
  • Par contre, si vous séparez des phrases par une ou plusieurs lignes creuses (vides), vous créez des paragraphes (…je vois votre mâchoire qui s’affaisse d’étonnement…!)
  • Je réponds d’avance à une question que tout le monde se pose : Oui mais comment créer un retour forcé dans un paragraphe……? Très simplement en ajoutant deux espaces vides en fin de ligne suivi d’un simple retour ligne (↩).

Cette dernière balise revient à la commande <br /> en HTML.

En résumé :

Ceci est un premier paragraphe.

Une ligne vide avant, second paragraphe.

Deux espaces vides avant le retour ligne…
Bingo ! Ceci est un retour forcé…

Ça s’écrit comme ceci…

Ceci est un **premier paragraphe**.

Une ligne vide avant, second paragraphe.

Deux espaces vides **avant** le retour ligne…  
**Bingo !** Ceci est un retour forcé…

À demain.


Jour 3

Bon, ce n’est pas le tout. Dans un document, nous avons généralement des titres de niveaux différents, un plan, comment se repérer…?

Titres et niveaux…

Il faut impérativement faire précéder votre titre d’un (ou plusieurs) # suivi d’une espace. Et détacher ce titre du texte courant…

# Je suis un niveau 1
## Je suis un niveau 2

C’est bon, vous suivez…?

### niveau 3
#### niveau 4
##### niveau 5
###### niveau 6

Les puristes ajoutent le même nombre de # en fin de ligne mais c’est vite pénible si vous changez fréquemment votre titre de niveau.
Pourquoi…? Simplement parce qu’il faut intervenir deux fois du coup dans le même titre pour corriger son niveau…!

##### niveau 5 #####
###### niveau 6 ######

Autre option, ajouter un soulignement mais fonctionne exclusivement pour les deux premiers niveaux…
Note : ce n’est pas parce que cette option existe qu’il faut se croire obligé de l’utiliser. Je la rappelle pour mémoire.

Niveau 1
========

Niveau 2 => 1 ligne… piège…!
----------------------------

Amusant : vous n’êtes pas obligé de tout souligner pour que ce soit interprété.

C’est tout pour aujourd’hui.


Jour 4

Organiser ses listes, deux options d’une simplicité confondante…

Les listes à puce ou numérotées

Il suffit de faire précéder son paragraphe…

  • d’une * pour une liste à puce. Vous pouvez bien employer un signe + ou un signe -
  • mais impérativement suivi d’une espace…
  • d’un 1. pour les listes numérotées. Vous pouvez mettre toujours un `1 par défaut, ce sera ensuite incrémenté par votre outil Markdown.
    • Notez que si vous ajoutez une tabulation (…ou 4 espaces blancs)
    • Bien sûr, avant le symbole * ou 1.
      • Vous pouvez alors décaler votre liste

Un exemple de liste à puces…?

  • une puce
  • une autre puce
    • Là, c’est une invasion…!

Et cela s’écrit :

- une puce
- une autre puce
    - Là, c'est une invasion…!

Et les listes numérotées…?

  1. Oui, ça fonctionne aussi
  2. avec les listes numérotées…
    1. Avec retrait…
    2. Pensez à ne pas mélanger les listes…
    3. À bien les séparer.
  3. Et hop, ça redémarre…
  4. au niveau de la numérotation…

Et cela s’écrit :

1. Oui, ça fonctionne aussi
2. avec les listes numérotées…
    3. Avec retrait…
    4. Ne pas mélanger les listes…
    5. À bien les séparer.
6. Et hop, ça redémarre…
7. au niveau de la numérotation…

Et bien sûr ça s’interprète en HTML, en RTF, etc.

À demain (ou pas).


Jour 5

Blockquote ou texte en retrait

J’aime bien mettre en exergue un texte ou marquer une citation…

  • Facile : démarrer la phrase par la caractère > suivi d’une espace
  • Et si vous ajoutez une tabulation avant le >, hop, retrait… (autre option, multiplier les > comme ceci >>)

Exemple…

> Une citation…
    > Second niveau de citation… etc.

Ou…

> Une citation…
>> Second niveau de citation… etc.

Employer des caractères utilisés dans les balises

Cela fait quelques jours (sic !) que vous vous posez la question : comment employer >, # ou * dans un paragraphe sans que cela interfère avec le balisage Markdown ?

Mais en faisant précéder ce caractère d’un backslash, c’est à dire cet autre caractère \

Oh, un bel * astérisque, deux ** astérisques, un > ou un # qui ne seront pas interprétés… Le backslash \ inhibe l’interprétation du Markdown et s’écrit \* ou \*\* ou encore \> voire \# ou \\

À demain.


Jour 6

Bon, je ne vais évoquer que les liens Markdown versus ceux en HTML.

Les liens vers le web…

Ben oui…?! Comment faire un lien, ajouter une URL vers une page sur le net dans un texte courant…

Théoriquement, en HTML, on devrait écrire ceci avec <p> et </p> au début et à la fin :

<a href="http://urbanbike.com">Urbanbike</a>

En Markdown, c’est juste cela :

[Urbanbike](http://urbanbike.com)

Mais si vous ne souhaitez pas avoir l’url (…qui peut être fort longue) à côté du texte explicatif de votre lien, Markdown vous offre une possibilité qui j’apprécie énormément, celle de ranger en fin de texte toutes les URLS…

[urbanbike][1] et [Photager][2]

[1]: http://urbanbike.com
[2]: http://photager.com

Comment ça je fais de la PUB Pub pub…?!

Seul souci avec cette méthode, évitez de vous tromper dans les numéros. Mais vous pouvez améliorer ceci en renseignant chaque url avec une référence nettement plus explicite…

[urbanbike][ub] comme [Photager][pho]

[pho]: http://photager.com
[ub]: http://urbanbike.com

Notez que l’ordre de ces liens en fin de document n’a pas d’importance…

À demain.


Jour 7

Comment ajouter dans votre texte un lien vers une image sur le net… Comme pour la photo dans ce billet.

Les liens vers les images…

Théoriquement, on devrait écrire ceci en HTML :

<img src="http://site.com/dossier/image.jpg"
alt="explication" title="©auteur" />

En Markdown, c’est juste cela :

![texte alternatif](http://site.com/dossier/image.jpg)

Ou ça…

![texte alternatif](lien-vers-image "info-en-plus")

Ce qui change par rapport à un simple lien, c’est l’! en tête qui signale que l’on a affaire à une image…

Je vous laisse digérer. À demain.


Jour 8

Si vous effectuez une rapide comparaison du poids de vos anciens fichiers avec ceux au format .txt et balisés en Markdown, vous pouvez souvent découvrir que certains sont passés de 300ko à 5Ko (je galèje à peine).

Plus rapides à partager, à sauvegarder (…tant en local que sur le cloud), vous les enregistrez au format .txt, .md, .markdown… Mais ce n’est toujours du texte qui passe sans souci d’OSX à iOS. Et si vous avez un souci, changez juste le suffixe .md en .txt…

À propos du Code et autres…

Pour finir, quelques petites options en plus.

Tiens comme ajouter un filet horizontal, le fameux <HR> bien connu en HTM…? Ce qui suit…


Très compliqué, trois tirets à la suite bien séparés des paragraphes qui précèdent ou qui suivent…!

---

Bon, et le code…?

Comment faire ressortir du code…? Je termine par cela car tout le monde n’en a pas l’usage. Deux manières fort simples.

  • Dans une phrase, ce qui doit être affiche comme du code est placé entre deux signes ` (les fameux backticks)
  • Détaché entre deux paragraphes, l’habituel <pre> HTML. En Markdown, il suffit de démarrer la ligne par une tabulation (ou 4 espaces vides) et ce qui suit est interprété comme du code. Oui, c’est basique et ce billet est rempli d’exemples…

Et les tableaux…?

Bon, ça sort des usages courants mais j’ai du en parler

Et les notes en bas de page…?

Au début de ce billet, il était écrit Markdown. Effectivement, on peut aller encore plus loin et j’ai du également les évoquer ici… Pensez à passer au MultiMarkdown si vous en avez particulièrement besoin.

Exporter votre Markdown

C’est tout l’intérêt de Markdown. Contrairement à un texte bureautique qui va respecter/conserver votre mise en page, vos choix typographiques lors de son export en PDF, le Markdown vous permet d’exporter en RTF, ePub, PDF, HTML en utilisant éventuellement une CSS qui transformera l’aspect général de l’ensemble. Là, ça va dépendre du traitement de texte utilisé.
Par exemple, iA Writer permet de convertir du Markdown en .docx et réciproquement.
Renseignez-vous sur des outils comme Marked (simple convertisseur) ou Ulysses III (traitement de texte) par exemple.

Ceci explique pourquoi l’utilisateur de balises Markdown se fiche pas mal de sa mise en page, privilégiant l’essentiel de son temps à la rédaction de son texte : de fait, c’est au moment de l’export que tout se joue.

Note de fin : tout ce qui précède est disponible depuis 2004 sur le net… Des instructions en anglais de son inventeur, John Gruber, au Byword MultiMarkdown Guide en passant par des tas de fiches ou celles de Michel Fortin ou encore Wikipedia. Enfin, quasiment toutes les apps proposent une page ou un écran de rappel des options Markdown dont elles disposent.

image du monde végétal — close-up
logotype d'urbanbike

Images végétales sur…

image

Trouvé sur le net, notés sur…

image

cf. lien publié le 31/08/2014 à 23:02

cf. lien publié le 31/08/2014 à 22:53

cf. lien publié le 31/08/2014 à 22:53

cf. lien publié le 31/08/2014 à 22:24

« J’assiste à des réunions concernant les ventes de produits dérivés où pas une minute n’est passée à essayer de savoir comment nous pouvons aider les clients. Il s’agit seulement de savoir comment on peut en tirer le plus d’argent possible »

cf. lien publié le 31/08/2014 à 22:08

cf. lien publié le 30/08/2014 à 21:09

13 Static Site Generators to Help You Build Your Ultimate Website

cf. lien publié le 30/08/2014 à 18:02

» Switching to Markdown for scholarly article production The Occasional Pamphlet

cf. lien publié le 30/08/2014 à 17:59

cf. lien publié le 30/08/2014 à 17:56

cf. lien publié le 30/08/2014 à 13:55

Ailleurs… | blogroll…
Follow me on App.net
image