Comment puis-je styliser les listes de code en utilisant CSS ?

Question

Je voudrais afficher des extraits de code de langage de programmation, ainsi que du code HTML, à l'intérieur d'un document HTML en utilisant CSS. Je veux que ce soit indenté et dans une police à largeur fixe... Je pense à quelque chose comme :

mon code ici
mon code ici aussi

et le faire apparaître de manière bien formatée (bonus s'il est coloré, mais ce n'est pas obligatoire.

Comment puis-je accomplir cela en utilisant CSS ?

Answer 1

Partage d'un exemple que j'utilise sur mon site web, j'utilise le pre suivant dans ma feuille de style:

pre {
    background: #f4f4f4;
    border: 1px solid #ddd;
    border-left: 3px solid #f36d33;
    color: #666;
    page-break-inside: avoid;
    font-family: monospace;
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 1.6em;
    max-width: 100%;
    overflow: auto;
    padding: 1em 1.5em;
    display: block;
    word-wrap: break-word;
}

Cela donne les résultats suivants:

Avertissement: Pendant mon temps libre, j'ai passé quelques heures à mettre à jour ce CSS avec quelques fonctionnalités supplémentaires comme des lignes de code et un bouton de copie de code en utilisant du CSS avec JavaScript pour mon usage personnel que j'aime partager. Veuillez utilisez comme bon vous semble github code source. Pour voir un exemple de code dans le monde réel, consultez cet article de mon blog qui montre comment j'utilise l'exemple de code.

Answer 2

Cette bibliothèque JavaScript semble excellente:

https://highlightjs.org/

MISE À JOUR: J'ai également utilisé cela sur mon blog basé sur Tumblr car c'était le plus facile à déployer:

https://github.com/google/code-prettify

Answer 3

 conserverait automatiquement vos tabulations et sauts de ligne à l'intérieur des balises `pre` délimitant. La plupart des navigateurs utilisent automatiquement une police à espacement fixe à l'intérieur de `pre` mais si vous voulez le forcer (ce qui est une bonne idée), vous pouvez utiliser le CSS suivant :

    pre { font-family: monospace; }

Je recommande que vous ne placiez _pas_ directement du code dans un élément 

> . C'est incorrect sur le plan sémantique.
> 
> Si vous voulez que votre code soit correct sur le plan sémantique, vous devriez le baliser comme ceci :
> 
>     
>     Mon code préformaté
>         ici.
>     
>     
> 
> Si vous "citez" effectivement un bloc de code, alors le balisage serait le suivant :
> 
>     
>     Mon code préformaté "cité" ici.
>     
>     
> 
> Si vous voulez un code encore plus joli, vous pouvez utiliser Prettify de Google Code, qui est [utilisé par StackOverflow](https://github.com/googlearchive/code-prettify) pour colorer les extraits de code. Il possède ses propres feuilles de style qu'il importe automatiquement en fonction de la langue qu'il estime être utilisée pour le code, et colore le code en conséquence. Vous pouvez lui donner un indice sur la langue du code en [ajoutant une classe](https://github.com/googlearchive/code-prettify#how-do-i-specify-the-language-of-my-code).

Answer 4

Eh bien, vous pourriez essayer d'utiliser une balise

 dans votre blockquote pour conserver d'abord la mise en forme, puis utiliser une police à espacement fixe, comme courier pour le style css.

Quelque chose comme ceci fonctionnerait dans le css:

    pre {
      font-family:     "Courier New"
                        Courier
                        monospace;
    }

Answer 5

Vous pouvez jeter un œil à prismjs pour mettre en évidence le code.

Vous pouvez personnaliser le package à votre guise depuis ici et empreinte de ce package restera minimal.

Une fois que vous avez un package, vous pouvez l'utiliser comme ci-dessous:

    ...

    ...

Une fois la configuration ci-dessus terminée, vous pouvez l'utiliser comme ci-dessous:

p { color: red }