このブログを開設したのは、プログラミング学習の記録が目的。
というわけで、まずはブログの本文中にプログラムのコードをきれいに表示させる方法を模索しました。
いろいろ調べた結果、今回は「SyntaxHighlighter」を採用。簡単にかっこよくコードが記述できるようになり感動です。
SyntaxHighlighterの利用手順
BloggerでSyntaxHighlighterを利用するには、テーマのHTMLを編集して、専用のコードを追加する必要があります。SyntaxHighlighterについてはいろんなサイトで解説されていますが、みなさん独自にデザインや読み込み先を工夫して使っておられるようです。
僕はそこまでの知識はないので、下記のブログで紹介されていたコードをまるまるコピぺして使わせていただきました。
コード内には親切にコメントがつけられていて、大変参考になりました。
参考：Bloggerでソースコードを貼り付ける（改改）
HTMLの終わりの方にある</body>タグの直前にコードを貼り付けたら、準備完了！
あとは実際にブログを投稿する際、本文中でコードを書くときの作業がポイントになります。
コードの書き方
SyntaxHighlighterを使う場合、下記のような形式で表示させたいコードを記述します。<pre class="brush:text" title="タイトル"> 表示させたいコード </pre>
このとき、「text」のところには、コードで使用しているプログラミング言語の種類を書きます。
よくわからないときは「text」のままにしておけば、すべてのコードが色づけ無しの白色で表示されます。
「タイトル」の部分は必要ないなら何も入力しなくて大丈夫です。
そして、忘れてはいけないのが、コード中に出てくる「<」を「<」へ、「>」を「>」に置き換えること。
この作業を行わないと、単に表示させたいだけのコードが機能を持ったタグとして認識されてしまい、動作がおかしくなってしまいます。
あと、出現頻度は低いですが、「&」も「&」に置き換えておくのが安全です。
こうした記号を一つ一つ手作業で書き直すのは大変ですが、心配はご無用！
ありがたいことに、ネット上では多くの方が便利な置換ツールを公開されており、手間をかけずに一瞬で処理を行うことができます。
参考：貼り付け用ソースコード生成ツール（SyntaxHighlighter用）
参考：HTMLエスケープツール | Web制作小物ツール
スマホでも有効
SyntaxHighlighterは、スマホやタブレットなど、モバイル端末からブログを見たときも有効です。僕の使っている「QooQ」や「Vaster2」のようなレスポンシブ対応のテーマの場合、パソコン用のテーマで設定を行えば、それ以上手を加える必要はありません。
念のために確認してみましたが、僕のブログではスマホでもきちんと動作していました。
ちなみに、レスポンシブ対応のテーマを使用する場合、SyntaxHighlighterを導入するか否かに関わらず、モバイル用テーマの設定を「いいえ。モバイル デバイスでもパソコン用のテーマを表示する。」にしなければいけません。
この設定を忘れると、スマホでブログを見たとき全然違う見た目になるので気を付けましょう。
