« iTunesのカバーフロー風写真ギャラリー | Main | 携帯エミュレータの決定版「P1 Emulator」 »

ソースコードを自動的に色分けして掲載"Highlight.js"

　ウエブページに掲載したプログラミングのソースコードのコマンドなどを自動的に色分けして見やすくしてくれるJavaScriptです。
　インストールすると、こんな感じになります。とても見やすいですね。
highlight.gif

  1. 使い方
    1. こちらから圧縮ファイルをダウンロードして解凍します
    2. highlight.js、sample.css、languagesフォルダーをサーバーにアップロードします
    3. プログラム言語を表示するページのヘッダーでcssファイル、JavaScriptにリンクし、さらに表示させたい言語を入れたイニシャライズ文を入れます 
      <link rel="stylesheet" href="sample.css" />
  <script type="text/javascript" src="highlight.js"></script>
  <script type="text/javascript">
    initHighlightingOnLoad('1c', 'axapta', 'cpp', 'delphi', 'xml', 'html', 'css', 'django', 'java', 'javascript', 'perl', 'php', 'python', 'rib', 'rsl', 'ruby', 'smalltalk', 'sql', 'vbscript');
  </script>
    4. プログラム言語のソースコードを
      <pre><code>〜</code></pre>
      で挟みます。
  2. デモ
  3. オリジナルページ

タグ:

2008年3月17日 | カテゴリー : Javascript | コメント [0] | トラックバック [0] | Main| ↑ページトップ| このエントリーを含むはてなブックマーク

« iTunesのカバーフロー風写真ギャラリー | Main | 携帯エミュレータの決定版「P1 Emulator」 »

トラックバックURL

このエントリーへのリンク:

このエントリーのトラックバックURL:

コメントする