您好!我喜歡 Markdown 程式碼區塊,但預設情況下,我們在 HTML 中沒有 Markdown 程式碼區塊。我們將使用 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; }
.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; }
<p class="code"> your text here </p>
例如我在我的網站中使用它:https://modvim.quitaxd.online/installation
如果它不存在,我將給出螢幕截圖:
我手動更改了背景顏色。
以上是HTML 中的 Markdown 程式碼區塊的詳細內容。更多資訊請關注PHP中文網其他相關文章!