アメブロにシンタックスハイライトを導入してみた

ちょっと競馬とは関係ないですが、アメブロに「google-code-prettify」+「Ex Code Prettify」を導入しました。

追記記事を書きましたのでこちらをお読みください。
→「アメブロにシンタックスハイライトを導入してみた【追記】」

参考にしたサイト

• 「アメブロでソースコードを色分け表示。google-code-prettify+Ex Code...」
• 「[Ex Code Prettify] その場で編集／実行できるシンタックスハイライター jQuery プラグイン」

つまづいたとこ

参考にさせて頂いた上記サイトを見て頂ければ、シンタックスハイライトというものがどういうものかと、大方の導入方法は分かると思うのですが、ちょっとこのブログでつまづいたというか、ハマった箇所を書いておきます。

アメブロのフリープラグインに追加

アメブロのフリープラグインに下記コードを書き込みます。

<!--google-code-pretty（シンタックスハイライト表示）-->


<!--pretty.jsの読み込み-->
<script src="pretty.jsのURL"></script>
 
<!--Ex Code Prettify（google-code-prettyの拡張プラグイン）-->
 
<!--jquery.ex-code-prettify.jsの読み込み-->
<script src="jquery.ex-code-prettify.jsのURL"></script>
<script>
	$(function(){
		$('.code').exCodePrettify();
	});
</script>
 
<!--jquery.ex-code-prettify.cssの読み込み-->
<script>
	$(function(){
    	$("head").append('<link rel="stylesheet" href="jquery.ex-code-prettify.cssのURL" type="text/css" />');
	});
</script>

これで準備完了です。っとありますが、うちの環境では、

<!--pretty.jsの読み込み-->
<script src="pretty.jsのURL"></script>

 
<!--jquery.ex-code-prettify.jsの読み込み-->
<script src="jquery.ex-code-prettify.jsのURL"></script>

 
<!--jquery.ex-code-prettify.cssの読み込み-->
<link rel="stylesheet" href="jquery.ex-code-prettify.cssのURL" type="text/css" />
↑直接読み込みます

<script>
 $('.code').exCodePrettify();
</script>

フリープラグインではCSSファイルも直で呼び出せる為、わざわざスクリプトを使う必要がない。これは文字数制限という足枷のあるアメブロでは非常に重要なので文字数削減の為にやってます。後、$('.code').exCodePrettify();もわざわざ$(function()を使う必要なくてそのまま実行してやればいいだけです。
要は読み込まれる順番が大切で、フリープラグインの配置で記事文の後にフリープラグインを読み込まれる、つまり、フリープラグインが右カラムに配置されている場合は、記事本文が読み込まれた後にフリープラグインが読み込まれるので、
記事本文　読み込み
　↓
pretty.js　読み込み
　↓
jquery.ex-code-prettify.js　読み込み
　↓
jquery.ex-code-prettify.css　読み込み
　↓
このタイミングでスクリプトを発火させてやれば良いだけので、そのまま$('.code').exCodePrettify();を記述すれば良いだけでした。逆に$(functionをつければうちの環境ではなぜか動かなかったですよね。

すっきり書くならこんな感じ？

<link rel="stylesheet" href="jquery.ex-code-prettify.cssのURL" type="text/css" />
<script src="pretty.jsのURL"></script>
<script src="jquery.ex-code-prettify.jsのURL"></script>
<script>
 $('.code').exCodePrettify();
</script>

と言う感じで、後の記事の書き方等は同じです。
しかし、うちの環境ではなぜか上手く動作せずに結構ハマりましたｗ
同じような悩みを抱えている人がいれば参考にどうぞ。

そもそもTech系のブログではないのでどうでもいいっちゃどうでもいいんですけどねｗ無駄にこだわってみましたｗ