SyntaxHighlighter導入

下記より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; // 追加
}

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です