SyntaxHighligterの導入方法(振り返り)

一個前の記事を書いている際
･･･あれ？JavaScriptの設定してない･･･？Σ(・д・`)


という事実の発覚により入れなおし
忘れかけていたのでメモメモφ(・ω・ )

SyntaxHighlighter設定

もちろん対象はBlogger.

1. コード生成

コードとか言うとアレだけど要はリンクの生成.
ここから生成できます.
決める項目は二つ
ひとつはテーマ. これはお好みで. こことかカタログチックになってて選びやすいかと. こーいうところあると助かります.
もうひとつが使用言語. これはブログ中でSyntaxHighlighterに載せたい/載せる予定の言語を選ぶ. あんま選びすぎると重いとか聞いた気がしたけど未確認. おそらく自分の趣味の範囲とかと相談か.
二つ設定したら Generate.
すると次のページにテキストエリアにリンクやらスクリプトやらいっぱいのタグが出たはず.
これが生成されたリンク. 全部コピーしておきましょう.

2. 設定

設定というかリンクの埋め込みというか.
Bloggerのマイブログからテンプレート→HTMLの編集へ
選択しているテンプレートのHTMLなのかがずらっと出てくるけど, 用があるのは<header>.
わかりやすいように</header>の直前あたりを選ぶといい. ctrl + F から検索をかけるとだいぶ楽になるハズ.
選んだ場所に1. で生成したコードを埋め込む. もろコピペ. てゆーかいじっちゃダメ.


これで準備はOKなはず.
なおテンプレートを変えると全部消えてしまうので, 変えるときは一緒に設定のしなおしが必要.

3. 実際に使用

これはシンプル.
投稿作成を開いてHTMLで記入するモードに変更.
普通にHTMLを書くように

<pre class="brush:使用言語ごとのブラシ名">ハイライトしたいコード</pre>

と書き込んでプレビューすると, あら不思議.


なおオプションで
・左の行数表示のカスタム
・コードのコピーなどのツールボックス
なんてのも設定できるらしい



気が向いたらやってみる(´･ω･`)ｲﾂﾆﾅﾙｶﾜｶﾗﾅｲｶﾞﾅ