Blok Kod Markdown dalam HTML

Hello! Saya suka blok kod Markdown tetapi secara lalai, kami tidak mempunyai blok kod Markdown dalam HTML. Kami akan melakukannya dengan CSS.

1. Menambah CSS

1.1. Menggunakan fail lain untuk CSS

• Tambahkan ini pada CSS anda:
• Dan letakkan kod ini dalam 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. Menggunakan tag

• Tambahkan ini dalam teg gaya:

.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. Menggunakannya

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

Sebagai contoh, saya menggunakannya dalam tapak web saya: https://modvim.quitaxd.online/installation

Jika ia tidak hidup, saya memberikan tangkapan skrin:

Saya menukar warna latar belakang secara manual.

Atas ialah kandungan terperinci Blok Kod Markdown dalam HTML. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!