WordPressのコード部分のレイアウト変更(WP Code Hightlight.js)

WordPressのコード部分のレイアウト変更(WP Code Hightlight.js)

こんにちは。マスジュンです。

今、Wordpressで利用させていただいているテンプレートは素晴らしいのですが、code箇所がフォントが小さかったり、カラーが反映されなかったり不満でした。なので、今回はcode部分のレイアウト修正を行おうと思います。

WP Code Hightlight.jsのインストール

「WP Code Hightlight.js」というプラグインを利用します。色々とGoogle先生に聞いてみましたが、これがシンプルで軽くオススメみたいです。

WP Code Hightlight.jsの設定

WordPressのプラグインで検索すれば、すぐにインストールできます。本当にWordpressって便利ですね。インストールが終了したら、「設定」-「WP Code Hightlight.js」から設定していきます。

【CDN】
cdnjsにしました。正直、よくわからないし、とりあえず「オススメ」と書いてあるので(笑)。

【Color Scheme】
プレビューがあるわけではないので、先ずはdefaltにしてます。時間ができたら、色々と試して決めたいと思います。

【You can add some additional CSS rules for better display:】
ここに追加のCSSを記載すれば、code内に反映できます。デフォルトのテンプレートだとフォントが小さいので、以下のように記載してフォントサイズを少し大きめにします。

code.hljs {font-size: 15px;}

最後に【Enable [\code]\code content …~】の部分にチェックを入れて、【save】を押せば設定が反映されます。かなり見やすくなりました♪※勝手にコード解釈されてしまうので、余計な\が入ってます。

最後に

WP Code Hightlight.jsはシンプルな分、行番号などは表示できないそうです。でも、それで動作が重くなるのならば本末転倒だと思うので、自分にとってはちょうど良いプラグインでした。

今日はここまで。ではでは、また〜!

Settingカテゴリの最新記事