ナチュラムのブログがいろいろ変わったようなので手を入れてみようと思うのです。
その過程をメモに残したいと思い、まずはその準備として。
Syntax Highlighter Scripts Generatorを導入してみました。
カラーテーマとハイライトさせる言語を選ぶ。
次に貼り付け用のソースが表示させるのでコピー。
ナチュラムの場合、SyntaxHighlighter.config.bloggerMode = true;は削除。
右上に[?]マークが表示されるので以下を追加して撤去。
SyntaxHighlighter.defaults['toolbar'] = false;
ナチュラムだと改行すると自動で改行タグが挿入されるので、以下を追加。
SyntaxHighlighter.config.stripBrs=true;
最終的にこれを貼り付ければOKみたいです。
SyntaxHighlighter.config.stripBrs=true;
SyntaxHighlighter.defaults['toolbar'] = false;
SyntaxHighlighter.all();
うまく設置できると↑みたいな感じにソースコードを装飾してくれます。
貼り付け場所は管理画面＞テンプレート＞カスタマイズ。
トップページ、個別記事、アーカイブの<head>の直下にコピペで。
使い方
記事編集の画面で記事の中に以下のように入力。
ハイライトする言語にCSS、JavaScript、HTMLを選んだので、
ためしにHTMLのソースを表示してみます。
HTMLのソースを表示する場合、brushにはhtml。
CSSならcss、JavaScriptならjs。
ソースコードを表示させるにはscriptタグで表示させる方法と、
preタグで表示させる方法があるようなのですが、preタグでやってみました。
ここにソースコード
これでソースコードが装飾されます。
CSSで一行ごとに色を付けてみる
行数が多くなっても見やすいように奇数行だけに色を付けてみました。
先ほどのテンプレート＞カスタマイズ画面にあるスタイルシートを編集。
以下を適当に下の方にでも書いておけばよろしいようです。
.syntaxhighlighter .line.alt2 {
background-color: #fafafa !important;
}
迷ったところ
script タグでソースコードを表示しようとしたらつまづきました。
こう書くと <![CDATA[ と ]]> が表示されてしまいました。
さらにソースコードにscript タグが入っているとこれまた正しく表示されない。
script タグで表示させる場合はソースコード中にscript タグは書いてはいけないようです。
書く場合はソースコード中のscriptタグの<を<で潰しておけばいいみたいです。
最後の行が空白行になってしまう
どうしても最終行に空白行が生じてしまうのです。
どうやら、開始のpreタグの直後と終了のpreタグの直前に改行せずに書いていけばいいようです。
最初の行
最後の行
で、これがなんの役立つかというと…よくわかりませんｗ