Syntax Highlighter2.1.364（最新版）を簡単に導入する方法

2013年4月10日水曜日

Syntax Highlighter2.1.364（最新版）を簡単に導入する方法

これまでBloggerブログにて、

Syntax Highlighterの導入に苦労されている方は、

多かったのではないでしょうか？

beautifulofcodeの導入も同様に苦労されている方は、

多かったと思います。

私自身も、その一人でした。

ですが、
上記してあるように
Syntaxhighlight簡単に導入する方法を以下に記載します。

これまで、
使用したかったのにできなかった方、
これから導入しようと考えている方など、
参考にして頂けると嬉しいです。

＊利用方法に関してですが、
　これまで、Bloggerブログなどに多く記載されていた
　利用方法とは若干異なりますので注意して下さい。

以下ソースを
<head>～</head>内に記載するだけでOKです。

<!-- Syntax Highlighter -->
<link href='http://alexgorbatchev.com/pub/sh/2.1.364/styles/shCore.css' rel='stylesheet' type='text/css'/> 
<link href='http://alexgorbatchev.com/pub/sh/2.1.364/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shCore.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushCpp.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushCSharp.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushCss.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushJava.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushJScript.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPhp.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPython.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushRuby.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushSql.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushVb.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushXml.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPerl.js' type='text/javascript'/> 
<script language='javascript'> 
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/2.1.364/scripts/clipboard.swf';
SyntaxHighlighter.all();
</script>

3行目のThemeCSSですが、
以下よりいくつか選べます。
→SyntaxHighlighter - Themes

そして、
コードの貼り方ですが、
上記の通りこれまでの貼り方（利用方法）とは若干異なります。

以前まで良くBloggerブログなど多くの他社ブログなどで記載されていた
利用方法の以下とは異なりますので、注意です。

【これまでの利用方法１】


<pre class="code">
<code class="html">
//classにはコードの種類
//boc-collapseを追加すると、閉じた状態にしておけます。
ここにコードを記述する
</code>
</pre>

【これまでの利用方法２】

<pre name="code" class="java">
『ここにコード記述』
< /pre>

【これからの利用方法】

<pre class="brush: script-type">
script-typeにjsとかjavaと指定して、ここにソースコードをHTMLエスケープして貼り付ける
</pre>

となります。

Google Codeに予めホストされたものを利用していますが、
元ファイルは『こちら』にあります。

実際に利用する場合は、
HTMLタグをそのまま入力して表示することができないので、
変換ツールを利用すると便利です。

こちら→HTMLタグ変換ツール

クリボウさんにて作成もされていました。
→コードをハイライトする「Blogger Syntax Highlighter」ウィジェット
　　（サイトの一番下部に変換ツールがあります。）