HTML 中的 Markdown 代码块

您好！我喜欢 Markdown 代码块，但默认情况下，我们在 HTML 中没有 Markdown 代码块。我们将使用 CSS 来完成。

1.添加CSS

1.1.使用另一个 CSS 文件

• 将其添加到您的 CSS 中：
• 并将这段代码放入 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.使用标签

• 在样式标签中添加以下内容：

.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. 使用它

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

例如我在我的网站中使用它：https://modvim.quitaxd.online/installation

如果它不存在，我将给出屏幕截图：

我手动更改了背景颜色。

以上是HTML 中的 Markdown 代码块的详细内容。更多信息请关注PHP中文网其他相关文章！