Syntax Highlighterがうまく適用されない

###Syntax Highlighterがうまく適用されない
最近技術的なメモ等を行う為にブログを開設しました。
コードを見やすく表示するために、Syntax Highlighterを導入したいと思い、導入を試みているのですが、現状うまく動いてくれず、困っております。

###使用環境
livedoor Blog

アップロードファイル

/shAutoloader.js
/shBrushCpp.js
/shBrushCss.js
/shBrushJScript.js
/shBrushJava.js
/shBrushPython.js
/shBrushXml.js
/shCore.css
/shCore.js
/shCoreDjango.css
/shThemeDefault.css

###ソースコード
個別記事ページ(ブログ設定→カスタマイズ)のテンプレートは下記となります。

html
1<!DOCTYPE html>
2<html lang="ja" itemscope itemtype="http://schema.org/Blog">
3<head>
4<meta http-equiv="X-UA-Compatible" content="IE=edge" />
5<$HeadSectionCommon$>
6<meta name="description" content="<$ArticleDescription ESCAPE$>" />
7<$OGP$>
8<link rel="alternate" media="handheld" type="application/xhtml+xml" href="<$BlogMobileUrl$>" />
9<IfFoafUrl><link rel="meta" type="application/rdf+xml" title="FOAF" href="<$FoafUrl$>" /></IfFoafUrl>
10<title><$ArticleTitle ESCAPE$> : <$BlogTitle ESCAPE$></title>
11<script src="<$EmojiJsUrl$>"></script>
12<script src="<$MiscJsUrl$>"></script>
13<!--[if lt IE 9]>
14<script src="<$PartsBaseUrl$>/js/html5.js"></script>
15<![endif]-->
16<script src="<$PartsBaseUrl$>/js/usr/import.js"></script>
17
18
19
20<!-- 追加1 ここから -------------------->
21<!-- Syntax Highlighter -->
22<link href="/shCore.css" rel="stylesheet" type="text/css" />
23<link href="/shCoreDjango.css" rel="stylesheet" type="text/css" />
24
25<script src="/shCore.js" type="text/javascript"></script>
26
27<script src="/shBrushCpp.js" type="text/javascript"></script>
28
29<!-- <script src="/shAutoloader.js" type="text/javascript"></script> -->
30<!-- 追加1 ここまで -------------------->
31
32
33
34
35</head>
36<body class="default_2012 page-article layout-2col">
37
38<!--------- 中略 ---------------->
39
40<!-- ブログのフッター -->
41<footer id="blog-footer">
42<$BlogFooter$>
43</footer>
44<!-- /ブログのフッター -->
45
46<!-- /#wrapper --></div>
47
48<!-- 追加2 ここから -------------------->
49<!-- Syntax Highlighter autoloader -->
50<!--
51<script>
52	SyntaxHighlighter.autoloader(
53	  'cpp c						shBrushCpp.js',
54	  'css							shBrushCss.js',
55	  'js jscript javascript		shBrushJScript.js',
56	  'java							shBrushJava.js',
57	  'py pyo						shBrushPython.js',
58	  'xml xhtml xslt html			shBrushXml.js'
59	);
60	SyntaxHighlighter.all();
61</script>
62-->
63<!-- 追加2 ここまで -------------------->
64</body>
65</html>

ブログ記事の内容は下記となります。
(HTMLタグ編集で入力)

html
1syntax highlighter test<br /><br /><br />
2
3<pre  title="Hello World hightlight test" class="brush:cpp">#include &lt;stdio.h&gt;
4int main(void)
5{
6&nbsp; &nbsp; printf("hello world!!¥n");
7
8&nbsp; &nbsp; return 0;
9}
10</pre>

何か分かることがございましたら、お教えい頂きたく、宜しくお願い致します。
また不足情報等ございましたら、大変お手数ではございますが、ご指摘頂きたく、宜しくお願い致します。

追記 2015.11.08

hatena19様のご回答を受け、個別記事ページのテンプレートソースを修正致しました。
ご提示頂いたサイトの記述に合わせ、改めて追加箇所を修正してみました。
スタイルを一旦「shCore.css」「shThemeDefault.css」の構成に変更致しました。

html
1<!DOCTYPE html>
2～中略～
3<script src="<$PartsBaseUrl$>/js/usr/import.js"></script>
4
5
6<!-- 追加 ここから -->
7<!-- Syntax Highlighter -->
8<!-- Syntax Highlighterのファイルを読み込む -->
9<!--<link href="<$BaseUrl$>/shCoreDjango.css" rel="stylesheet" type="text/css" />-->
10<link href="<$BaseUrl$>/shCore.css" rel="stylesheet" type="text/css" />
11<link href="<$BaseUrl$>/shThemeDefault.css" rel="stylesheet" type="text/css" />
12<script src="<$BaseUrl$>/shCore.js" type="text/javascript"></script>
13<script src="<$BaseUrl$>/shAutoloader.js" type="text/javascript"></script>
14
15<!-- 言語ファイルの読み込み -->
16<script type="text/javascript">
17$(document).ready(function() {
18function path()
19{
20  var args = arguments,result = [];
21        
22  for(var i = 0; i < args.length; i++)
23      result.push(args[i].replace('@', '<$BaseUrl$>/'));
24  return result
25};
26  
27SyntaxHighlighter.autoloader.apply(null, path(
28  'cpp c                  @shBrushCss.js',
29  'css                    @shBrushCss.js',
30  'java                   @shBrushJava.js',
31  'js jscript javascript  @shBrushJScript.js',
32  'xml xhtml xslt html    @shBrushXml.js'
33));
34SyntaxHighlighter.defaults['toolbar'] = false;
35SyntaxHighlighter.all();
36});
37</script>
38<!-- 追加 ここまで -->
39
40</head>

行動規範の内容に同意します

回答2件

コメントではマークダウンは有効でないようなので、こちらに再投稿しました。

javascript
1SyntaxHighlighter.autoloader.apply(null, path(
2  'cpp c                  @shBrushCss.js',
3  'css                    @shBrushCss.js',
4  'java                   @shBrushJava.js',
5  'js jscript javascript  @shBrushJScript.js',
6  'xml xhtml xslt html    @shBrushXml.js'
7));

上記の２行目を 'cpp c @shBrushCpp.js', に変更してください。

あと、shBrushCpp.js ファイルがアップロードされているかも確認ください。

投稿2015/11/08 06:09

hatena19

総合スコア33699

lis

2015/11/08 06:33

わざわざありがとうございます。本修正で無事、Syntax highligterによる表示ができました！今回のエラーは、参考サイトからコピペ→編集した際に、cppがなかったのでcssからコピペした際にやらかした凡ミスでした… 単純ミスに気付けず、お手数おかけして申し訳ありませんでした…

行動規範の内容に同意します

ベストアンサー

下記が詳しく解説してあるので参考になると思います。

SyntaxHighlighterをLivedoorの無料ブログで使えるようにする : ノンプログラマー・プログラミング・ガイド

上記の解説に補足すると、
必用なスタイルシートファイルは、shCoreテーマ名.css だけです。

Djangoテーマを使用したい場合は、shCoreDjango.css だけでOKです。

shCoreDjango.css は、shCore.css と shThemeDjango.css を一つにまとめたものです。

スクリプトファイルは、shCore.js と shAutoloader.js は必須。
あとシンタックス表示したい言語の、shBrush言語名.js をアップロードします。

投稿2015/11/07 19:39

hatena19

総合スコア33699

lis

2015/11/08 05:37

hatena19様、ご回答ありがとうございます。改めて上記サイトをベースに修正した版を、質問下部に追記致しました。こちらのソースで実行してみたところ、「Can't find brush for: cpp」というエラーダイアログが表示されるようになりました。前の状況と比べ、少なくともbrushファイルを見に行こうとしているように見受けられる為、進展しているような気はするのですが、こちらのエラーが現在解決できず、困っております。ファイルは「/shBrushCss.js」に格納しており、Chromeの開発者ツールで追いかけた感じですと、ready()に記述されているAutoLoaderの処理でresultに「"cpp c http://～.jp/shBrushCss.js"」のようにセットされていくようなので、正しいのではないかと思っているのですが… 何かわかることがございましたら、お教え頂きたく、宜しくお願い致します。

hatena19

2015/11/08 06:05

```javascript SyntaxHighlighter.autoloader.apply(null, path( 'cpp c @shBrushCss.js', 'css @shBrushCss.js', 'java @shBrushJava.js', 'js jscript javascript @shBrushJScript.js', 'xml xhtml xslt html @shBrushXml.js' )); ``` 上記の２行目を ` 'cpp c @shBrushCpp.js',` に変更してください。あと、shBrushCpp.js ファイルがアップロードされているかも確認ください。

行動規範の内容に同意します

あなたの回答