ソースコードをそのままブラウザに表示する方法

はじめに

Web関連のBLOGをまとめるときに良くソースをペリッと貼付ける機会が多いので
改めて手法を調べてみました。

<pre>を使用する

<PRE>タグはPreformatted Text（整形済みテキスト） の略で
<PRE>タグで囲った中身をそのまま出力します。

preタグ内でも「<」「>」で囲った内容はhtmlと見なされます。
そのため

• 「<」を「&lt;」
• 「>」を「&gt;」

に変換する必要があります。
「<」「>」はエンティティ文字と呼ばれます
変換の祭はタグの数も多く大事になりますので

• ＜とか＞とかのタグをＨＴＭＬ無害に変換 (＆gt, ＆lt, etc)
• ソースコード HTML化 コンバーター「唐辛子」

を使用したり、Dreamweaverのデザイン画面に貼付けたりします。

ちなみに、エンティティ文字には意味があります

preタグで囲ったSample

<h1>Header1</h1>
<h2>Header2</h2>
<h3>Header3</h3>

<code>を使用する

<code>〜</code>で囲んだテキストが、プログラムのソースコードであることを意味します。
改行やtabを表現したい場合は<code>の外を<pre>で囲みます。
preタグと同様に「<」「>」をエンティティ文字に置き換える必要があります。

preタグ,codeタグで囲ったSample

        <? echo $test; ?>

            <h1>Header1</h1>

                        <h2>Header2</h2>

                            <h3>Header3</h3>
    

<xmp>を使用する

<xmp>は囲った中身をhtml化しません。
エンティティしなくて楽なのですが、このタグは HTML4.0 で廃止され,代わりに <pre> を使用することが推奨されています。

xmpタグで囲ったSample

google-code-prettifyを使用する

google-code-prettifyは、コードをハイライト表示してくれるJavaScriptライブラリです。
google-code-prettify - Project Hosting on Google Code
Code licenseは Apache License 2.0 です。

google-code-prettifyを読み込み、preタグにclass=prettyprintを加えるだけのラクチンライブラリです。

Sample

int x = foo();  /* This is a comment  This is not code
  Continuation of comment */
int y = bar();

SyntaxHighlighterを使用する

syntaxhighlighter - Project Hosting on Google Code
Code licenseはGNU Lesser General Public Licenseです。
対応言語の多いライブラリです。
本家のページではVersion3.0が公開されています。

おわりに

他にもJavascriptを使用したライブラリ、WordpressなどのCMSプラグインがあります。
ライブラリは色々使って感触を知るしかないですね。

参照URL

<

ul>