BloggerでSyntax Highlighter(v3)

BloogerでSyntax Highlighter(v3)を利用する方法のメモです。

Syntax Highlighter(v3)の適応はBloggerのテーマのHTMLに、Web上に公開されているSyntax Highlighter(v3)のスタイルシートやらJavaScriptやらを参照するためのスクリプトを張り付けることによって行います。以下には詳細な手順を記載します。

1. スクリプト生成サイトにアクセスする

way2bloggingのこちらのページの中段あたりにある『HOW TO INSTALL SYNTAX HIGHLIGHTER IN BLOGGER?』というセクション内にGenerate Scriptsというイメージがあります。これをクリックし、スクリプトを生成するページに遷移します。

2. テーマを選択

スクリプト生成ページ上では、まずテーマを選択します。

テーマを選ぶにあたりイメージを確認したくなります。こちらのサイトで確認できます。テーマを選択すると上にイメージが表示されます。

3. プログラミング言語を選択

次にスクリプト生成ページ上で利用するプログラミング言語を選択します。あまりたくさん選択しすぎると読み込むスクリプトの量が増えたりするのでパフォーマンスが劣化するのでご注意を！

4. スクリプトの生成

Generateボタンをクリックしスクリプトを生成します。

5. スクリプトのコピー

生成されたスクリプトをCopy To ClipBoardイメージをクリックしてクリップボードにコピーします。

6. テンプレートのHTMLに張り付け

Bloggerのダッシュボードを表示しメニューからテンプレートを選択します。HTMLの編集をクリックし</head>タグのすぐ上あたりにスクリプトを張り付けます。

動作確認して問題なければ以上で終了です。