Blocs de code Markdown en HTML-tutoriel CSS-php.cn

Bonjour ! J'adore les blocs de code Markdown mais par défaut, nous n'avons pas de blocs de code Markdown en HTML. Nous le ferons avec CSS.

1. Ajout de CSS

1.1. Utiliser un autre fichier pour CSS

Ajoutez ceci à votre CSS :
Et mettez ce code dans style.css :

.code { width: auto; max-width: 80%; background-color: #2d2d2d; color: #ffffff; border: 1px solid #444; border-radius: 8px; padding: 20px; margin: 0 auto; font-family: 'Courier New', Courier, monospace; font-size: 14px; line-height: 1.5; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word; margin-bottom: 15px; } .code pre { margin: 0; } .code code { display: block; }

Copier après la connexion

1.2. En utilisant

Ajoutez ceci dans la balise de style :

.code { width: auto; max-width: 80%; background-color: #2d2d2d; color: #ffffff; border: 1px solid #444; border-radius: 8px; padding: 20px; margin: 0 auto; font-family: 'Courier New', Courier, monospace; font-size: 14px; line-height: 1.5; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word; margin-bottom: 15px; } .code pre { margin: 0; } .code code { display: block; }

Copier après la connexion