ブログのソースコードにハイライトって必要?

2012年10月17日

人様のブログを見てるとですね、ソースコードをハイライトされてる方が多いわけです。僕もやってるんですけどね。

で、僕は「JSでハイライトすると重いからサーバサイドでcodeタグ内の文言に自働でクラスつけてCSSだけで対応できるプラグインとかないのかなぁ」とか思ってたりする人です。でした?

でも、ふと思ったんですけど、人のブログでソースコードのハイライトってそんなに重要か?と。だってハイライトしてないと読みにくいような長さのコードだったらそもそもエディタにコピーするんじゃね?てか読まねーよw

なので、今まではGistに書いてエンベッドしてましたがこれからはプレーンな感じにしたいと思います。何も足さない、何も引かない。

ただ、せっかくプレーンにするんだからせめてフォントにくらいはこだわってみようかなぁと思ったので、ちょっと前に話題になった Adobe の Source Code Pro を使ってみようかと思います。

[速報] ソースコードを表示するためのフォント「Source Code Pro」をアドビがオープンソースで無料公開 - Publickey

実装方法

head内でフォントを読み込みましょう

<link href='http://fonts.googleapis.com/css?family=Source+Code+Pro' rel='stylesheet' type='text/css'>

もしくはimportでも大丈夫です。

@import url(http://fonts.googleapis.com/css?family=Source+Code+Pro);

あとはソースを表示させたいセレクタに font-family を指定してあげれば完了です。

pre {
  background: ghostWhite;
  border: 1px solid #f0f0f1;
  font-family: 'Source Code Pro', sans-serif;
  padding: 3px 5px;
}

ブログは読み手がいてこそではあると思っているので、色分けをちゃんとして読みやすくした方が良いんでしょうけど、どうもこのハイライト系は動作が遅くなる印象だしGistは何かこまごま書くときに面倒くさいしでまぁ良いか、的な感じになりました。

どうです?別に読みにくいとまで言わないんじゃないかと思いますがどうでしょうね。

こういった対応は多くの人が良いと思う内容だとは思いませんが、 Adobe の Source Code Pro 対応チュートリアルだと思って頂ければ幸いです。

他にこんな事も書いてます

FBでコメント

コメント1つ

  1. 書いたよ:ブログのソースコードにハイライトって必要? – http://t.co/TMY1f6u0

トラックバック/ピンバックはありません。