Urbanbike

Recherche | mode avancée

Du Markdown sans peine sur votre Mac

Marked, MarsEdit, Byword…

dans outils | pratique | voir
par Jean-Christophe Courte

Billet de bonne humeur qui a suivi plusieurs voies (…non sans issue…!). Au départ, je pensais n'évoquer que Marked sur Mac et puis, en rédigeant…

Markdown


Je ne suis pas un grand utilisateur de Markdown même si je commence à trouver ce balisage, proposé par John Gruber il y a quelques années, intéressant par sa rusticité même… Je ne vais pas me ripoliner en grand gourou de ce format, je l'utilise depuis peu et progressivement…

Ce balisage "sémantique" (je mets des guillemets car chacun va y aller de son analyse, le mot est fort et, comme me le signale un lecteur, parlons plus d'une convention d'écriture pratique…!) propose d'enrichir une simple saisie effectuée au format texte tout en la laissant limpide aux yeux du lecteur…! Ce point mérite que l'on s'y attarde car utiliser de simples astérisques pour indiquer que tel mot est en italique n'est pas compliqué…

Contrairement à un code HTML classique, le balisage Markdown n'entrave en rien la lecture de l'information. Et comme, cet ensemble est enregistré également dans un banal format texte, il ne pèse rien, n'étant associé à un quelconque format propriétaire bavard.

Sur le site de John Gruber vous trouverez un convertisseur assez pratique pour faire vos premières armes, tester vos connaissances et vérifier la conversion de ce balisage en HTML.

Bref, ce qui me plaît particulièrement dans le Markdown, c'est que chacun peut s'en emparer pour écrire de manière plus souple des billets ou même, j'en suis certain, des bouquins sans passer par des usines à gaz textuelles.

20110905 marked12

NB : mes copies d'écran ont été faites telles sur un 23", l'idée est juste de montrer la mécanique et non le balisage.

Un simple exemple : Dans mon cas, j'apprécie de placer toutes mes URL en fin de document lors de la rédaction, ce qui allège ma relecture et me permet de faire appel autant de fois à une même et longue URL sans la répéter…

Et comme ExpressionEngine (le CMS d'urbanbike) dispose d'un plug-in pour lire et interpréter Markdown, je vais y venir calmement en modifiant ma manière de rédiger.

J'ai acquis récemment Marked sur Mac que je trouve fort astucieux même s'il existe quelques bons outils sous OSX, des produits moins récents à redécouvrir…

Et d'ailleurs…!

MarsEdit…


Pour nourrir urbanbike, j'utilise indifféremment un iPad de première génération avec Daedalus touch — mais aussi Writing Kit ou Nebulous Notes (et d'autres) — ou sur Mac de travail, iA-Writer. Une fois le texte à peu près calé, ce dernier est transféré par un simple copier/coller dans mon fidèle éditeur, MarsEdit.

Celui-ci me permet bien sûr de travailler en HTML (…et comme il dispose d'une coloration syntaxique, pas de souci pour lire mon code détaché de mon texte), mais aussi en Markdown.

Pour mémoire, cette application à sa propre fenêtre de prévisualisation du code HTML

20110905 marked08

Ou Markdown

20110905 marked09

Enfin MarsEdit me permet d'exporter directement mes images dans le dossier distant ad hoc d'urbanbike avec tout le code nécessaire sans utiliser un outil FTP en plus. Je glisse simplement l'image dans mon texte et hop, elle est retaillée si nécessaire et exportée sans que je m'en soucie.

Bref, dire que je suis attaché à MarsEdit est un euphémisme. Disposant de MarsEdit, je n'avais pas a priori besoin de Marked

Et pourtant je suis assez séduit par cette application également. Explications.

Marked…


Si vous avez envie de vous mettre à Markdown sans abandonner votre traitement de texte habituel (TexteEdit, Writeroom ou autre…), Marked est une solution économique et efficace…

20110905 marked07

Marked ne fait que relire le texte en cours de saisie au format Markdown dans votre traitement de texte — pour les besoins de ce billet, j'utilise iA-Writer — et vous propose de prévisualiser immédiatement la mise en page de cette saisie dans une fenêtre additionnelle (ici à gauche dans la copie d'écran).

20110905 marked01

Les balises, url (entourées d'orange pour les situer) sont affichées et actives. Du coup, toute erreur de saisie est rapidement décelable dans cette fenêtre de visualisation.

20110905 marked02

Mieux encore Marked vous permet d'utiliser l'une des quatre feuilles de style enregistrées ou d'utiliser une CSS de votre choix. Voire même de figer la largeur en pixels de la justification de cette représentation, etc.

20110905 marked06

Dès que vous enregistrez votre fichier, Marked actualise aussi sec l'affichage tel qu'il sera rendu en HTML.

20110905 marked10

Si vous avez déjà nourri votre serveur Web des images que vous allez utiliser pour un billet (ou laissées en local), vous allez pouvoir placer les balises ad hoc dans votre texte et visualiser ces visuels dans Marked qui va les afficher comme n'importe quel navigateur.

La seule chose à se souvenir est que Marked va toujours rester en premier plan à l'écran et qu'il vous faudra organiser vos autres fenêtres de travail en conséquence.

Bref, si votre traitement de texte sert à saisir votre prose, Marked vous permet de visualiser le rendu et de convertir ce Markdown en HTML avec la CSS en usage. Ou non.

20110905 marked04

À gauche Marked, puis visualisation du HTML exporté dans Safari et dans BBEdit

20110905 marked05

Ce HTML peut être exporté sous la forme d'un fichier .HTML ou simplement copié dans le presse-papiers…

Autre option, de l'exporter tel que visualisé dans Marked au format PDF (au centre), ce qui est assez pratique si vous souhaitez faire relire un document mise en forme avec ses illustrations.

20110905 marked03

Bref, si j'affirme que Marked se comporte comme une intéressante extension de votre habituel traitement de texte, je ne suis pas loin du compte.

Bref, si vous n'avez strictement rien comme outils en magasin pour Markdowner (sic !), Marked est une très bonne et peu coûteuse alternative. Avec un traitement de texte comme TextEdit ou même un outil de codage puissant comme BBEdit, cela s'avère bien pratique.

Byword…


Enfin, jetez également un oeil sur la dernière version de Byword sur Mac qui permet de prévisualiser mise en forme comme illustrations…

20110905 marked15

Mais avec une seule CSS.

20110905 marked16

Là aussi, un produit peu coûteux avec un très beau rendu du code source et beaucoup de finesses…

Ne plus être prisonnier d'un format de fichier…


Voici trois options possibles pour votre Mac. Les lecteurs attentifs remarqueront que je n'ai pas évoqué un produit très (trop…?) récent — qui, d'ailleurs, m'a été remboursé pour sa version Mac pour cause d'incapacité à se lancer.

Bref, il est intéressant de sentir que les utilisateurs — ceux que je rencontre du moins — cherchent désormais à revenir à des outils simples et, surtout, à des produits qui leur permettront de changer d'application sans se retrouver piégé par un quelconque format d'enregistrement propriétaire.

À cet égard, quoi de plus simple que du Markdown et un fichier texte…? Surtout si, en dehors de proposer un codage simple pour du HTML et de l'export PDF, on pouvait utiliser ce balisage pour de la PAO…! Et doc faire du MarKup (private joke à destination d'un développeur de scripts de mes amis…).

À suivre donc…!




NB : je me suis rendu compte que j'avais laissé activé sur iA-Writer Correct Spelling Automatically et comme je suis distrait, j'espère que cette correction ne va pas engendrer trop de contre-sens…!

NB2 : Pour finir, j'ai donc copié/collé le HTML issu de Marked dans MarsEdit et glissé les images aux mêmes emplacements, sachant que MarsEdit les exporte dans le dossier dédié aux visuels sur le serveur d'urbanbike… Bref, plus que concluant…

le 06/09/2011 à 09:00 | .(JavaScript must be enabled to view this email address) à Jean-Christophe Courte | Partager…?