SyntaxHighlighterは、コードをハイライト表示してくれるJavaScriptのライブラリーです。JavaScriptをハイライト表示するとこんな感じ。

$(document).ready(function() {
function path()
{
  var args = arguments,result = [];       
  for(var i = 0; i < args.length; i++)
      result.push(args[i].replace('@', '<$BaseUrl$>/syntaxhighlighter/scripts/'));
  return result
};
 
SyntaxHighlighter.autoloader.apply(null, path(
  'css                    @shBrushCss.js',
  'java                   @shBrushJava.js',
  'js jscript javascript  @shBrushJScript.js',
  'php                    @shBrushPhp.js',
  'text plain             @shBrushPlain.js',
  'sql                    @shBrushSql.js',
  'xml xhtml xslt html    @shBrushXml.js'
));


SyntaxHighlighter.defaults['toolbar'] = false;
SyntaxHighlighter.all();
});
 


ファイルのダウンロード

SyntaxHighlgihterからダウンロードします。

メニューのDonwloadsを選んで 　=>　本文中のClick Here to downloadをクリック

ファイルの解凍

ファイルを入手したら、zipファイルなんで解凍します。解凍したらこんな感じのファイル構成になっているかと・・・。
syntaxhighlighter

使うのは、scripts内にあるJavaScriptファイルとstylesのCSSファイルだけです。




ファイルのアップロード

適当にフォルダー作ったりして、ファイルをアップロードします。ブログの管理画面で画像/ファイル > ファイル管理を選択。

 syntaxhighlighter2


JavaScriptファイルのアップロード
解凍したフォルダーのscriptsにあるファイルを全部アップロードすれば間違いありません。が、面倒な場合は、必須のファイルだけをアップロードします。
  • shCore.js
  • shAutoLoader.js
 上記の二つのファイルは、必須のファイルです。必ずアップロードするようにしてください。で、他のファイルはなんなのかというと言語毎に別れています。たとえば、JavaScriptを表示させたい場合は、scripts内にある「shBrushJScript.js」をアップロードします。Javaなら「shBrushJavajs」。htmlやxmlなら、「shBrushXml.js」です。同じフォルダー内にアップロードするようにしたほうがいいのかも。


CSSファイルのアップロード
CSSファイルは、解凍したフォルダーのStylesにあります。ここもいっぱいファイルがあるんですけど、必須なのは、下記の２ファイルです。
  • shCore.css
  • shThemeDefault.css
他のファイルは何なのかと言うと、きっと表示のスタイルを変えたい場合に使用するのかと。試してないけど、察するに、2ファイルの組み合わせでできてるみたいなので、shCore.cssとshThemeDefault.cssの変わりに

  • shCoreEclipse.css
  • shThemeEclipse.css
なんて組み合わせでファイルをロードしてあげれば、違ったスタイルになるんじゃないのかと思います。たぶん。


 

アップロードしたファイルをブログに組み込む

ブログ設定→デザイン / ブログパーツ設定　PC　→　カスタマイズ　→トップページ
syntaxhighlighter3 

HTMLのhead内でアップロードしたJavaScriptとCSSファイルを読み込んで、スクリプトを呼び出してます。
<!-- Syntax Highlighterのファイルを読み込む -->
<link href="<$BaseUrl$>/syntaxhighlighter/css/shCore.css" rel="stylesheet" type="text/css" />
<link href="<$BaseUrl$>/syntaxhighlighter/css/shThemeBlog.css" rel="stylesheet" type="text/css" />
<script src="<$BaseUrl$>/syntaxhighlighter/scripts/shCore.js" type="text/javascript"></script>
<script src="<$BaseUrl$>/syntaxhighlighter/scripts/shAutoloader.js" type="text/javascript"></script>

<!-- Syntax Highlighterのそれぞれの言語ファイルを呼び出すスクリプト -->
<script type="text/javascript">
$(document).ready(function() {
function path()
{
  var args = arguments,result = [];
       
  for(var i = 0; i < args.length; i++)
      result.push(args[i].replace('@', '<$BaseUrl$>/syntaxhighlighter/scripts/'));
  return result
}; 
SyntaxHighlighter.autoloader.apply(null, path(
  'css                    @shBrushCss.js',
  'java                   @shBrushJava.js',
  'js jscript javascript  @shBrushJScript.js',
  'php                    @shBrushPhp.js',
  'text plain             @shBrushPlain.js',
  'sql                    @shBrushSql.js',
  'xml xhtml xslt html    @shBrushXml.js'
));
SyntaxHighlighter.defaults['toolbar'] = false;
SyntaxHighlighter.all();
});


</script>

</head>

ファイルの読み込み
<!-- Syntax Highlighterのファイルを読み込む -->
<link href="<$BaseUrl$>/syntaxhighlighter/css/shCore.css" rel="stylesheet" type="text/css" />
<link href="<$BaseUrl$>/syntaxhighlighter/css/shThemeBlog.css" rel="stylesheet" type="text/css" />
<script src="<$BaseUrl$>/syntaxhighlighter/scripts/shCore.js" type="text/javascript"></script>
<script src="<$BaseUrl$>/syntaxhighlighter/scripts/shAutoloader.js" type="text/javascript"></script>
このブログでは、syntaxhighlighter/scriptsにJavaScriptのファイルを。syntaxhighlighter/css/にCSSのファイルをアップロードしてます。LiveDoorブログを触ったこと無いのでアレなんですけど、<$BaseUrl$>は、自身のブログのURLに変えてくれる魔法のフレーズなのかと。

 
 
言語ファイルの読み込み
<script type="text/javascript">
$(document).ready(function() {
function path()
{
  var args = arguments,result = [];
       
  for(var i = 0; i < args.length; i++)
      result.push(args[i].replace('@', '<$BaseUrl$>/syntaxhighlighter/scripts/'));
  return result
};
 
SyntaxHighlighter.autoloader.apply(null, path(
  'css                    @shBrushCss.js',
  'java                   @shBrushJava.js',
  'js jscript javascript  @shBrushJScript.js',
  'php                    @shBrushPhp.js',
  'text plain             @shBrushPlain.js',
  'sql                    @shBrushSql.js',
  'xml xhtml xslt html    @shBrushXml.js'
));
SyntaxHighlighter.defaults['toolbar'] = false;
SyntaxHighlighter.all();
});


</script>

注意することは2点！
  •  $(document).ready()内で呼び出す！
  • ロードしたい言語ファイルを指定してやる！


$(document).ready()内で呼び出す！
.ready()はjQueryのメソッドなんですけど、DOMの準備が整ってからsyntaxhighlighterを呼び出すようにしないといけないみたいです。で、jQueryなんですけど、ライブドアのデフォルトのデザインだとこの一文で読み込まれているので、この一文の後に$(document).ready()のコードを書く必要があります。
<script src="https://parts.blog.livedoor.jp/js/usr/import.js"></script>

 ロードしたい言語ファイルを指定してやる！ 
このブログでは、使うであろう言語しか読み込んでないので、他の言語を読み込みたい場合は、本家サイトのこの辺を参考にすればいいのかと・・・。




トップページだけを編集したんですけど、他の「個別記事ページ」「カテゴリーアーカイブ」「月別アーカイブ」でも同じ記述をする必要があります！！！



SyntaxHighlighterの使い方

<pre class="brush: html">
 <!--ここに表示したいコードを記述 -->
</pre>

 <pre>タグでくくってやって、クラス名は、brush: 言語名です。javascriptを表示させたい場合は、brush: jsとしてやればいいのかと。
<pre class="brush: js">
 //Something JavaScript Here!
</pre>

定型文を登録しとく

Livedoorブログには、定型文の登録ができるみたいです。しかも、HTMLも使えるっぽいので予め定型文登録しとけば、いちいち<pre class="brush :js"></pre>の文を書く必要もないのかと・・・・。
タグ ：
#syntaxhighlighter
#javascript
#livedoor