はてなブログでコードハイライト表示する方法
はてなブログに、プログラムのコードを掲載するとき、色を付けて見やすくする方法がありました。（メモ）
ハイライト表示とは？
プログラムのコードに色を付けて、見やすくする表示方法のことです。
コード・ハイライトは、シンタックス・ハイライトとも言います。（いろんな呼び方があるんですね）
シンタックスハイライト（英: Syntax highlighting）とは、テキストエディタの機能であり、テキスト中の一部分をその分類ごとに異なる色やフォントで表示するものである。
シンタックスカラーリング（英: Syntax coloring）とも。
この機能により、プログラミング言語やマークアップ言語といった構造化された言語において、その構造や構文上のエラーが視覚的に区別しやすくなるため、ソースコードの記述が容易となる。
はてなブログのモード
はてなブログの編集画面は、
という３種類のモードがあります。
このうち、「はてな記法」と「Markdown」は、コードハイライトが用意されています。
はてな記法のコードハイライト書式
- コードを「>||」と「||<」との間に書けばOK。
- 最初の「|」（パイプ）の間に、プログラム言語の種類を指定すればOK。
>|プログラム言語の種類|
コード
||<
（例）Rubyのプログラムコードの場合
>|ruby|
class Foo
def bar'baz' # return baz
end
end
||<
（表示）上記の内容は、以下のように色がついて表示されます。
Markdownのコードハイライト書式
```プログラム言語の種類
コード
```
（例）上記の内容をMarkdownの書式で書くと、以下のようになります。
```ruby
class Foo
def bar'baz' # return baz
end
end
```
（表示）
見たままモードのコードハイライト
はてなブログの「見たままモード」には、コードハイライトの書式が用意されてないのですが、「はてな記法」や「Markdown」を利用して、コードハイライトさせる方法が紹介されていました。
手順は、以下のようになってました。
- 今書いている「見たままモード」の記事とは別に、新しい記事を用意して、「はてな記法」または「Markdown」でプログラムコードを書く。
- コードハイライトの内容をプレビューで表示させる。
- プレビューで表示されたコードハイライトをコピーする。
- モダンブラウザー（Chrome等）で、「見たままモード」の記事に貼り付けると、コードハイライトのまま表示できる。
上記の画面で、「編集 Markdown」の右にある「プレビュー」をクリックすると、ブログに表示された場合の見え方が確認できます。
（上の画像だと注記の文字に隠れて見えませんが、「編集 Markdown」の右側に「プレビュー」というリンクがあります。）
こっちのプレビューだと、黒い背景でコードハイライトが表示されます。
（表示）
お好みに応じて、こっちをコピペしても良いでしょう！
プログラム言語を指定するオプション
ソースコードを色付けして表示する（シンタックスハイライト） - はてなブログ ヘルプ
ハイライト表示に使いそうなプログラム言語をピックアップ。
Markdownとは？
Markdown（マークダウン）は、文書を記述するための軽量マークアップ言語のひとつである。
本来はプレーンテキスト形式で手軽に書いた文書からHTMLを生成するために開発されたものである。
まとめ
はてな記法やMarkdownを利用して、プログラムのコードをブログに掲載してみようと思います！
はじめてのMarkdown―軽量マークアップ言語の記法と使い方 (I・O BOOKS)
- 作者: 清水美樹
- 出版社/メーカー: 工学社
- 発売日: 2014/05
- メディア: 単行本
- この商品を含むブログを見る
