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

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




概要

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

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

Cocoon
SEO・高速化・モバイルファースト最適化済みのシンプルな無料Wordpressテーマ。100%GPLテーマです。

追加した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を利用しています。