ソースコードを表示させるのに使うべきHTMLタグは？

Yoshihide — Tue, 25 Jul 2006 17:09:59 +0000

ソースコードをWebページで表示させるために、どんなHTMLを書いてますか？私はこれまで、

…

を使っていました。… というタグは知っていましたが、これだと半角スペースや改行がうまく反映されていない、という理由で使っていなかったのです。

が、Web標準の教科書という本を読んで、目からうろこが落ちました。

（pre要素の解説で）

pre要素は、code要素と組み合わせてスクリプト言語やプログラミング言語のソースコードを示すのに使うのが一般的である。

（code要素、var要素、samp要素、kbd要素の解説で）

コンピュータに特有のテキストを定義するには、次の4つの要素を使用する。
（略）
これらはインライン要素であり、インライン要素やテキストを含むことができる。

そうだったのかー！code要素はインライン要素なので、半角スペースや改行が反映されないのは当たり前なのでした。つまり、ソースコードをWebページで表示させるには、


function someFunction() {
    // code
}

というふうに、pre要素の中にcode要素を含ませて書くのが正しいようです。ちなみにcode要素はインライン要素なので、次のような書き方もできます。
1行目のsomeFunction()の中にコードを実装していきます。

なお、
…
を使うと、一行が長い場合、
function someFunction() {
    // code code code code code code code code code code code code code code code code code code code code code code code code code code code code code code code code
}

という感じで、横スクロールバーが表示されてしまいますが、以下のサイトで紹介されているcssハックを使えば、折り返すことができます。
» Making preformated 
 text wrap in CSS3, Mozilla, Opera and IE
最近になって、ようやくWeb標準の勉強を始めたのですが、新しい発見がいっぱいあって楽しいです。

ソースコードをカラー表示するWordPressのプラグイン

Yoshihide — Wed, 12 Jul 2006 16:23:28 +0000

[追記 2010-01-19]

現在は、CodeColorer というプラグインを利用しています。

» CodeColorer – Syntax Highlighting Plugin for WordPress | Dmytro Shteflyuk’s Home

「Tips Community » ソースをハイライトで表示してくれるプラグイン」で iG:Syntax Hiliter というプラグインを見つけました。ソースコードをテキストエディタのようにカラー表示してくれるという優れものです。

» iG:Syntax Hiliter

プラグインを使わずに普通に書くとこんな感じ。（~~本来はタグを使うべきですが半角スペースが効かないので~~

タグを使っています。認識が間違っていました。）
// Comment here
function HelloWorld() {
    alert('Hello World!');
}

それがこんなふうに表示されます。（一部スタイルを改変してます。）プレーンテキストへの切り替えも付いているので、ソースをコピー＆ペーストするときもOK。
// Comment here

function HelloWorld() {

    alert('Hello World!');

}
使い方はソースコードを専用のタグ（［js］～［/js］など）で囲むだけです。
[js]
// Comment here
function HelloWorld() {
    alert('Hello World!');
}
[/js]

開始行番号の指定も出来ます。
[php num=23]
$var1 = 23; // variable 1
$var2 = 32; // variable 2
$vsum = $var1 + $var2; // sum of variables 1 & 2
print($vsum);
[/php]

対応している言語は以下のようになっています。これだけあれば充分でしょう。

ActionScript
ASP
C
C++
C#
CSS
Delphi
HTML
Java
JavaScript
MySQL
Perl
PHP
Python
Ruby
Smarty
SQL
Visual Basic, VBScript
VB.NET
XML

なお、WordPress を使っていない方には、dp.SyntaxHighlighter というのもあります。こちらはの中に書いたソースコードをカラー表示してくれる JavaScript のライブラリで、見た目は個人的にはこっちの方が好きなんですが、ページのロードが完了してからスタイルを適用させるのでちょっとタイムラグがあるのが、ちと難点。あと、WordPressだと<textarea>内の改行が<br>に変換されてしまいうまく表示できない、という問題があるので見送りました。</p>

</article>
</main></body></html>

jmblog.jp » code

ソースコードを表示させるのに使うべきHTMLタグは？

ソースコードをカラー表示するWordPressのプラグイン