投稿内でソースコードを貼り付ける際、「google-code-prettify」というシンタックスハイライターを使って表示していました。今回はその辺りについて少し思ったことを。
目次
シンプルな<pre>のみでの貼付け
なにを思ったかというと、最近、よくチェックしているブログで、<pre> タグのみを使用したシンプルなソースコードの貼り付けをよく目にする、というのと、それでも見た目も気にならずコピペの際もあまり困らないという点から、「別にgoogle-code-prettifyで貼り付けなくてもいいんじゃないか？」と思い始めているということです。
google-code-prettifyを使用したシンタックスハイライト
google-code-prettifyでソースコードを貼り付ける場合、<pre class="prettyprint"> ~ <pre> とタグで囲むことにより、綺麗にシンタックスハイライトされたソースコードを表示することができます。（対応している言語に限りはありますが）
ちなみに<pre class="prettyprint linenums"> ~ <pre>とすることで行番号も追加することができます。
サンプル：
body {
background: #f1f1f1;
font-size: 14px;
color: #333;
}
見た目的にもわかりやすくなりますし、たまにあるそのままドラッグで選択してからコピペすると行番号までコピーしてしまうということも起きません。
Markdownの使用による転機
おそらくなんですが、<pre> タグのみでもいいんじゃないかと思い始めた転機としては、「Markdown記法が使えるようになった」ということがあると思っています。
プラグインJetpack for WordPressの機能の一部で、WordPressの投稿内でもMarkdown記法が使えるようになりました。Markdownは以前から文章の書き溜めなどでよく使っており、文章の記述が楽にできるので、WordPressの投稿の際もかなり楽になったように感じます。
サイトにBootstrapを使用しているのである程度見た目も綺麗に装飾され、google-code-prettifyを使わなくても見た目の差異がなくなってきたので、使用の必要性も感じなくなってきたのではないか、と。
Markdownでのソースコード貼り付けは、
``` ~ ```
と、バッククオート3つで上下を囲むことによりできるようになります。ショートコードなどで <pre> タグを挿入するのもいいんですが、Markdownのほうが圧倒的に早いので、そのあたりハマッてしまっているんだと思います。
問題点？
前回の記事では、行数の多くなった記述に対してだけは、google-code-prettifyを使用しています。
なので正直「見た目シンプルだし記述が楽」、「それで困らないんじゃないか」と勝手に思ったことから、これでいいや、となってるだけという自分勝手なものなのかな…。
問題点というより使い分けの部分かとは思いますが、とりあえずブログでのソースコードの貼り付けについてモヤモヤしていた部分を書き出してみました。
参考
tips! | google-code-prettifyでシンタックスハイライト