MS Access Tips/Sample and VBA and Blog customize etc...

FC2ブログに SyntaxHighlighter を導入

SyntaxHighlighter.jpg

FC2ブログに引っ越す動機になったのがこの syntaxhighlighter を使いたいと言うことでした。で、さっそく導入したのですが、導入にあたって参考にしようとしてWEB検索したのですが、サイトによって微妙に方法が違ったり、古い情報では動かないものもあり、ちょっと混乱しました。そこで、当ブログでの導入例、注意事項を報告します。

syntaxhighlighterをダウンロード

ダウンロードは、下記から。

旧バージョン(1.51) syntaxhighlighter - Google Code

新バージョン(2.0) SyntaxHighlighter - Alex Gorbatchev

旧バージョンと新バージョンでは見た目が少し違います。旧バージョンはツールバーがヘッダー部分に表示レますが、新バージョンは右上部にアイコンで表示されるようです。機能的も増えているようですが、見た目の好みで旧バージョンを利用することにしたので、旧バージョンのページから、SyntaxHighlighter_1.5.1.rar をダウンロードしました。

javascriptとCSSファイルをアップロード

ダウンロードした rarファイル を対応ソフトで解凍して、「Styles」フォルダーからSyntaxHighlighter.css、「Scripts」フォルダーから shCore.js と clipboard.swf と利用したい言語の shBrush****.js ファイルをFC2ブログにアップロードします。(FC2 BLOG 管理画面の「ツール」→「ファイルアップロード」→「ファイル管理」)
**** の部分が言語の略名になってますので何に対応するか推測できると思います。

また、このとき、アップロードしたファイル名が赤字表示されますので、アップロード先のURLをコピーしておきます。
ここのブログの場合の例:http://blog-imgs-29.fc2.com/h/a/t/hatenachips/

テンプレート修正

テンプレートのHTMLにjavascriptとCSSを登録するのですが、ここからがいろいろ情報が交錯する部分です。

まず、下記で紹介されている<head>タグ内に記述する方法ですが、私のブログでは動きませんでした。原因は不明ですが、<head>内に他にもいろいろ。javascriptを登録しているのでそれとバッティングしているのかも知れません。

syntaxhighlighter for FC2ブログ - A Piece of Cake

一番確実だと思われる方法は、<head>~</head>に、CSSを登録。

ブログ内でコード表示する部分より後ろに、javascriptをと登録。

(shBrush****.js は利用する言語のものを登録。)

具体的には、HTMLのどこに挿入するかですが、一番確実なのは、</body> の直前でしょう。しかし、これだと、私のブログのようにサイドメニューにブログパーツをいろいろ置いているとそれがすべて表示された後に実行されることになるので、ハイライト表示されるまでしばらく待たされます。また、上の<head>内に登録する方法でも、window.onload に実行されるので、ページが完全に表示されるまで待たされると思われます。

コードを記事の追記部分のにしか記述しないのであれば、下記で紹介されているように、HTML内の <%topentry_more> の直後に記述するのが一番いいと思われます。また、コードが表示されない時には スクリプトファイル が読み込まれないので表示が軽くなることが期待できます。

FC2ブログでSyntaxHighlighter - オニオンソード!!

追記は使っていない、追記部分以外でもコードを表示することがあるという場合は、上記の場所ではハイライト表示ならないので、記事の最後、あるいは、プラグインの前辺りに挿入するのがいいでしょう。具体的には、<!--/topentry-->タグの直後辺りか<!--plugin-->の直前辺りになると思いますが、テンプレートによって適切な場所は異なってきますので、テンプレートの構造を理解して不具合のない場所に設置してください。テンプレートの構造がよく分からないという場合は、</body> の直前が無難でしょう。(ただし、ページが完全に読み込まれるまで待たされますが)

ブログ内でのソースの記述方法

表示したいソースは <textarea> タグ内か <pre> タグ内に書きます。

classに記述したい言語を設定。
参考: Supported languages

オプション設定
参考: Configuration option

注意事項

記事を編集する際に、記事の設定-->改行の扱い-->「HTMLタグのみ」ラジオボタンを選択しておくこと。

追記: 現在、当ブログに置いてある SyntaxHighlighter は、知人がカスタマイズしたものをいただいて、さらに hatena がカスタマイズしたものを配置してます。

拍手する

1 Comments

tortoise9392 says..."できました!"

ずっとうまくいかなかったんですけど、このサイト参照したらできました☆
ありがとうございます^^

2012.02.08 15:54 | URL | #- [edit]

Leave a reply






Trackbacks

trackback URL
http://hatenachips.blog34.fc2.com/tb.php/71-c320e15d
SyntaxHighlighter
SyntaxHighlighterを導入してみました。 テストです。 class sample { public data1; private data2; } すばらしいですね。 ただ、 http://hatena...
該当の記事は見つかりませんでした。