Blok Kod Markdown dalam HTML-tutorial css-php.cn

Blok Kod Markdown dalam HTML

WBOY

Lepaskan： 2024-07-17 16:05:37

asal

1062 orang telah melayarinya

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

Salin selepas log masuk

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

Salin selepas log masuk