studio-benkei

ソースコードを綺麗に表示するJS「SyntaxHighlighter」の紹介

ダウンロードサイト　→　SyntaxHighlighter

解凍すると以下の構成となっています。

• css → スタイルシート
• Scripts → 圧縮されたJavaScriptとclipboard.swf
• Uncompressed → 圧縮前のJavaScript

設定 ▼

            <link type="text/css" rel="stylesheet" href="SyntaxHighlighter.css" />
            <script type="text/javascript" src="shCore.js"></script>
            <!-- 以下は表示したい言語に応じて -->
            <script type="text/javascript" src="shBrushJScript.js"></script>
            <script type="text/javascript" src="shBrushCss.js"></script>
            <script type="text/javascript" src="shBrushPhp.js"></script>
            <script type="text/javascript" src="shBrushXml.js"></script>
          

コード部分の記述 ▼

preタグ内にコードを記述します。

          <pre name="code" class="xml">
          </pre>
    
          

class部分の記述 ▼

参考サイト → Languages - syntaxhighlighter - Google Code

• XMLコードの場合、class="xml"
• PHPコードの場合、class="php"
• CSSコードの場合、class="css"
• JavaScriptコードの場合、class="js"
• Rubyコードの場合、class="ruby"
• SQLコードの場合、class="sql"
• Visual Basicコードの場合、class="vb"
• Javaコードの場合、class="java"
• pythonコードの場合、class="python"
• C#コードの場合、class="c#"
• C++コードの場合、class="c"
• Delphiコードの場合、class="delphi"

JavaScript ▼

clipboard.swfのパスは現在のファイルからのパスで記載しないとうまく動かないようです。

						<script type="text/javascript">
            window.onload = function () {  
              dp.SyntaxHighlighter.ClipboardSwf = 'js/clipboard.swf';  
              dp.SyntaxHighlighter.HighlightAll('code');  
            }  
            </script>