トップページへ

ソースコードを自動で整形するJavaScript「SyntaxHighlighter」

日々是作譜 » Web制作 » JavaScript » ソースコードを自動で整形するJavaScript「SyntaxHighlighter」

このブログでは、ソースコードを貼付ける事がよくあるのですが、SyntaxHighlighterというJavaScriptで綺麗に表示させるようにしました。

設置方法は以下。

  1. SyntaxHighlighterをダウンロードします。
  2. 解凍して、外部からアクセスできるフォルダにアップロードします。
  3. HTMLのhead部分に以下の記述を追加します。 
    <link rel="stylesheet" href="/dp.SyntaxHighlighter/Styles/SyntaxHighlighter.css" type="text/css" charset="Shift_JIS" />
<script type="text/javascript" src="/dp.SyntaxHighlighter/Scripts/shCore.js" charset="Shift_JIS"<>/script>
<!-- 以下は装飾したい言語に応じて追加します -->
<script type="text/javascript" src="/dp.SyntaxHighlighter/Scripts/shBrushXml.js" charset="Shift_JIS"<>/script>
<script type="text/javascript" src="/dp.SyntaxHighlighter/Scripts/shBrushCss.js" charset="Shift_JIS"<>/script>
<script type="text/javascript" src="/dp.SyntaxHighlighter/Scripts/shBrushPhp.js" charset="Shift_JIS"<>/script>
<script type="text/javascript" src="/dp.SyntaxHighlighter/Scripts/shBrushJScript.js" charset="Shift_JIS"<>/script>
<script type="text/javascript" src="/dp.SyntaxHighlighter/Scripts/shBrushSql.js" charset="Shift_JIS"<>/script>
  4. コード記述部分を以下のタグで囲みます。 
    <pre name="code" class="html">
</pre>
    class属性の値は、「Languages - syntaxhighlighter - Google Code - List of supported languages.」を参考に装飾したい言語に応じて記述します。
  5. ページの最後に以下を追加します。 
    <script language="javascript">
dp.SyntaxHighlighter.ClipboardSwf = '/dp.SyntaxHighlighter/Scripts/clipboard.swf';
dp.SyntaxHighlighter.HighlightAll('code');
</script>

日本語化したり、折りたたみ式にしたりなどのカスタマイズ方法は、「ソースコードを綺麗に表示するJS「dp.SyntaxHighlighter」｜caraldo.net | MT Blog」を参考にしてください。

« 前の記事へ

次の記事へ »

トップページへ