BloggerでSyntax Highlighter ver.3を設置する方法

スポンサーリンク

自前で

を装飾するのもしんどくなってきたので・・・。


これまでこのブログではコード関連の表記を
タグなどを使用して、
自前のCSSで装飾していたのですが、もうちょっと見やすくしたいなー、と。

Syntax Highlighter ver.3をBloggerでも利用できる方法を検討。

WPでも、通常のサイトでもプラグインでインストールしたり、ファイルをアップロードして
利用するタイプです。

Bloggerはどちらも利用できないので、実際利用できるのかな?と、
調べたところ、ありました。


こちらです。

テーマや、表示したいコードを選択して、スクリプトを吐き出して、Bloggerのテンプレートに貼る。

というのがここの方法論です。

まず最初に、どういったテーマ(見た目)にするかを、ここのページから選ぶ。

上記のサイトの下部に「GENERATE SCRIPT」なるボタンがあるので、まずはこれをクリック。


まず、最初に選んで決めたテーマをプルダウンから選びます。
ここでは、Djangoを選んでいます。特に理由はなく、完全に個人的な、なんとなくです。

次に、言語の欄から、適当に自分が記述しそうなものを選びます。
ここでは、「Python」「PHP」「HTML」「JavaScript」を選択。

注)こちら、チェックボックスは「頭」ではなく、「お尻」にあります。
 うっかり、していると、Pythonを選んだつもりが、PowerShellを選ぶことに・・・

最後にGenerateボタンを押すと、スクリプトが吐き出されるので、コピーして、
Bloggerのテンプレート編集にて

タグの直前くらいに貼り付けます。

導入は以上で完成。

あとは、実際のブログでの記述のHTMLにて、 <pre class='brush:[brushname];'></pre> ここの[brushname]をjsとか、phpなど、記述するコードに合わせて変更すればOKです。

下記は、上記サイトでも紹介されていたJSのサンプルを実際に表示したものです。

<script type="text/javascript"><br> var d = new Date();
 var time = d.getHours();
 if (time < 10) {<br> document.write("<b>Good morning</b>");
} else {<br> document.write("<b>Good day</b>");
}
</script>
WPのバージョンに関してはこちらのサイトで紹介しています。

SyntaxHighlighterが表示されない&クリップボードへコピーが表示されない

スポンサーリンク

シェアする

フォローする

スポンサーリンク