Ajax Webアプリケーション奮闘記 〜関西温泉マップ〜

Ajax Webアプリケーション作成にあたり、技術的メモや奮闘内容、未解決問題等を掲載していきます。 もちろん、関西温泉マップはβ版なので無料でご利用いただけます。


私おすすめのレンタルサーバー | ここが便利！レノボWeb広告限定ストア

FC2ブログでgoogle-code-prettifyを使ってJavaコードをハイライトしてみました。

昨日より、テンプレートを変更しておりますが、
理由はソースコードを大きく表示させたいためです。

それに伴い、ソースコードをエディタのようにハイライト表示をさせるため、google-code-prettifyを導入してみました。導入にあたり、JSファイルやCSSファイルをアップロードできる事実を知りFC2ブログにびっくり！
以下に導入手順を記載します。

下記サイトより、prettify_31_Aug_2007.zipをダウンロード。
・google-code-prettify - Google Code

解凍すると下記２ファイルが展開されるので、FC2ブログの「ファイルアップロード」からいずれもアップロードを行います。このアップローダには、絶対画像のみという制限がついていると思ってましたが、JSファイルやCSSのみならずMP3ファイル、xmlファイル等もアップロードできるみたいですね。
・prettify.css
・prettify.js

で、アップロードが完了するとテンプレートを修正します。
まずは、アップロードした上記2ファイルを読み込ませる為、以下のHTMLタグを追加します。
<script src="（アップロード場所）/prettify.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="（アップロード場所）/prettify.css" />


※上記「アップロード場所」は、ファイルをアップロードしたページで「記事を書く」ボタンを押下すると表示されます。

次に下記関数をページ読み込み時にロードできるように追加します。
<body onLoad="prettyPrint();">

あとは、記事を追加するときに、下記タグでソースコードを囲めば・・・
<pre class="prettyprint">〜</pre>

ご覧の通りになります。
import java.io.*;
class test1{
    public static void main(String args[]){
        System.out.println("Hello World!");
    }
}


今まで、livedoor、ameba、jugemといろいろブログサービスを利用してみましたが、こんなにカスタマイズ性に優れているFC2は最強だと思いました。

コメント

コメントの投稿


管理者にだけ表示を許可する

トラックバック

トラックバックURLはこちら
http://ajaxapp.blog79.fc2.com/tb.php/91-ea951c72
この記事にトラックバックする(FC2ブログユーザー)

無料ホームページ アフィリエイト レンタルサーバー FC2ブログ 一戸建て