Quelle police de caractères utiliser pour du code ?

Bonjour à vous tous,

Je suis sur un projet web dans lequel j'expose du code HTML/CSS et je cherche une police de caractères pour distinguer ce code du texte d'explication. Quand j'utilise la balise <code>, le navigateur me propose une police de caractères standard monospace par défaut qui ne me plaît pas parce qu'elle prend beaucoup de place (chasse trop large). J'ai consulté le site web fontsquirrel.com et j'ai trouvé cette liste de polices https://www.fontsquirrel.com/fonts/list/tag/programming mais elles continuent à ne pas me plaire. Est-ce que vous savez s'il existe une autre police de caractères pouvant être utilisé pour simuler du code informatique ?

Cordialement

Bonjour,

Peut-être voir Jetbrains Mono ou Roboto Mono si elles te plaisent.

Si tu affiches du code dans ta page web, tu pourrais aussi vouloir l'afficher avec la coloration syntaxique. Pour cela il existe plusieurs bibliothèques telles que https://highlightjs.org/
Modifié par Pitet (03 Nov 2023 - 15:31)

Hello,

Je crois que le plus important c’est de rester sur une police monospace. Elles permettent d’aligner le code si on peut dire ça comme ça. Ça permet à l’indentation de rester correcte par exemple.

Salut,

Perso, je ne me suis jamais fait à la jetbrain. Cependant, il faut s'y habituer. Son avantage, les ligatures donnent un avantage sur sa lisibilité. Mais je ne m'y fais pas. En exemple, le triple égal ou le double égal.

Fût un temps, j'utilisais la consolas. Depuis des années, j'utilise la source code pro (y compris pour mes terminaux). J'aime vraiment sa lisibilité. De toute façon, je n'utilise que des linéales. Je trouve que les mécanes ou réales ne sont pas adaptées à la lisibilité (ce n'est que mon avis).

Pour ta présentation, tout dépend de ce que tu veux faire ressentir. Il ne faut pas oublier que l'association de typo au sein d'un document est un exercice délicat. Il y a des associations qui sont tout simplement disgracieuses.

Jette un oeil à Sphinx. Voici un exemple ou encore cet exemple. Plus généralement, il y a des thèmes pour Sphinx. Bien que Sphinx soit accès sur Python, il est tout à fait possible de l'utiliser pour d'autres langages

edit : Ne connaissant pas trop ton contexte, j'ai tout de même pensé à un autre outil qui peut t'intéresser. Jupyter notebook.
Modifié par niuxe (04 Nov 2023 - 00:25)

Merci pour vos réponses, j'ai téléchargé JetBrains et Source Code Pro, je vais les tester.
Ce que je cherche c'est une police qui prend moins de place en largeur (chasse) et celle par défaut proposée par le navigateur est trop large à mon goût.

Par contre, la bibliothèque https://highlightjs.org/ m'intéresse énormément puisque je compte colorier la syntaxe du code. Mais je ne connais pas le Javascript ni les Framework JS. Je vais donc ma cogner la coloration manuellement. Bonne nouvelle, il n'y a pas énormément de code HTML/CSS, seulement quelques morceaux.
Modifié par ObiJuanKenobi (04 Nov 2023 - 06:47)

Le forum Alsacreations utilise Highligth.js, personnellement j'utilise Prism.js que j'harmonise avec les couleurs de mon site : démo.

Les deux bibliothèques se valent et ont un fonctionnement comparable, l'avantage de Highligth.js c'est qu'il peut éventuellement détecter le type de code sans qu'il soit déclaré.
Modifié par Olivier C (04 Nov 2023 - 07:42)

Comme je l'ai indiqué, Sphinx est un bon outil pour rédiger de la doc et s'interfacer avec son API.

Cette nuit, je suis tombé sur ce lien qui peut t'intéresser. Github vient de créer une série de typo.

Merci Niuxe pour le lien, je l'ai téléchargé et testé, c'est une typo avec une chasse large.

A propos, qu'est-ce que c'est que cette histoire de publicité (message précédent) ?
Où est-ce que j'ai fait de la pub ?

niuxe a écrit :
Cette nuit, je suis tombé sur ce lien qui peut t'intéresser. Github vient de créer une série de typo.

C'est la classe cet ensemble de polices. Ce concept de "texture healing" est vraiment prometteur.
C'est certainement un projet autonome mais qui va sans doute être intégré dans une implémentation prochaine de Visual Studio Code.
Modifié par Olivier C (14 Nov 2023 - 11:28)

ObiJuanKenobi a écrit :
A propos, qu'est-ce que c'est que cette histoire de publicité (message précédent) ?
Où est-ce que j'ai fait de la pub ?

Il s'agit de Fantaisies. Ce n'est pas rare que des personnes s'inscrivent sur le site pour placer de la pub dans les sujets du forum.
Modifié par Olivier C (14 Nov 2023 - 11:00)

Bonjour,

2 messages de sa part, aucun n'était pertinent => ban complet ; il a disparu

Coller des liens vers son site alors que ces liens sont en nofollow, c'est du spam à très très faible valeur ajoutée mais y en a encore...
Je rassure les habitués : si vous êtes là, c'est qu'il n'y a aucun souci

Felipe a écrit :
Bonjour,

2 messages de sa part, aucun n'était pertinent =&gt; ban complet ; il a disparu

Coller des liens vers son site alors que ces liens sont en nofollow, c'est du spam à très très faible valeur ajoutée mais y en a encore...
Je rassure les habitués : si vous êtes là, c'est qu'il n'y a aucun souci

Je t'avoue avoir hésité à shooter le message. J'hésite encore à shooter un message. Je pars du principe qu'on peut faire une entrée sur un forum maladroitement. D'où mon avertissement. J'ai fait une recherche de message au moment où j'ai édité sa réponse. Il n'y avait pas de message supplémentaire (avec pub ou pas).

Je n'avais pas remarqué les liens en nofollow. Il est bon lui ..... (le troll ignare)

@Olivier : +1

@ObiJuanKenobi: Ne t'inquiète pas, je confirme Felipe. Je vois bien que tu es là pour apprendre et comprendre. . N'hésite pas à t'intéresser à un nouveau sujet d'un membre sur le forum. Même si tu réponds à côté (ce qui peut arriver), tu comprendras et apprendras. Essaie d'être pertinent
Modifié par niuxe (15 Nov 2023 - 11:48)

Je suis tombé sur ce lien web à propos des polices de caractère pour coder :
https://kinsta.com/fr/blog/meilleures-polices-programmation/
Peut être qu'il intéressera l'un d'entre vous.