MultiMarkdown Composer et feuille de style

Je n’allais pas écrire personnaliser à sa main (sic !) vu que ce sont bien des touches que nous utilisons pour saisir nos textes et les baliser à notre gré…!

Attention billet avec ellipses car juste pour mémoire…

La version 2 de MultiMarkdown Composer ayant été réécrite — voir cette ancienne chronique versus mon dernier billet sur le sujet, la gestion des feuilles de style également comme je l’avais noté… j’ai essayé les différentes alternatives proposées et, bon, pas trouvé ce qu’il me fallait. Pour la version précédente, j’avais déjà modifié le tout.

La version 2 propose de diviser la page en deux pour afficher le texte saisi en regard de son rendu. Du coup, il est possible dans la même feuille de style d’empiler les données minimales de la CSS qui sera employée pour la prévisualisation, tableaux compris.

Et celles pour colorier — ou coloriser — dynamiquement les balises lors de l’écriture de votre texte… bref, à gauche, ma prose ; à droite le résultat en mode minimal pour se rendre compte si mon balisage est ad hoc.

Mon exemple de feuille de style est un peu excessif — quoi que ! — mais il est avant tout démonstratif. Je n’ai pas fait preuve de beaucoup d’originalité en partant d’une feuille existante en la nettoyant et en la transformant pour mon propre usage, histoire d’apprendre. Je pense que tout le monde fait comme cela, ôtez-moi d’un doute…?! Bref, pourquoi réinventer la roue.

De fait, quand j’écris, j’ai besoin de visualiser quelques infos, histoire de me repérer dans le texte[1].

• Les textes invisibles en vert
• Les attributs de texte (code compris), les indicateurs de balises liste ou bq en rouge (pratique car, par exemple, la balise de Liste s’affiche en rouge uniquement si elle est active, par exemple). Les balises qui enveloppent les mots sont généralement en gris un poil plus léger (Byword ma pas mal inspiré, c’est clair…)
• Sans oublier le texte sélectionné en jaune

• Les liens vers des illustrations, URLs ou encore de notes de bas de page ou les HUD en bleu, histoire de bien les distinguer

• Enfin, j’aime bien employer un fond gris léger en lieu et place d’un sable un peu passé…

Du coup le fait de travailler sur la feuille .style me permet de me passer de Marked pendant la phase d’écriture et, comme avec l’application Mou, de visualiser le résultat immédiatement, de manière sommaire mais amplement suffisante.

• Les tableaux sont justes parsés pas la CSS dans la fenêtre de previsualisation contiguë…

• bien entendu, je recommande d’employer quelques équivalents concoctés avec TextExpander. Ainsi, quand je saisis une note en bas de page[2] sous OSX ou je place un HUD, que ce soit sur MultiMarkdown Composer, Byword ou FoldingText, voire TextEdit, c’est la même séquence de touches, CQFD.

Et la feuille de style ?

Il vous suffit d’ouvrir les préférences, d’aller dans le second onglet et dans cette fenêtre, de cliquer sur le bouton Open Styles Folder pour demander d’afficher le contenu du dossier des feuilles de style.

Ensuite de dupliquer celle la plus proche de ce que vous souhaitez obtenir à terme et éditer ce fichier avec un traitement de texte. En l’occurrence, j’ai fait appel à mon fidèle BBEdit et à TextMate (sur les copies d’écran, c’est TextMate).

Une fois renommé votre fichier cible, le désigner de suite comme celui a employer de préférence par MultiMarkdown Composer !

Mais au lieu de repasser par les préférences, notez que vous pouvez changer de feuille de style en passant par le menu View/Style Sheet. C’est une opération que vous allez faire un grand nombre de fois lors de l’élaboration de vos styles car il vous faudra impérativement repasser par une autre feuille de style avant d’appliquer à nouveau vos changements (suis-je clair ?).

Bref, c’est tout sauf dynamique lors de l’élaboration de votre feuille.

Une fois dans le contenu texte de votre feuille de style, allez-y doucement et souvenez-vous que les codes couleurs ne doivent pas être précédés d’un # mais que vous pouvez employer les codes hexa habituels.

J’ai ajouté dans la partie CSS quelques bouts de code dont :
a:link {color: #ff0000; text-decoration: none;} ou encore code {color: #ff0000;} pour obtenir ce que je souhaitais dans ma preview à la mode urbanbike.

Bon, ensuite à vous de jongler entre les foregroundColor et les markupForegroundColor avec, conseil de prudence, un test régulier de votre avancement et la bonne pratique habituelle qui consiste à conserver des versions intermédiaires…!

Encore une fois, le rendu sera moins élaboré qu’avec l’excellent Marked mais cela vous évitera d’ouvrir “n” applications pour juste vérifier si vous écrivez correctement vos balises Markdown.

C’est le but, non…?

Note de fin : mon exemple est à la hache : rappel, je ne suis pas un codeur, juste un utilisateur… de traitement de texte !