Programs / 最終更新時間:2011年03月21日 01時06分31秒

概要

HTML中の任意の箇所に、ソースファイルやテキストファイルをJavaScriptで読み込んで、プログラム言語の文法にあわせてハイライト表示できます。

ハイライト表示にはjquery-syntax.jsを使います。jquery-syntax.js単体で、HTMLのpreタグの中に直接ソースコードを記入してハイライト表示することができますが、これから説明するjquery-incodeという小さなスクリプトを併用することで、同じドメイン上にあるローカルファイルを読み込んでHTML中に挿入表示できるようになります。

ソースファイルとHTMLのpreタグ中に書いたソース、二重管理をしたくない場合には、このスクリプトが役立つかもしれません。

サンプル

ハイライト表示のサンプル

使い方

使用するJavaScriptライブラリをインストール

たとえば、

js/jquery.js
js/jquery-syntax/jquery.syntax.min.jsなど(ファイルたくさん)

といった感じで配置します。jquery.jsにはバージョン番号などあると思いますが、このようにリネームするか、読み込む際にそのファイル名で読み込むかどちらかでお願いします。

jquery.incodeのインストール

  • jquery.incode.jsをjsフォルダなどに入れる。
js/jquery.incode.js
ダウンロード
jquery.incode.js
ライセンス
MITライセンス

HTMLファイルから呼び出す

タグの記入例

head内でjquery.js、jquery.syntax.min.js、jquery.incode.jsを読み込んでおきます。

<head>
  <script src="js/jquery.js" type="text/javascript"></script>
  <script src="js/jquery-syntax/jquery.syntax.min.js" type="text/javascript"></script>
  <script src="js/jquery.incode.js" type="text/javascript"></script>
</head>

あとはbody内の好きなところで、<div class="incode">ファイル名</div>といった形で書き込んでおけば、その場所にファイル名の中身をJavaScriptで読み込んで表示します。

<body>
  ...
  <div class="incode">FileName1.xxx</div>
  <div class="incode">FileName2.xxx</div>
</body>

ローカルPC上だと表示されないので、サーバーにアップロードして確認しましょう。あと別のドメインのファイルは表示できません。

ハイライト表示のサンプルのHTMLソースも参考までにどうぞ。