ブログ内でコードの表示を綺麗に表示してくれる「syntaxhighlighter」

覚書を記録する中でコードの表示は必須!
という事でコードの表示を綺麗にしてくるプラグインを導入しようと考えまして…
【syntaxhighlighter】を使用する事にしたのですが、まぁ〜、ハマってしまったので記録として

下準備から


まずは、SyntaxHighlighter本家サイトからダウンロード
バージョンはSyntaxHighlighter3.0.83

Google先生で検索した結果下記サイトを参考に導入
http://honttoni.blog74.fc2.com/blog-entry-172.html

ところが… あれ?表示されない…

他のJQueryと競合して表示されないのかと思ったらERRORは出ていない
うわぁーーーハマった…

またまたGoogle先生の出番!
検索していくうちにある事に気付いた。
皆さん、きちんとコードを記載してる!
と言うのも、私の場合は参考サイトのように
<head> <script src="../scripts/shCore.js"></script> <script src="../scripts/shAutoloader.js"></script> <link rel="stylesheet" href="../styles/shCoreDefault.css"> </head> <script> SyntaxHighlighter.autoloader ( "applescript ../scripts/shBrushAppleScript.js", "actionscript3 as3 ../scripts/shBrushAS3.js", "bash shell ../scripts/shBrushBash.js", "coldfusion cf ../scripts/shBrushColdFusion.js", "cpp c ../scripts/shBrushCpp.js", "c# c-sharp csharp ../scripts/shBrushCSharp.js", "css ../scripts/shBrushCss.js", "delphi pascal ../scripts/shBrushDelphi.js", "diff patch pas ../scripts/shBrushDiff.js", "erl erlang ../scripts/shBrushErlang.js", "groovy ../scripts/shBrushGroovy.js", "java ../scripts/shBrushJava.js", "jfx javafx ../scripts/shBrushJavaFX.js", "js jscript javascript ../scripts/shBrushJScript.js", "perl pl ../scripts/shBrushPerl.js", "php ../scripts/shBrushPhp.js", "text plain ../scripts/shBrushPlain.js", "py python ../scripts/shBrushPython.js", "ruby rails ror rb ../scripts/shBrushRuby.js", "sass scss ../scripts/shBrushSass.js", "scala ../scripts/shBrushScala.js", "sql ../scripts/shBrushSql.js", "vb vbnet ../scripts/shBrushVb.js", "xml xhtml xslt html h../scripts/shBrushXml.js" ); SyntaxHighlighter.config.bloggerMode = true; SyntaxHighlighter.defaults['auto-links'] = false; SyntaxHighlighter.all(); </script> <script type="text/javascript"> (function(w,d,s){ var f=d.getElementsByTagName(s)[0],j=d.createElement(s); j.async=true;j.src='//dmp.im-apps.net/js/7262/0001/itm.js'; f.parentNode.insertBefore(j, f); })(window,document,'script'); </script> <script type="text/javascript" src="http://t.seesaa.net/analytics-seesaa-net.js?v=20150901&tid=UA-53911882-1&page_id=embellir-design%2Farticle%2F445389126&page_info=::41::92&page_words="></script></body>
と記載していた。

でも、コードの表示がされなかったので色々な方法で記載を変えてみた。

結果表示されたのは下記コード
<head> <script src="サイトURL絶対パス../shCore.js"></script> <script src="サイトURL絶対パス../shAutoloader.js"></script> <script src="サイトURL絶対パス../shBrushSql.js"></script> <script src="サイトURL絶対パス../shBrushJava.js"></script> <script src="サイトURL絶対パス../shBrushJScript.js"></script> <script src="サイトURL絶対パス../shBrushPerl.js"></script> <script src="サイトURL絶対パス../shBrushCss.js"></script> <script src="サイトURL絶対パス../shBrushXml.js"></script> <link rel="stylesheet" href="サイトURL絶対パス../shCoreDefault.css"> </head> <script type="text/javascript"> SyntaxHighlighter.config.bloggerMode = true; SyntaxHighlighter.defaults['auto-links'] = false; SyntaxHighlighter.all(); </script> </body> 自動改行して欲しいから「改行を<br/>タグに変換する」に設定する為に<pre>タグを<syntaxhlg>に変換。
URL補完は「補完しない」に設定


短縮コードでスッキリしたかったのに、ずらずらとコードを並べないといけないのは何というか…
でも、仕方ない(´・ω・`)

*注意点*
参考サイトでもおっしゃられている通り
【の直前(body 要素の1番最後)に書くのがミソ】

でないと、ハマりますよww

それではまた〜(^_^)/~

この記事へのコメント


この記事へのトラックバック