ソースコードの「シンタックスハイライト」を「はてな記法モード」を利用して実現する手順について説明していきます。昨日の続きです。
通常の記事作成は、「見たままモード」を利用していることを前提としています。
１．はてなブログの編集モードを「はてな記法モード」にする
はてなブログの管理画面にログインして
「設定」を選択します。
「基本設定」を下の方にスクロールしていき、「編集モード」の設定で
「はてな記法モード」を選択します。
一番下までスクロールして「変更する」をクリック。
２．シンタックスハイライトの作業用編集ページを「はてな記法モード」で作成
「記事を書く」をクリック。
編集画面が、「はてな記法」になっていることを確認します。
このままコードを書いていってもよいですが、お急ぎでなければ「はてな記法」モード記述用の作業ページとして、下書き保存しておきます。
最初に３行入力しますが、これは、フォーマットとして、常に先頭に残しておき、コードを作成するたびにコピーして使います。
入力している3行とは
--------------------------------------------------
>||
||<
--------------------------------------------------
2行目の空白行は、改行のみ。
入力できたら、「下書き保存」にて保存します。
３．編集モードを見たままモードに戻す
ダッシュボードにて、「設定」＞「編集モード」で、先ほど「はてな記法」にしていましたので、「見たままモード」に戻します。
これで準備完了です。
４．コードの作成とシンタックスハイライト化
ダッシュボードで、「記事の管理」＞「下書き」を選択して、先に「はてな記法モード」で作成した記事を開きます。
編集モードが「はてな記法」になっていることを確認します。
続いて、先に入力しておいた先頭の３行をコピーし、それを元にコードを入力します。
>|| の上の行に 、日付とコードに関する備考を書いておけば、あとで確認するときに便利です。また、プレビューしたときに、べつの >||~~||<で囲んだコードとの囲み線が分かれるので、見やすいと思います。
先頭の >|| の2本のパイプの間に、コードのファイルタイプを入力します。
対応するファイルタイプの種類については、
ソースコードを色付けして表示する（シンタックスハイライト） - はてなブログ ヘルプ
を参照してください。
コードの入力が完了したら、「プレビュー」に切り替えます。 
入力したコードが四角でかこまれて、シンタックスハイライト化しています。
つぎに、このままの「プレビュー」状態のままで、コード部分をコピーします。
コード部分を選択したら、マウス右クリックでメニューを表示させ、「コピー」を選択。
５．シンタックスハイライト化したコードの、記事への貼り付け
こかからは、編集モードが「見たままモード」での通常の記事作成ページで行っていきます。
ダッシュボードのウィンドゥをもう一つ立ち上げて、シンタックスハイライト化の作業用ページと行き来しながらやっていくと作業効率が上がります。
先ほど、コピーしたシンタックスハイライト化したコードを、記事に貼り付けていきます。
シンタックスハイライトされた状態で、貼り付けが完了しました。
プレビューで確認してみると、ちゃんとシンタックスハイライトが効いています。
他にシンタックスハイライトしたいコードがあれば、別ウィンドゥで立ち上げている作業用ページで作成していきます。
以上、ソースコードのシンタックスハイライト化についての解説でした。
