ソースコードを綺麗に表示することが出来る「SyntaxHighlighter」導入について　Part2

前回に必要なファイルなどをアップしました、そのあとの設定についてご紹介します。（Part1はこちら）

SyntaxHighlighterの使い方（準備）

まずはじめに「SyntaxHighlighter」を構成するファイルを、HTMLから読み込むための記述をします。

HTMLのhead内に、最低限こちらの4つを記述します。

1. コアスクリプト（shCore.js）を読み込む記述
2. 表示したい言語に応じたスクリプト（shBrushXml.js等）を読み込む記述 （読み込みたいものを書く）
3. 表示に使いたい配色（テーマ）のCSS（shCoreDefault.css”等）を読み込む記述（デフォルトの配色（テーマ））
4. スクリプトを開始する記述　（SyntaxHighlighter.all();）

「HTMLソース」と「JavaScriptソース」を、「デフォルトの配色（テーマ）」で表示させたい場合は、以下のように記述します。ファイルパスは、アップロードした先に合わせて変えてください。

※下記はワードプレスの場合。

	
<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/syntax/scripts/shCore.js"></script><!-- 必須 -->
<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/syntax/scripts/shBrushXml.js"></script><!-- HTMLやXMLを使う場合 -->
<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/syntax/scripts/shBrushCss.js"></script><!-- CSSを使う場合 -->
<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/syntax/scripts/shBrushJScript.js"></script><!-- JavaScriptを使う場合 -->
<link type="text/css" rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/syntax/styles/shCoreDefault.css"><!-- デフォルトの配色を使う場合（何らかのCSSは必要） -->
<script type="text/javascript">SyntaxHighlighter.all();</script><!-- 必須 -->

必要に応じて、読み込むJavaScriptを増やして下さい。どのようなJavaScriptファイルを読み込めばよいかは、「scripts」フォルダの中を見れば分かると思います。各スクリプトのファイル名に、対応する言語名（shBrushXml.js等）が含まれています。
HTMLに対応するスクリプトは、XML用スクリプト「shBrushXml.js」になります。また、JavaScriptに対応するスクリプト名は「shBrushJScript.js」です。CSSは「shBrushCss.js」です。

SyntaxHighlighterを使ってソース表示してみる

表示のさせ方は、下記のようにpreタグを使いソースを記述すればOKです。その際にpre要素のclass属性に、各種設定を記述することで、さまざまな形式で表示できます。
<pre class=”brush: (言語名);”>
ここにソースを書く
</pre>
class属性には、「brush: (言語名);」　という形で言語名（ブラシ名）を記述します。HTML、CSS、JavaScriptの場合の例です。

○HTMLソースの場合

<div class="Box">
<p><span >サンプル</span>テスト</p>
<p><span class="tit">氏名</span>　田中　太郎　　男性</p>
</div>

○CSSソースの場合

html,body {
margin: 0;
padding: 0;
}

p{

font-size:12px;
line-height:1.2;
}

○JavaScriptソースの場合

$(function() {

$("[type=button]").on("click", function() {

$.get("sample.php", { 　//phpファイルの読み込み
id : $("[type=text]").val()
}, function(data) {
$("span").text(data);
});

});

});

これらでSyntaxHighlighter（シンタックスハイライト）を最低限利用することができます。

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
ソースコードを綺麗に表示することが出来る「SyntaxHighlighter」導入について　Part1
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝