はてなブログにて、「はてな表記モード」を利用すると、プログラム言語のソースコードを構文別に色付けしてわかりやすく表示するシンタックスハイライトを実現できます。
以前、VBAのソースコードの貼り付けに利用したのですが、今回、昨日までの記事でHTMLやCSSのコードを同じように貼り付けようとして、やり方をすっかり忘れていました。しばらくやらないとまた忘れてしまいそうなので、憶えている間に記録しておきたいと思います。
では、以下説明していきます。
ソースコードを記事に載せるとき、ふつうの文章と同じようにすると
--------------------------------------------------
<div id="blog-title-content">
<h1 id="title"><a href="https://www.~~~">自分方位研究所</a></h1>
<h2 id="blog-description">日々の活動記録</h2>
</div>
--------------------------------------------------
のようになりますが、記事の文章と、ソースコードの境界が曖昧というか、見栄えがすっきりしません。
これをシンタックスハイライト表示にすると、ソースコード部分が枠で囲まれ、
カラフルに表示されます。
上の例は、HTMLのソースコードですが、タグ部分は色付きに、表示される文字列は黒色に分かれて表示されています。
シンタックスハイライト化する手順を簡単に説明すると
- はてなブログの編集モードを「はてな記法モード」にする。
- 新規に記事編集画面を開き、シンタックスハイライト化したいコードを書く。
- 書き上げたコードを >|| と ||< で囲む。
- 先頭の>||は、そのプログラムの種別(html / css / javascript / python / ・・・など)を 2本のパイプ記号" || "の間に記入。例 : >| html|
- 書き上げたページを「プレビュー」表示する。
- コード部分を選択してコピー。
- コピーしたコードを、「見たままモード」で作成中の編集画面に貼り付けると、シンタックスハイライト化された状態で、貼り付きます。
手順としては以上です。
「はてな記法モード」で作成したページは、下書き保存しておくと、後々シンタックスハイライトを利用したいときの作業用ページとして利用できるので便利です。
一度「はてな記法モード」で作成したページは、その後、ダッシュボードでの編集モードを「見たままモード」にしても「はてな記法モード」のまま変わることはないので、いちいち、編集モードを切り替えてシンタックスハイライトを作成・・・という手間はありません。
上記手順4 の プログラムの種別 については、はてなのヘルプで説明されています。
次回は、具体的に操作例を示しながら説明していきます。
