WP/SyntaxHighlighter

目次 †

内容 †

概要 †

• Webページに埋め込んだ各種ソースコードをハイライトするJavaScriptとCSS
• 公式サイトは次の通り
  • SyntaxHighlighter

使い方 †

ダウンロード＆インストール †

• 公式サイトのダウンロードページから最新版を取得
  • SyntaxHighlighter - Download
• ZIPファイルを解凍して「styles」「scripts」ディレクトリだけ取り出す。
• 上記ディレクトリをWebサーバの適当な場所に配置しておく

利用方法 †

• 使用するページの上部にてJSファイルとCSSを読み込ませる

  <script src='http://www.ebisawa.co.jp/syntaxhighlighter/scripts/shCore.js' type='text/javascript'></script>
  <!-- 利用する言語に合わせたスタイル用JSを読み込む -->
  <script src='http://www.ebisawa.co.jp/syntaxhighlighter/scripts/shBrushJScript.js' type='text/javascript'></script>
  <script src='http://www.ebisawa.co.jp/syntaxhighlighter/scripts/shBrushPerl.js' type='text/javascript'></script>
  <script src='http://www.ebisawa.co.jp/syntaxhighlighter/scripts/shBrushPhp.js' type='text/javascript'></script>
  <link href='http://www.ebisawa.co.jp/syntaxhighlighter/styles/shCore.css' rel='stylesheet' type='text/css'/>
  <link href='http://www.ebisawa.co.jp/syntaxhighlighter/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>

• ページ下部に次の関数をセットする

  <script type="text/javascript">
      SyntaxHighlighter.all()
  </script>

• <pre>タグを使ってソースを記述する

  <!-- JavaScriptの場合 -->
  <pre class="brush: js">
  function foo(){
      alert( "test" );
  }
  </pre>
  <!-- Perlの場合 -->
  <pre class="brush: perl">
  print "bb";
  </pre>

  • 残念ながらPukiwikiではHTMLを埋めることはできないので、ハイライトできない。次のサンプルページを参照
    • 海老澤澄夫の個人ブログ: Amazonのランキングチェックツール