So-net無料ブログ作成

So-netブログでSyntaxHighlightを使う [Web]

So-netブログを使って結構長いのですが、ソースコードを張り付けるのにいい加減疲れてきました。(っていうほど記事を書いているわけではないのですが。)
preタグで囲ってしまえばいいのですが、見え方としては微妙なんですね。
世間にはいろいろとソースコードを綺麗に表示させる仕組みがあるようなのですが、最近よく見るSyntaxHighlightを導入してみました。

SyntaxHighlighter
http://alexgorbatchev.com/SyntaxHighlighter/

本来は、上記サイトからスクリプトをダウンロードしてきて、自分のWebサイト内にスクリプトを設置してあげる必要があるのですが、公開されているスクリプトをWeb経由で引っ張る方式を採用します。
(So-netブログって自作スクリプトファイルを設置できないですよね?)

管理ページの[デザイン]->[テンプレート管理]->HTML編集(上級者向け)から利用しているテンプレートを直接編集します。
HtmlEdit.png

張り付けるコードは以下。
重要なポイントは、bodyの閉じタグ(</pre>)の直前にコピペすること。
スクリプトの遅延ロード(要は必要なスクリプトをその時にロードする)を使っているので、HTMLが読み込まれる一番最後に動かすようにする必要があります。
詳しくはここ読んで。
http://alexgorbatchev.com/SyntaxHighlighter/manual/api/autoloader.html








ちょっとカスタマイズしているのは、以下の3点です。
  • 33行目:toolbarをfalse
  • defaultはtrue。通常はコードの右上に?アイコンが表示されます。それをクリックするとSyntaxHighlightのクレジットが表示されます。特に必要がないので、falseにしています。
  • 34行目:auto-linksをfalse
  • defaultはtrue。通常は表示したコード中のhttpで始まる内容はリンクとして表示されます。特にリンクとして表示する必要はないので、falseにしています。
  • 36~42行目:追加のCSS
  • この記事の記載時点の最新版(3.0.83)では、コードの表示時に縦スクロールバーが必ずでるようなので、強制的に出さないCSSを追加。 http://www.turph.jp/blog/archives/171を参考にさせてもらいました。多謝。

オプションの使い方は以下のページを参照。
http://alexgorbatchev.com/SyntaxHighlighter/manual/configuration/

コードを記載するときは、こんな感じで記載すればOKです。
<pre class="brush: php;">
function test(){
 return false;
}
</pre>

brushにコードの種類を指定します。指定できるbrushは以下を参照。
http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/

あとなぜかSo-netブログの記事のプレビュー機能の時はきちんと表示されません。
いったん保存してみるときちんと見えるようになるので、動かないと慌てる前に一度保存してみてください。
それともう一点。XMLを記載するときにXML宣言がうまいこと表示されません。
<?xml version="1.1"?> <-これね。

なんかこんな感じに表示されちゃうんです。
<?<a href="http://match.seesaa.jp/afr.pl?hid=25&sid=tamatamablog:000266401367&k=xml&ic=utf8" class="affiliate-link" target="_blank">xml</a> version="1.1"?>

何が悪いかというと、キーワード広告の表示が悪さをしている模様。とにかくちゃんと表示できないと意味がないので、キーワード広告をオフにして対応しました。
設定方法は、管理ページの[設定]->[広告設定]->[キーワード広告の表示設定]を[オフ]にします。

nice!(1)  コメント(0)  トラックバック(0) 
共通テーマ:パソコン・インターネット

nice! 1

コメント 0

コメントを書く

お名前:
URL:
コメント:
画像認証:
下の画像に表示されている文字を入力してください。

トラックバック 0

トラックバックの受付は締め切りました

この広告は前回の更新から一定期間経過したブログに表示されています。更新すると自動で解除されます。