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

HTML/CSS

はじめに

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

  • シンタックスハイライトが効いている
  • マークダウンで記事を書ける

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

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

JP MarkdownとWP Code Highlight.jsの組み合わせで決まり

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

テーマのCSSと競合して見た目が残念になる可能性がある

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

自分はWordPressのテーマに<a href=”https://px.a8.net/svt/ejp?a8mat=2Z8N6N+2Z6SY+3PSE+639IQ” target=”_blank” rel=”nofollow”>スワロー</a><img border=”0″ width=”1″ height=”1″ src=”https://www10.a8.net/0.gif?a8mat=2Z8N6N+2Z6SY+3PSE+639IQ” alt=””>を利用しているのですが、スワローで定義しているCSSの影響でソースコード部分が変な感じになってしまいました。

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

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

WP Code Highlight.jsをカスタマイズ

問題を解決するためにプラグインの設定画面に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上に作る手順でした。まとめると以下のようになります。

  • シンタックスハイライトはWP Code Highlight.jsを利用
  • マークダウンはJP Markdownを利用
  • ソースコードのデザインが崩れるのは利用しているテーマが関係している(特に、preとcodeタグ)
  • preタグ、codeタグの背景色が異なるのであればpreタグ部分が見えないようにする