SSブログ
Web ブログトップ

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"?>

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

2014-08-12 18:01  nice!(1)  コメント(0)  トラックバック(0) 
共通テーマ：パソコン・インターネット

W3C Web統合検証ツール　[Web]

W3C 統合検証ツール「unicorn」をローカル環境で動かすためのインストールメモ

環境は、以下のとおり。とりあえずWindows7でも動きました。
OS：Windows 7 Pro 32bit
Java：jdk1.6.0_20
Ant：apache-ant-1.8.1
Tomcat：apache-tomcat-6.0.29
unicornは、JavaのWebアプリなので、WindowsでもLinuxでも動くと思います。
まずは、ソースコードをとってきます。unicornのソースは、Mercurialのリポジトリなので、ここから、MercurialのWindowsバイナリをとってきて、インストールします。
インストールできたら、適当なフォルダでソースを取得。
hg clone https://dvcs.w3.org/hg/unicorn
実行すると、カレントディレクトリにunicornフォルダが作成され、ソースコードが取得できます。
unicorn\readmeにインストールと実行方法が書かれているので、これを参考にします。
はじめはAntを使って、「Ant war」してたのですが、いちいちjarファイルが無いとかなんとか怒られます。
よくよくbuild.xmlの中身を見てみると、ivy(依存関係管理ツール)とやらを利用して、「Apache Maven」リポジトリから必要なライブラリをとってきてくれるタスクがあるらしい。
というわけで、ここからivyのjarファイルを取得して、%ANT_HOME%\libの下におきます。これで、Antからivyを利用することができるようになります。

さらにunicornのサイトを見ていると、とりあえず使いたかったら、以下のコマンドを叩けとあります。
ant retrieve generate_observer generate_tasklist default_conf war
こいつを叩いてやると意外とすんなり、unicorn\distフォルダにunicorn.warファイルが作られました。
(ivyなしで、antでちまちまやってると、いろいろ面倒なので、ivyを使うことをお勧めします。)

あとは、Tomcatのwebappsフォルダにunicorn.warを置いてやるだけでいいのですが、その前にTomcatを起動するJVMのオプションに-Dunicorn.homeの値を設定してやる必要があります。
unicorn.homeは、Tomatにデプロイしたunicornのホームディレクトリです。(具体的には、-Dunicorn.home=(Tomcatインストールフォルダ)\webapps\unicorn)

TomcatのJVMにオプションを渡すには、いろいろ方法はありますが、Tomcatを手動で起動しているなら、起動するコマンドプロンプトで、set CATALINA_OPTS=-Dunicorn.home=(Tomcatインストールフォルダ)\webapps\unicornしておくか、Javaのコントロールパネルで、JVMのランタイムパラメータに追加してしまうか、もしくはcatalina.batに直接記述するなどして、適当に渡してください。
unicorn.homeはlog4jなどで使われていて、ログの出力先を指定するために使用しています。

以上で準備完了です。
unicorn.warをTomcatのwebappsフォルダに置いた状態でTomcatを起動すれば、自動的にwarが展開されて自分のTomactのURLにアクセスすると、Unicorn - W3C 統合検証サービスをローカル環境で利用できるようになります。
http://localhost:8080/unicorn



タグ：Windows Java W3C 検証ツール
2010-09-18 21:06  nice!(0)  コメント(0)  トラックバック(0) 
共通テーマ：パソコン・インターネット
Web ブログトップ

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