HTML のマークダウン コード ブロック

こんにちは！私は 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>

たとえば、私の Web サイトで使用しました: https://modvim.quitaxd.online/installation

生きていない場合は、スクリーンショットを提供します:

背景色を手動で変更しました。

以上がHTML のマークダウン コード ブロックの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。