目次 †
内容 †
概要 †
- 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>
- 残念ながらPukiwikiではHTMLを埋めることはできないので、ハイライトできない。次のサンプルページを参照
|