SyntaxHighlighterのサンプル

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

■HTMLソースの表示

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

■CSSソースの表示

?
1
2
3
4
5
6
7
8
9
10
11
12
13
/* 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ソースの表示

?
128行目以降のソース
128
129
130
131
132
133
// JavaScript SOURCE
var count = 10;
for( var i=0 ; i<count ; i++ ) {
    document.write("[" + i + "]");
}

記事に戻る