文字を大きくする 文字を規定のサイズに戻す 文字を小さくする

hatena chips

MS Access Tips/Sample and FC2Blog customize and etc...

<<Accessの老舗サイト Access Club が、、、 | ホーム | ページの最後の罫線を太線にする>>

FC2ブログに SyntaxHighlighter を導入

Category: ブログ-カスタマイズ-FC2
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

注意事項

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

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

関連してそうな記事


Social Bookmark 拍手する←面白かった、or 役に立ったなら、ポチッとしてね！！

テーマ:ブログカスタマイズ | ジャンル:ブログ | タグ: FC2 ブログ カスタマイズ SyntaxHighlighter テンプレート JavaScript

  1. EDIT
  2. 2009/04/25(土) 13:17:09
    3. | トラックバック:0
  3. | コメント:0
  4. | ▲PageTop▲
<<Accessの老舗サイト Access Club が、、、 | ホーム | ページの最後の罫線を太線にする>>

コメント

コメントの投稿


管理者にだけ表示を許可する

トラックバック

トラックバック URL
この記事にトラックバックする(FC2ブログユーザー)