Blocs de code Markdown en HTML

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;
}

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;
}

2. L'utiliser

<p class="code">
   your text here
</p>

Par exemple, je l'ai utilisé dans mon site internet : https://modvim.quitaxd.online/installation

S'il n'est pas vivant, je donne une capture d'écran :

J'ai changé la couleur d'arrière-plan manuellement.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!