Highlighterをつかって、ソースコードをかっこよく表示したい!Bloggerに移籍して、まぁまぁせっかくだから格好いい見た目にしようじぇねえか。思慮してきた僕ですが、昔からブログの表記方法で知りたかったことがあります。「ソースコードをかっちょよく表示したい!」ということです。調べてみたところ、SyntaxHighlighterというサービスが良さそうだということがわかりました。ブログにソースコードをかっこよく表示したいブログにHTMLやCSSのソースコードを書くとき、左のイメージのように格好よく表記をしたいなぁと常々思っていました。方法がわかりませんでした...Google先生にいろいろ聞いてみたところ、どうやらSyntaxHighlighterというサービスが良さそうだぞということがわかり、早速導入してみた次第です。導入した結果ですが、「背景を自由に変えたい」など要望もありますが、概ね満足しています!導入してみて気づいたのですが、結構いろいろなブログで採用されていますね。お手軽に導入できるのが決め手なのでしょうか。1.SyntaxHighlighterを導入してみようSyntaxHighlighterとは、ソースコードをハイライト表示させることができるサービス(意味あってる?)です。ブログのソースコードを、No付きで見やすくまとめてくれます。導入にあたっては、下記サイトを参考にさせていただきました。Highlighter導入のために下記サイトにアクセスです!簡単に設定用のHTMLコードが発行できますよ。BLOGS1.2.テンプレートが選択できるソースコード表記のデザインテンプレートを、8種類から選択できます。Here」から、テンプレートを確認できますよ。僕はシンプルなデザインがよかったので「Eclips」を選びました。1.3.対象となる言語を選択どの言語を表記対象とするかを選択できます。ご自分のブログでどの言語を表記する可能性があるか考えて選択すると良いと思います。選択もれがあっても、後からまた追加して設定しなおすことができるので安心です。Html"を選択してみます。選択し終えたらGenerate」をクリック!1.4.表示されるコードをブログに貼り付け「Generate」のボタンを押すと表示されるコードを、BloggerのHTMLに貼り付けます。ClipBoard」をクリックすると、クリップボードにコードがコピーされます。Bloggerの管理画面左メニューから「テンプレート>HTMLの編集」を選択、</head>の直前に先ほどコピーしたコードを貼り付けます。Highlighterでソースコードを表示する場合、いくつか注意点があります。表示させるには「preタグを使う」ということ、そして「特定の記号は変換して記載する」ことです。詳しく記載しておきます。Highlighterでソースコードを表示するには、preタグを使う必要があります。html;">コード</pre>上記のコードの部分に、表示したいコードを記載します。ちなみに、表示したい言語によって"brush:"のあとの表記を変更します。css;"となります。おっと、注意点はもうひとつありますよ。2.2.特定の記号は変換して記載するpreタグの中に記載するコードについては、"<"と">"の記号を変換する必要があります。"&gt;"上記のように変換して記載します。Highlighterのコードは</head>の直前に配置」これだけ覚えておけば、あとはなんとかなるでしょう。今回は(今回も)先人たちのブログに本当に助けていただきました。Highlighterを導入してみてわかりづらかった部分をより丁寧に残してみました。プロフィール@Banguard東京都在住、サービスマッチングの会社で主に営業戦略の企画をしています。大事だと思ったことや興味あることを、忘れないように残すためはじめたブログです。Macとマックが大好き。このブログが、少しでも皆さんのお役に立てる時があればうれしいです。