はてなブログに色付きコード表示させてみよう：シンダックスハイライト機能の使い方
おすっ！つな（@tu_na_69）です(^^♪
はてなブログにコードを表示させてみましょう！これやってみたかったのです。
ブログにコードを載せたい時、そのままではコードが変換されてしまいうまく表示することができません。
例えば、「つなろく」へのリンクコードをここに記入してみましょう。
<a href=" からはじまるHTMLコードを記入すると、自動的にリンク表示に変換されてしまいます。
コードが変換されないように、こんな感じに表示するのが目標です。
サイトにコードを表示させる方法をまとめてみました。
シンタックスハイライトを使おう
コードを色付きで表示させるシンタックス・ハイライトという機能があります。先ほどの↑のコードも色付きになっていますよね。こんな感じで表示されます。
はてなブログでは、３つの編集モードがあります。
編集画面の左上にある「編集」の矢印をクリックしてみてください。
はてなブログでできる編集モードが表示されます。
①みたまま編集
みたまま編集は「HTML編集」をクリックすると、HTMLが表示されコードを書き加えたり編集したりすることができます。
先ほどのHTMLでコード表示させる方法が使えます。
シンタックスハイライトの機能を使うためには、
②はてな記法③Markdownのどちらかで編集します。
それぞれの編集モードでコードを表示させる方法を紹介していきます。
「つなろっく」へのリンクのHTMLコードをお手本にしますよ(*‘∀‘)
①HTMLでコード表示させる方法
まずはじめに言わせてください。
はてなブログの「見たまま編集」では、色付きのコード表示はできませんでした。いろいろやってみましたが、シンプルにコード表示されるだけで味気ない感じでした。
はてなブログでの色付きコード表示の方法を知りたい方は、ここは飛ばしてください。
基本となるHTMLコードは知っているとなにかと便利なので、少しお勉強しておこうかなという方は、読んでいって損はないと思います。
次のふたつのコードを組み合わせて使うことでコードをく表示することができます。
<pre>～</pre>
<code>～</code>
こんな風に使います。
最初に述べたように、この方法でははてなブログで色付き表示はできませんでした。
ただ、いろいろ調べてみると、HTML編集でも色付き表示ができる方法があります。この記事もHTML編集を使っていますが、色付きコード表示されていますよね。
その方法も、のちほど記事にまとめますね。
②はてな記法でコード表示させる方法
はてな記法でコードを表示させるには、「>||」と「||<」のコードで挟みます。
簡単に書くと使い方はこんな感じ。
>||ここにコードを書く||<
わかりやすいようにコードに青い色をつけました。
この時、注意してほしいのは、「>||」と「||<」のコードは必ず行頭に入れて改行してください。←ここがわからなくて、苦戦しました。
さらに、これだけでは色付きになりません。
色付きでコード表示するためには、そのコードがどのプログラム言語で書かれたものが指定してあげる必要があります。
こちらのコードを見てください。
プログラム言語を「html」が入っている箇所に入れてください。
はじめの「>||」コードの二本の柱のあいだです。
どのプログラム言語を指定したらいいかわからないという人も、だいじょうぶ。
少し勉強すればすぐに覚えられますよ。
ブログをつくる時に初心者が覚えておいた方がいいプログラム言語は「html」か「css」くらいではないでしょうか。あとは「Javascript」とか？
コードを詳しく覚えている必要はありません。コードを見てどの言語かわかるくらいで大丈夫です。
③Markdownでコード表示させる方法
はてな記法でコードを表示させるには、バッククオート（`）を3つ続けた「```」と「```」のコードで挟みます。
最初の「```」のうしろにプログラム言語を指定します。
こんな感じになります。
まとめ
これまで難しそうだなと敬遠していましたが、覚えてみると楽しい機能です。
いつかオリジナルのデザインCSSコードを見てもらえたりしたら楽しいですね(*‘∀‘)
シンタックス・ハイライト機能の使い方はこちらを参考にしました。
はてなブログのシンタックス・ハイライト機能に対応する言語を募集します（追記あり） - Hatena Developer Blog
