2011年11月3日 更新日：2020/06/27

アメブロでsyntaxhighlighter ver.2で自動折返しでソースを見やすく！

syntaxhighlighterは現在ver3になって、自動折返しが出来ないので、長い1行のソースは結構見にくいのである。


syntaxhighlighter ver2は自動折返しの機能や背景色が互い違いになることなど、ver3よりよかったと思う点はいくつもあるのである。


さらに、ipadのsafariでアメブロのsyntaxhighlighterで書かれた部分は、最初に改行なしで読み込むため、アメブロのテンプレートがディスプレイの左詰めになった表示で、読み込みが終わるまで、しばらくはその状態。そして、ver3の横スクロールが出てくるので、ユーザーにとっては目の移動が多くなり親切とはいえないかも。


その点、ver2は自動折返しになっているため、一旦読み込んでしまえば、目の移動距離が少なくてすむ。


参考にさせてもらった記事はコチラです 。ありがとうございます。


syntaxhighlighter ver,2の設置の仕方は以下のとおりである。。。。。。


１　syntaxhighligher ver2のソースをダウンロード 。


２　自分のサーバーに上記１を解凍して、そのままアップロード。


３　アメブロのフリープラグインに以下をペースト

?

1 2 3 4 5 6 7 8 9 10 11

<script type="text/javascript" src="http://***/scripts/shCore.js"></script /> <script type="text/javascript" src="http://***/scripts/shBrushPhp.js"></script /> <script type="text/javascript" src="http://***/scripts/shBrushXml.js"></script /> <script type="text/javascript" src="http://***/scripts/shBrushCss.js"></script /> <script type="text/javascript" src="http://***/scripts/shBrushJava.js"></script /> <script type="text/javascript" src="http://***/scripts/shBrushPlain.js"></script /> <link type="text/css" rel="stylesheet" href="http://***/styles/shCore.css"/> <link type="text/css" rel="stylesheet" href="http://***/styles/shThemeDefault.css"/> <script type="text/javascript"> SyntaxHighlighter.config.clipboardSwf = 'http://***/scripts/clipboard.swf';SyntaxHighlighter.config.bloggerMode = true;SyntaxHighlighter.all(); </script />

***の部分は自分のサーバーのディレクトリに。。。


４　記事の書き方は

?

1 2 3

<pre class="brush: js toolbar: true;"> エスケープ処理されたソース を書く </pre>

brush:のあとには記述するソースの種類によって、xmlやhtmlやcssなど変更すること。