アメブロにシンタックスハイライトを導入してみた【追記】 | オッズハック / oddsHack
Amebaホームピグアメブロ
芸能人ブログ人気ブログ
新規登録
ログイン

オッズハック / oddsHack

荒れるレースはオッズがすべて教えてくれる！

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

ちょっと競馬とは関係ないですが、アメブロに「google-code-prettify」+「Ex Code Prettify」を導入しました。【追記】アメブロのエディタにも罠がっ！

参考にしたサイト

つまづいたとこ

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

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

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

<!--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系のブログではないのでどうでもいいっちゃどうでもいいんですけどねｗ無駄にこだわってみましたｗ

【追記】標準エディタを使おう

いや～、まんまと騙されましたw

なぜか最初の記事 では、pre内が１行表示になるんですが、またまたパニクるところでしたが、もしやと思ったら案の定、アメブロの記事を書く際のエディタが原因でした。

私は日頃Macを使ってまして、基本的にMacのSafariやChromeを使うので、アメブロに記事を書く時もSafariやChromeを使うのですが、これらでアメブロを記事を書こうとすると、「タグ編集エディタ」というものを標準で使う事になるんですが、これで書いちゃうと、前記事 のようにpre内が１行表示なりますので、ソースを記述際には、FireFoxやIEで使われる「標準エディタ」というものを使わないといけませんので、皆さんも注意してください。まったく面倒くさいぜっ！！！