2013年12月30日月曜日

BloggerにSyntax Highlighterを設定したときのメモ

2021/08/02 現在 本記事の設定はできません。
コードの体裁を整えて表示するには、次のサイトが参考になります。


Bloggerにプログラムコードの体裁を整えるのに使用した
Syntax Highlighterの設定で、少し、はまったので、メモとして残しておきます。

Syntax Highlighterは
HTMLにプログラムコードを行番号つきで綺麗に表示することができます。
ぐぐれば、HTMLにSyntax Highlighterを設定する情報はたくさん見つかります。

設定に必要な内容を箇条書きにすると

1.Syntax Highlighterの設定に必要なCSSとJavaScriptのコードをSyntax Highlighterの生成用のページで、生成する。

2.生成したSyntax Highlighterの設定に必要なCSSとJavaScriptのコードをhtmlのheadタグ内に設定する。

3.プログラムコードを行番号つきで綺麗に表示したい箇所のタグのclass属性に
  Syntax Highlighterの用意されているclass名を設定して完了。 

ここからは、わたしが実際に設定したのと、はまった内容です。

・はじめに、Syntax Highlighterの生成用のページで プログラムコードを行番号つきで表示するプログラム言語をチェック。



・そして、Generateボタンをクリック。




・Syntax Highlighterの設定に必要なCSSとJavaScriptのコードが生成されるので
 Copy To ClipBoardボタンをクリックするとクリップボードにコードが取り込まれる。
(コードを全選択して、コピーでも可。)

・Bloggerの設定画面の「テンプレート」をクリックして、「HTMLの編集」をクリック。



・</head>タグの直前に、先程コピーしたSyntax Highlighterの設定に必要なCSSとJavaScriptのコードを貼り付ける。


・その後にSyntax Highlighterの設定が反映されているかを「テンプレートでプレビュー」をクリックしてみたが、Syntax Highlighterの設定が反映されてない。
(pacakage~が該当箇所ですが、行番号も表示されてない、ただのテキストになっている。)


・Bloggerに投稿している本文に誤りがないかと思い確認したが
 Syntax Highlighterの用意されているclass名は設定されている。
 (<pre class="brush: java">が該当箇所)


・どこに設定誤りがないかを探しているときに、実際のBloggerのページをみると
Syntax Highlighterの設定は反映されていた。


なので、Syntax Highlighterの設定は
テンプレートでプレビューでは、反映されないので、
実際のBloggerのページで確認しなければいけないのです。(2013.12.30時点)