WordPressに貼り付けたコードが等幅フォントで表示されないのでcssを適用して修正する。highlight.js

目次

1. 概要
2. 追加したcss

概要

WordPressのコードハイライトにhighlight.jsを利用してますが、 なぜかフォントが等幅で表示されなかったので、カスタマイズ機能からcssを適用した話。

highlight.jsに関しては利用しているテーマ：cocoonの機能のものを利用。

https://wp-cocoon.com/

追加したcss

以下のようなcssを適用しています。 line-heightはこだわりがあったので、1.5としています。

ここで" .entry-content "はハイライトエリアに適用するclassとしています。

.entry-content pre {	
    font: normal 10pt Consolas, Monaco, monospace;
    font-style: normal;
    font-variant-ligatures: normal;
    font-variant-caps: normal;
    font-variant-numeric: normal;
    font-variant-east-asian: normal;
    font-weight: normal;
    font-stretch: normal;
    font-size: 10pt;
    /* line-height: normal; */
    font-family: Consolas, Monaco, monospace;
    line-height: 1.5;
}

ビフォー

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

アフター

うまく適用出ているのがわかるかと思います。

余談ですが、highlight.jsのテーマはmonokaiを利用しています。