環境
ブログテーマとしてCocoonバージョン: 1.9.6を利用しています。コードのハイライトはこのCocoonの設定を用いていて、highlight.jsを使っています。WordPressサイドバーからCocoon設定を開き、コードタブからソースコードをハイライト表示にチェックを入れています。
ちなみに、ハイライトスタイルはandroidstudioです。
悩み
- フォントが好みでない
- inline表記が見づらい
HTMLを見てみると、インラインコードは<code>
ブロックにあり、シンタックスハイライトがかかる部分は<pre class="hljs xxx">
で囲まれさらに<code>
で囲まれています。xxx
の部分には言語名が入るようです。
まず、これらのフォントをいい感じにするために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のことを勉強したら直したいと思います。
コメント