Communication d’entreprise et Markdown | 2

Images et tableaux
dans | bosser chez soi | écrire | pratique |

Parfois (souvent même…!), vu le rendu de certains documents bureautiques, je leur préfère de loin la simplicité obligée du Markdown…! La sobriété a du bon et ce ne sont pas les boîtes de conseil en stratégie pour lesquelles je bossais naguère comme business graphics [1] qui me contrediront…! Il y a longtemps qu’elles assument ces présentations a priori austères mais efficaces…

Quelques réactions sur Twitter hier sur le billet Communication d’entreprise et Markdown m’ont incité à le poursuivre en mode découverte sur deux points (il y aurait beaucoup à dire mais…).

Voici quelques exemples montés à la hache sur Byword sur Mac pour compléter mon propos.

Et comment faites-vous pour les images…?

Avertissement : Si vous souhaitez habiller vos images, nous sommes d’accord, il vous faudra régler cela par une CSS adaptée. C’est d’ailleurs en s’appuyant sur cette CSS que Marked, ou ici @urbanbike, va afficher les divers attributs du Markdown selon vos souhaits…

En règle générale, quel est votre besoin en terme d’illustration…? Avoir une image centrée et légendée…?

Pour insérer l’image qui suit dans mon texte saisi dans Byword (…attention, cette manoeuvre ne fonctionne pas avec tous les traitements de texte, il vous faudra parfois procéder à une insertion de l’image via une commande dans le menu), un simple drag@drop de cette dernière depuis son dossier juste en dessous du paragraphe que je souhaite commenter…

![title](file://localhost/Users/chemin/photo.png)
Vous pouvez ajouter un indicateur supplémentaire avant la fin de parenthèse pour le survol de la photo avec le pointeur…
![title](file://localhost/Users/chemin/photo.png "©moi")

La première partie ![title] permet de légender l’illustration, comme par exemple :
![Ceci est un artichaut breton…]. Ce qui suit est le chemin de l’image sur votre disque dur.

Ceci est un artichaut breton…
Ceci est un artichaut breton…

Cela fonctionne de la même manière pour une image empruntée à un serveur externe, un site web et s’écrit alors :
![title](http://site.com/chemin/photo.png)

Bref, horriblement compliqué, Non…?

L’intérêt…?
Votre fichier reste en texte pur sans s’encombrer des doublures des images (et restera ultra svelte!!)… Mais affichera bien entendu en mode prévisualisation (et export…) les illustrations dont le chemin est connu…

Et pour les tableaux…?

Ah, là, là… très compliqué également…! C’est un balisage enfantin auquel Markdown nous convie…

En résumé, se souvenir que c’est la seconde ligne du tableau Markdown qui va gérer les alignements des cellules…
Exemple du code :

Année | CA | TVA | TTC
| :---: | ---: | :---: | ---: |
2010 | 3 200 | 19,6 % | 3 827,20
2011 | 6 500 | 19,6 % | 7 774,00
2012 | 14 500 | 20,6 % | 17 487,00

En n’oubliant pas les pipes | pour marquer et séparer les cellules ainsi que les infos d’alignement très sioux (notez la position du signe :)…
Centré :---:
Fer à droite ---:
Fer à gauche :---

Cela donne [2] :

Année CA TVA TTC
2010 3 200 19,6 % 3 827,20
2011 6 500 19,6 % 7 774,00
2012 14 500 20,6 % 17 487,00

Et, bien sûr, avoir une stratégie adéquate pour les alignements et, bien entendu la stylisation des cellules.

Images Tableaux Rappel
Word like Oui Oui habillage possible
Markdown Oui Oui rendu selon la CSS active

À suivre… Ou pas…!

Note de fin : un grand merci à @david_bosman pour ses infos sur Markdown et Windows (cf. billet précédent). Je vous recommande d’employer l’outil de recherche sur son site pour dénicher de réelles pépites[3]

Note de fin (bis !) : Les plus assidus liront avec plaisir : Utiliser Markdown pour blogger depuis TextMate puis Utiliser Markdown pour blogger depuis TextMate, partie 2… Sans oublier Quelques astuces pour TextMate 2


  1. Voir ce billet  ↩

  2. Ne pas oublier que c’est bien la CSS employée qui va se charger de placer les filets et la couleur de fond des cellules…  ↩

  3. Pourquoi ce mot me fait sourire ? Serions-nous, lui comme moi, les seuls chercheurs d’or à ne jamais en tirer les bénéfices…?!  ↩

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

Sans oublier…!

image

les liens vers des billets proposés sur…

image

cf. lien publié le 2014-04-23 16:44:31 GMT

cf. lien publié le 2014-04-23 15:22:37 GMT

cf. lien publié le 2014-04-22 18:19:30 GMT

cf. lien publié le 2014-04-22 18:18:59 GMT

cf. lien publié le 2014-04-22 17:56:44 GMT

cf. lien publié le 2014-04-22 17:53:11 GMT

cf. lien publié le 2014-04-22 17:47:34 GMT

cf. lien publié le 2014-04-22 17:39:24 GMT

cf. lien publié le 2014-04-22 17:37:26 GMT

cf. lien publié le 2014-04-22 17:29:34 GMT

cf. lien publié le 2014-04-21 17:20:42 GMT

cf. lien publié le 2014-04-21 17:10:39 GMT

cf. lien publié le 2014-04-21 17:09:06 GMT

cf. lien publié le 2014-04-21 17:01:08 GMT

cf. lien publié le 2014-04-21 16:50:11 GMT

cf. lien publié le 2014-04-21 16:47:30 GMT

cf. lien publié le 2014-04-20 15:27:45 GMT

cf. lien publié le 2014-04-19 17:11:13 GMT

cf. lien publié le 2014-04-19 17:02:29 GMT

cf. lien publié le 2014-04-19 16:52:29 GMT

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