WordPressのcodeタグのCSS設定

環境

ブログテーマとしてCocoonバージョン: 1.9.6を利用しています。コードのハイライトはこのCocoonの設定を用いていて、highlight.jsを使っています。WordPressサイドバーからCocoon設定を開き、コードタブからソースコードをハイライト表示にチェックを入れています。
Cocoon設定からソースコードハイライトをONにする
ちなみに、ハイライトスタイルはandroidstudioです。

悩み

  1. フォントが好みでない
  2. inline表記が見づらい

好みのフォントでなく、inlineは見づらいです。
HTMLを見てみると、インラインコードは<code>ブロックにあり、シンタックスハイライトがかかる部分は<pre class="hljs xxx">で囲まれさらに<code>で囲まれています。xxxの部分には言語名が入るようです。
HTMLを見るとその構造がわかる。
まず、これらのフォントをいい感じにするためにCSS設定を編集しましょう。
WordPressのCSS編集方法
以下のCSSにより、codeブロックに対してフォントを適用します。

code {
    font-family: "Consolas", "Courier New", monospace;
}

するとフォントがいい感じになります。好きなフォントがある方はそれに差し替えておいてください。
フォントが期待通りのものに変わる
依然としてinlineが見づらいので両端にスペースをとりたいです。そこで同じようにcodeブロックを以下のように編集することを考えます。

code {
    font-family: "Consolas", "Courier New", monospace;
    margin-left: 5px;
    margin-right: 5px;
}

すると以下のようになります。
ソースコードの頭に空白が入ってしまう
inlineの部分は見やすいようになりましたが、ハイライトされる部分は頭に気になるスペースが入ってしまいます。それは置いといて、さらに見やすくするために文字背景をグレーにしたいのですが、以下の結果になります。

code {
    font-family: "Consolas", "Courier New", monospace;
    margin-left: 5px;
    margin-right: 5px;
    background-color: #DFDFDF;
}

コードブロックの文字背景がめちゃくちゃ
ハイライトの表記がひどいです。汚い対応策ではありますが、<em>タグにinline codeの役割を任せることにしました。

em {
    background-color: #DFDFDF;
    font-size: 90%;
    font-style: normal;
    margin-left: 5px;
    margin-right: 5px;
}
code {
    font-family: "Consolas", "Courier New", monospace;
}

inline codeを表記するときにはバッククオートで囲んだ後にアスタリスクで囲んでいます。そのうちしっかりとCSSのことを勉強したら直したいと思います。

コメント

タイトルとURLをコピーしました