SQLの窓

2013年11月09日


SyntaxHighlighterのHosting

2.0.296 を使用する理由は、
1) 元のソースコードの改行がそのまま表示反映される。
2) 横に長いコードを折り返し表示してくれる
3) クリップボードにコピーする機能が正しく使える

からです。
SyntaxHighlighterの2.0では、ライブラリを置く自分の WEB スペースの無い人の為に Hosting してくれていますので、慣れるまではまず以下のコードをヘッダ部分か、記事前でページで一度だけ表示される場所に記述するといいと思います。(動作確認後、ゆっくり入れ替えれば良いです) 必要なライブラリは選択する必要がありますが、使用するものは全て記述しておきます。いろいろやってみましたが、それが最も良い方法であると思っています。
<script	type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.296/scripts/shCore.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.296/scripts/shLegacy.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.296/scripts/shBrushPlain.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.296/scripts/shBrushJScript.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.296/scripts/shBrushXml.js"></script>
<link type="text/css" rel="stylesheet" href="http://alexgorbatchev.com/pub/sh/2.0.296/styles/shCore.css">
<link type="text/css" rel="stylesheet" href="http://alexgorbatchev.com/pub/sh/2.0.296/styles/shThemeDefault.css">
<script type="text/javascript">
SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/2.0.296/scripts/clipboard.swf';
SyntaxHighlighter.config.strings.copyToClipboardConfirmation =
 '\u30af\u30ea\u30c3\u30d7\u30dc\u30fc\u30c9\u306b\u30b3\u30d4\u30fc\u3057\u307e\u3057\u305f\u3000\u3000\u3000';
SyntaxHighlighter.defaults['auto-links'] = false;
</script>

※ 他にも用意されています
http://alexgorbatchev.com/pub/sh/1.5.1/
http://alexgorbatchev.com/pub/sh/2.0.278/
http://alexgorbatchev.com/pub/sh/2.0.287/
http://alexgorbatchev.com/pub/sh/2.0.296/
http://alexgorbatchev.com/pub/sh/2.0.320/
http://alexgorbatchev.com/pub/sh/2.1.364/
http://alexgorbatchev.com/pub/sh/2.1.364/
http://alexgorbatchev.com/pub/sh/2.1.382/
http://alexgorbatchev.com/pub/sh/current/
記事側では以下のように記述して下さい (SyntaxHighlighter2.0用 貼り付けコード作成 で作成できます) ※ 表示幅をコントロールしたい場合は、DIV で囲んで、その幅をスタイルで指定します
<div style='width:600px;'>
<pre name="code0904292021" class="brush:js">

&lt;SCRIPT type=&quot;text/javascript&quot;&gt;

function test() {
	alert("ok");
}

&lt;/SCRIPT&gt;


&lt;INPUT
	type=&quot;button&quot;
	value=&quot;test&quot;
	onClick='test();'
&gt;
</pre>
</div>
<script type="text/javascript">
dp.SyntaxHighlighter.HighlightAll("code0904292021");
</script>

また、見栄えを変更したい場合は以下のようなスタイルを追加します
( opacity を設定すると、ツールバーが透過してソースコードが隠れても読めます )
<style type="text/css">
.syntaxhighlighter div,.syntaxhighlighter span,.syntaxhighlighter code {
	font-size:12px!important;
	font-family: "MS Pゴシック"!important;
}
.syntaxhighlighter {
	padding:5px!important;
	background-color:#FFFFFF!important; 
	border-style:solid!important;
	border-color:#808080!important;
	border-width:1px!important;
}
.syntaxhighlighter .toolbar {
	opacity:0.5;
}
</style>

ダウンロードおよび利用方法が書かれたサイト(英文)



posted by at 15:32 | SyntaxHighlighter | このブログの読者になる | 更新情報をチェックする