###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 <stdio.h> 4int main(void) 5{ 6 printf("hello world!!¥n"); 7 8 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件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2015/11/08 06:33