前回に必要なファイルなどをアップしました、そのあとの設定についてご紹介します。（Part1はこちら）
SyntaxHighlighterの使い方（準備）
まずはじめに「SyntaxHighlighter」を構成するファイルを、HTMLから読み込むための記述をします。
HTMLのhead内に、最低限こちらの4つを記述します。
- コアスクリプト（shCore.js）を読み込む記述
- 表示したい言語に応じたスクリプト（shBrushXml.js等）を読み込む記述 （読み込みたいものを書く）
- 表示に使いたい配色（テーマ）のCSS（shCoreDefault.css”等）を読み込む記述（デフォルトの配色（テーマ））
- スクリプトを開始する記述 （SyntaxHighlighter.all();）
「HTMLソース」と「JavaScriptソース」を、「デフォルトの配色（テーマ）」で表示させたい場合は、以下のように記述します。ファイルパスは、アップロードした先に合わせて変えてください。
※下記はワードプレスの場合。
1 2 3 4 5 6 7 | <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ソースの場合
1 2 3 4 | <div class="Box"><p><span >サンプル</span>テスト</p><p><span class="tit">氏名</span> 田中 太郎 男性</p></div> |
○CSSソースの場合
1 2 3 4 5 6 7 8 9 10 | html,body {margin: 0;padding: 0;}p{font-size:12px;line-height:1.2;} |
○JavaScriptソースの場合
1 2 3 4 5 6 7 8 9 10 11 12 13 | $(function() {$("[type=button]").on("click", function() {$.get("sample.php", { //phpファイルの読み込みid : $("[type=text]").val()}, function(data) {$("span").text(data);});});}); |
これらでSyntaxHighlighter（シンタックスハイライト）を最低限利用することができます。
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
ソースコードを綺麗に表示することが出来る「SyntaxHighlighter」導入について Part1
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
コメント