下記よりSyntaxHighlighter一式をD/L。
http://alexgorbatchev.com/SyntaxHighlighter/download/
導入方法が異なるのでバージョン(ここでは3.0.83を想定)に注意。
scripts(js一式)とstyles(css一式)をサーバーにU/L。
ここではCMSフォルダ直下にshフォルダを作成し、ここに一括コピー。
ヘッダーに下記を記載。
shBrush言語名.jsは使用する言語名に対応するjsを指定(複数可)。
以上で導入は完了。
コード記述例。
<pre class="brush: js;">
function helloSyntaxHighlighter()
{
return "hi!";
}
</pre>
特定のブラウザで縦方向のスクロールバーが常に表示されてしまう現象の回避策
shCoreDefault.css
.syntaxhighlighter {
width: 100% !important;
margin: 1em 0 1em 0 !important;
position: relative !important;
overflow: auto !important;
font-size: 1em !important;
overflow-y: hidden !important; // 追加
}