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時点)