2009年04月29日

SyntaxHighlighterのHosting

SyntaxHighlighter 2.0
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>
記事側では以下のように記述して下さい
(SyntaxHighlighter2.0用 貼り付けコード作成 で作成できます)
<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>
<script type="text/javascript">
dp.SyntaxHighlighter.HighlightAll("code0904292021");
</script>
また、見栄えを変更したい場合は以下のようなスタイルを追加します
<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;
}
</style>


ダウンロードおよび利用方法が書かれたサイト(英文)
※ IE6.0 で正しく表示されません。
posted by night wálker at 19:29| SyntaxHighlighter
JavaScript ベーシック
SyntaxHighlighter
クロスブラウジング
その他
Highslide JS
思いの他綺麗に撮れた花
ブログを彩るには、JavaScript が必ず必要です。
特に、Google の存在は大きく、Google MAP をはじめとする
いろいろな先進の技術を簡単に利用できます。
結構知られていないものもあり、少し JavaScript を勉強すれば使えるようになって
自分のブログにいろいろな花を添える事ができるようになると思います。
※ この花は Highslide JS と言って Google とは関係ありません。



Admin