今まで「Crayon Syntax Highlighter」を使用して、ブログ内でのプログラムコードを表示していましたが、既に5年前からアップデートが停止しており、最新のPHP7系にも未対応ということから、「Highlighting Code Block」にリプレイスすることにしました。
「Highlighting Code Block」（以下HCB）は、Crayonと比べ拡張性は殆どないものの、非常にシンプルです。
対応言語は標準では数少ないですが、PRISMを使って増やすことも可能です。
ただ、PRISMで追加設定するとハイライトの位置がずれる問題がおきましたので、ここでは詳しい使い方などは他のブロガーさんに任せて、メモ的に対応方法について記載していきます。
1. 症状
まずは以下の絵を見てもらえればわかるかと思います。
47行目にハイライト設定をしているのですが、(1)下にハイライトがずれています。それと(2)ハイライトが薄すぎて見えにくい。
今回は、こちらの２つについて対応していこうと思います。
2. 修正
単純にCSSの設定がおかしいというのはわかるので、ブラウザの検証機能を使って問題の箇所を探り、２つのファイルで対応箇所を修正していきます。
(1)ハイライト位置調整
ハイライトは、HCB側のhcb_style.cssを修正すれば問題が解決します。
（場所：/wp-content/plugins/highlighting-code-block/build/css/hcb_style.css）
このファイルを開くと非常にわかりづらいのですが、
「.line-highlight」を検索して、「margin-top:1.75em;」の1.75を1に変更します。
.line-highlight{
position:absolute;
right:0;
left:0;
margin-top:1.75em;これでハイライトが所定位置に調整されます。
(2)ハイライトの色調整
ハイライトの色は、PRISM側のprism.cssを修正します。
「.line-highlight」内の「background: liner-gradient()」を以下のように修正しました。
グラデーション設定なのですが、背景が黒なので単純に白ベースを透過処理しています。
3. 結果
以上２つの再設定で、少しまともになりました。
注意点としては、恐らく今後のプラグインアップデートをした際、再設定が必要になるかもしれませんね。（少し気が重くなってきた。）
以上、ご参考にしていただければ幸いです。
コメント