Markdownでキレイなソースコードが書ける環境をWordPress上に作る

はじめに

ソースコードやコマンドラインなどを含む技術的な内容の記事をWordPressで書こうと思ったとき、自分の中では以下の二つの項目はライティングの環境下において必須でした。

一つ目のシンタックスハイライトに関しては当たり前といえば当たり前ですね。同一色だけのソースコードなどは見にくくて仕方ないです。
二つ目のマークダウンで記事を書けるに関してはQiitaや日常の議事録などでマークダウンでの記述に慣れていたためです。

今回、技術記事を書くためにWordPress環境をカスタマイズしたのですがいい感じにするために少し作業をしたためナレッジを共有します。

マークダウンのプラグインはJP Markdown、シンタックスハイライトのプラグインはWP Code Highlight.jsを利用しました。これでシンタックスハイライトが効いたマークダウン記述ができるようになりました。

さて、実際に二つのプラグインを利用してソースコードをマークダウンで記述すると以下のようになりました。

自分はWordPressのテーマにスワローを利用しているのですが、スワローで定義しているCSSの影響でソースコード部分が変な感じになってしまいました。

実際のHTMLを見てみると以下のようになっています。つまり、マークダウンでソースコードを書くとpreタグとcodeタグで囲われる形になります。

スワローでのpreタグの背景色とcodeタグの背景色が異なっているため、先ほど見せたように見た目が変な感じになっていたみたいです。

問題を解決するためにプラグインの設定画面にYou can add some additional CSS rules for better display:という部分があるのですがこちらをカスタマイズします。

カスタマイズですが、preタグの部分を見えなくすることで綺麗な見た目になるようにします。

まず、preタグはcodeタグを囲んでいるだけなのでpaddingを0にします(.entry-content pre { padding: 0; })。
すると、以下のようになります。

スワローの場合はpreタグにborder-leftが存在していたため、これを無くします。(.entry-content pre {border-left: none})
すると以下のようになります。

最終的なカスタマイズするCSSは以下のようになります。

.entry-content pre {
   border-left: none
   padding: 0;
}

最後に好きなカラースキーマに変更して終了です。(自分はagateを選びました。)

以上がMarkdownでキレイなソースコードが書ける環境をWordPress上に作る手順でした。まとめると以下のようになります。