IT

ソースコードを綺麗に表示することが出来る「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
==================================

お問い合わせフォーム

気になる方はコチラからお問い合わせ!
必須お名前
必須メールアドレス
必須郵便番号
必須ご住所
必須電話番号
ご相談内容
必須メッセージ本文

コメントを残す

*