SyntaxHighlighterのサンプル

「SyntaxHighlighter」を使うと、以下のように綺麗にソースを表示できます。
このサンプルで使用しているCSSは、デフォルトの shCoreDefault.css です。
ソース内をダブルクリックするだけで、ソース全体を範囲選択できます。

■HTMLソースの表示

		<!-- HTML SOURCE -->
		<h1 id="headtitle">サンプル</h1>
		<p class="sample">
		   <strong>SyntaxHighlighterで<a href="source.html">ソース</a>表示</strong>
		</p>
	

■CSSソースの表示

		/* CSS SOURCE */
		html,body {
			margin: 0px;
			padding: 0px;
		}
		h1#headtitle {
			background-color: green;
			color: white;
			margin: 1em 0px 0px 0px;
			padding: 0.3em 0.9em;
			border-bottom: 1px solid #ccffcc;
		}
	

■JavaScriptソースの表示

		// JavaScript SOURCE
		var count = 10;
		for( var i=0 ; i<count ; i++ ) {
			document.write("[" + i + "]");
		}
	

記事に戻る