<!-- Include required JS files -->
<script type="text/javascript" src="js/shCore.js"></script>
<!--
At least one brush, here we choose JS. You need to include a brush for every
language you want to highlight
-->
<script type="text/javascript" src="css/shBrushJScript.js"></script>
<!-- Include *at least* the core style and default theme -->
<link href="css/shCore.css" rel="stylesheet" type="text/css" />
<link href="css/shThemeDefault.css" rel="stylesheet" type="text/css" />
<!-- Finally, to actually run the highlighter, you need to include this JS on your page -->
<script type="text/javascript">
SyntaxHighlighter.all()
</script>
<pre class="brush: js">
/**
* SyntaxHighlighter
*/
function foo()
{
if (counter <= 10)
return;
// it works!
}
</pre>
<script type="syntaxhighlighter" class="brush: js"><![CDATA[
/**
* SyntaxHighlighter
*/
function foo()
{
if (counter <= 10)
return;
// it works!
}
]]></script>
- コアとなるJavaScriptファイルを読み込む
<script type="text/javascript" src="js/shCore.js"></script> - ハイライトしたい言語に応じたJavaScriptファイルを読み込む。この例はJavaScriptの場合となる。
<script type="text/javascript" src="css/shBrushJScript.js"></script> - コアとなるcssファイルとデフォルトテーマのcssを読み込む
<link href="css/shCore.css" rel="stylesheet" type="text/css" />
<link href="css/shThemeDefault.css" rel="stylesheet" type="text/css" /> - 以下のコードをWebページに記述して、ここまでに読み込みをしたファイルに書かれているSyntaxHighlighterを実行する
<script type="text/javascript">
SyntaxHighlighter.all()
</script>
- 投稿する文章の中でハイライトするコードの部分を<pre class="brush: js"></pre>または<script type="syntaxhighlighter" class="brush: js"><![CDATA[]]></script>で囲む(例はハイライトしたい言語がJavaScriptの場合)
ただし！！
これは自宅サーバーやファイルのアップロードが可能なレンタルサーバーなどの場合の話。ファイルのアップロードができないBloggerではこの方法は使えない。 なんだ・・・結局、ダメじゃん、とあきらめる事なかれ。公式によって次の方法が用意されている。Hosting
この方法を使用することにより、ダウンロードしなくてもホスティングされたファイルをリンクすることによって、ダウンロードした場合と同じように機能が利用できる。 先ほどのコードを、このホスティングの場合に置き換えたのがこちら
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script type='text/javascript'>
SyntaxHighlighter.all()
</script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script type='text/javascript'>
SyntaxHighlighter.all()
</script>
これで、<pre class="brush: js"></pre>または<script type="syntaxhighlighter" class="brush: js"><![CDATA[]]></script>で囲ったコードが ハイライトされて表示される。
