Journal de bord

@ Frédéric Maurice

Le tout-venant du commentaire utilise la police de caractères choisie par le capitaine pour l’affichage de ses pages. Il semble que le commentaire en bulle sur fond noir corresponde à du code informatique, le plus souvent affiché dans une police à chasse fixe. Comme celle-ci n’a pas été choisie, c’est la fonte par défaut du système d’exploitation qui est utilisée : Monaco sous OS X et sans doute Courier ou Consolas sous Windows.

@Bouillon

Quatre espaces (en fait, une tabulation) suffisent à déclencher l’affichage d’un bloc de code, cinq, c’est une de trop. Il s’agit de la convention standard en Markdown pour l’affichage du code : 4 espaces égalent une tabulation. Les bons éditeurs de texte Markdown, comme par exemple iA Writer ou FoldingText fonctionnent comme ça : une tabulation pour indenter du code. Comme le blog du capitaine intègre un traducteur Markdown vers HTML, ça le fait.

Je ne saurais trop conseiller l’achat d’un de ces éditeurs, avec lesquels je prépare mes réponses sur ce blog. Depuis que je les utilise pour mes prises de notes au quotidien, je ne saurais m’en passer. Malheureusement, ils sont réservés au Mac et je n’ai jamais rien trouvé d’équivalent en simplicité et ergonomie sous Windows lorsqu’il m’a fallu conseiller des gens sur PC.

En complément d’information, voici le bout de feuille de style qui commande l’aspect des paragraphes, une fois qu’on a déclenché l’affichage en code.

pre code {
color: #f6f6f6;
background-color: #303030;
border: none;
}

code {
border-radius: 3px;
font: 15px Monaco,Andale Mono,Courier New,monospace;
padding: 1px 3px;
}

Qui sait lire ça constate qu’on demande bien un fond anthracite, des coins arrondis, et la police de caractères Monaco, ou Andale Mono, ou Courier New, etc. OS X, qui en dispose, choisira en priorité Monaco, tandis que Windows, qui n’en dispose pas, utilisera le Courier New.

Avec les outils de développement intégrés à Safari, Firefox, Chrome, etc. on peut modifier localement la feuille de style pour faire des essais. Mais cela ne s’affichera en jaune que sur l’ordinateur utilisé. Il faut passer background-color en jaune, bien sûr :

pre code {
background-color: yellow;
}

Ou mieux, pour que le texte reste lisible, un jaune foncé :

background-color: rgb(211, 174, 40);

Voilà, le HTML & CSS, c’est magique.