syntaxhighlighterは現在ver3になって、自動折返しが出来ないので、長い1行のソースは結構見にくいのである。
syntaxhighlighter ver2は自動折返しの機能や背景色が互い違いになることなど、ver3よりよかったと思う点はいくつもあるのである。
さらに、ipadのsafariでアメブロのsyntaxhighlighterで書かれた部分は、最初に改行なしで読み込むため、アメブロのテンプレートがディスプレイの左詰めになった表示で、読み込みが終わるまで、しばらくはその状態。そして、ver3の横スクロールが出てくるので、ユーザーにとっては目の移動が多くなり親切とはいえないかも。
その点、ver2は自動折返しになっているため、一旦読み込んでしまえば、目の移動距離が少なくてすむ。
参考にさせてもらった記事はコチラです 。ありがとうございます。
syntaxhighlighter ver,2の設置の仕方は以下のとおりである。。。。。。
1 syntaxhighligher ver2のソースをダウンロード 。
2 自分のサーバーに上記1を解凍して、そのままアップロード。
3 アメブロのフリープラグインに以下をペースト
<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 />***の部分は自分のサーバーのディレクトリに。。。
4 記事の書き方は
<pre class="brush: js toolbar: true;"> エスケープ処理されたソース を書く </pre>
brush:のあとには記述するソースの種類によって、xmlやhtmlやcssなど変更すること。
SECRET: 0
返信削除PASS:
では ないのですが、
DISQUSで紹介していただいたものです。
アメブロはCSSとJQueryのサンプル用のブログを残して完全撤退してしまいました。
syntaxhighlighterは、どっかでホスティングしてるんで実は外部サーバを用意しなくても使えます。一時ワタシもアメブロで使ってました。
あと、不要なJSはリンクしなくてもだいじょうぶかなあ?とか思います(shBrushPhp.jsとか PHPのソースを表示させるなら別ですが)。
ワタシはHTMLとCSS、JSの3つしか使ってませんでしたが・・・
SECRET: 0
返信削除PASS:
syntaxhighlighterの表示が綺麗だったので、いちど凝って見ましたが、アメブロではレイアウト崩れで、ieはいいけど、サファリは改行をするまで、かなりの時間がかかることから、最近はpreタグのみでソースコードは表示するようにしました。