untitled .engineer

技術系のブログ（仮）

はてなブログのMarkdown記法のコードブロックで日本語等幅フォントを指定する

CSS Markdown

目次

本エントリの概要

とりあえずできた方法

多少試行錯誤して一旦こんな形でまとまりました。
私はMarkdownでしか書かないので他は検証していませんが、工夫すれば「はてな記法」でも行けるんじゃないかと想像しています。

フォント

  • 各デバイスが標準で持っている等幅フォントを指定してゆくのもなくはないんですが、その場合Windowsは「MSゴシック」。ちょっと見た目がアレです。
  • となると次に検討するのはWebフォント。
  • 探してみたところ、「GoogleFonts」にある「Kosugi」と「Kosugi Maru」がよさそうです。
  • 今回は「Kosugi Maru」を使ってみます。
  • これを読み込むタグをヘッダに埋め込みます
  • ダッシュボードの「デザイン」→「カスタマイズ(スパナアイコン)」→「ヘッダ」→「タイトル下」に以下を追記します。
  • f:id:dupont_kedama:20180913170417p:plain
<link href="https://fonts.googleapis.com/css?family=Kosugi|Kosugi+Maru" rel="stylesheet">

CSS

  • コードブロック全部のフォントを変えてもいいのですが、今回はMySQLの戻り値表示に日本語表示がある場合に使いたいという思いがありました。
  • コードブロックで言語を指定するとそれがdata-langという属性に付与されシンタックスハイライトされます。
  • このdata-lang指定をCSSで拾います。
  • ダッシュボードの「デザイン」→「カスタマイズ(スパナアイコン)」→「デザインCSS」を以下のように追記します。
  • f:id:dupont_kedama:20180913170428p:plain
.entry-content pre[data-lang="hex"] {
    font-family: 'Kosugi Maru', Consolas, monospace, sans-serif;
}

本文(Markdown)

  • 本文記述時にコードブロックの上で指定した「ファイルタイプ」をつけます

f:id:dupont_kedama:20180913170437p:plain

※ファイルタイプの選択

※すべてのコードブロックに適用したい場合

  • 指定の言語だけでなくコードブロックすべてに適用したい場合はCSSを以下のように書くとよいでしょう。
    • この場合はファイルタイプを意識する必要がありません。
.entry-content pre.code {
    font-family: 'Kosugi Maru', Consolas, monospace, sans-serif;
}

対応デバイス

  • ほとんどのWebブラウザは対応しているはずです。
    • Android的なのも大丈夫だと思います。（KindleFireHD の Silkブラウザでは大丈夫でした。）
    • Macはもっていないので検証していません。
  • iOSは・・・あいつはよくわからないので諦めます。

誰得だよ？って

  • MySQLのコンソールで実行した結果をブログにコードブロックでテキストで貼り付けるじゃないですか。
  • そうするとデフォルトのフォントが等幅じゃないから表示がちょっと崩れてしまうじゃないですか。

指定なし

+--------------------+--------------------+
| name               | DIST               |
+--------------------+--------------------+
| 東京都庁           | 1175.4095006244806 |
| 渋谷区役所         | 3549.5686834591866 |
| 千代田区役所       |  4535.764268316921 |
| 文京区役所         |  4676.014716130442 |
| 世田谷区役所       |  6991.478924121638 |
+--------------------+--------------------+
18 rows in set (0.13 sec)

指定あり

+--------------------+--------------------+
| name               | DIST               |
+--------------------+--------------------+
| 東京都庁           | 1175.4095006244806 |
| 渋谷区役所         | 3549.5686834591866 |
| 千代田区役所       |  4535.764268316921 |
| 文京区役所         |  4676.014716130442 |
| 世田谷区役所       |  6991.478924121638 |
+--------------------+--------------------+
18 rows in set (0.13 sec)

ほらなんかいい感じ。それだけです。

所感

  • まぁ簡単なんですが、こういう細かいカスタマイズをし続けるとメンテナンスが面倒になるのでやめた方がよいという思いもあります。
    • 前のブログから引っ越した理由の一つでもある。
  • なんか前回まで重いのが続いてて疲れてました。。。このくらいの軽い感じのネタを書くつもりだったはずだったのに。