目次

内容

概要

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

使い方

ダウンロード&インストール

  • 公式サイトのダウンロードページから最新版を取得
  • 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>

トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2016-09-25 (日) 19:27:03 (444d)