PrismjsとBootstrapを一緒に使うと最初の行にインデントが入ります。

PrismjsとBootstrapを一緒に使うと最初の行にインデントが入ります。



このサイトのWordPressテーマはBootstrapをベースに、シンタックスハイライトコードの挿入としてPrism.jsを使用しています。

そこで、これまで放置していたのですが、この状態でシンタックスハイライトコードを貼り付けると、

<ol>
<li>テスト</li>
<li>テスト</li>
<li>テスト</li>
</ol>

と、こんな具合に最初の行にわずかなインデントが入っていることがわかります。

これは原因を探ると、Bootstrapのcodeに充てがわれたスタイル設定に、

code {
    color: #e83e8c;
    word-break: break-word;
    background-color: #e9ecef;
    margin: 0 .15rem;
    padding: 0 .25rem;
}

があり、このmarginとpaddingの値が作用しているようでした。

そこで、シンタックスハイライトコードを挿入する際には、

<code class="prismjs language-html m-0 p-0">...<code>

と、marginとpaddingを0にキャンセルするように書いてあげると無駄なインデントは消えました。

今日はここまで

関連する記事



こちらはいかが?


コメントを残す