ブログにソースコードを表示させる方法

ブログやホームページなどに、プログラムのソースコードをそのまま載せたいことがあります。

ブログやホームページは、ソースコードを貼りつけても、プログラムとして認識されてしまい、ソースコードをそのまま表示してくれません。
ソースコードを表示するには、特殊な文字を表示できる文字に置き換えてやる必要があります。

ソースコードをブログやホームページで表示するための変換 を使うと、一発で変換できます。


例えば、次のようなソースコードを用意します。




このソースコードをコピーして、ソースコードをブログやホームページで表示するための変換 に貼りつけます。




［HTMLへ変換］ボタンを押すと、下の枠に変換されたソースコードが表示されます。




変換されたソースコードをコピーして、ブログなどに貼りつけると、ソースコードがそのまま表示されます。
<pre> で囲まれているので、スペースや改行、タブなどもそのまま表示されます。

function test() {
	echo '<div>表示テスト</div>';
}

このままでもいいのですが、色を変えると見やすくなります。

<pre> を次のように変えます

<pre style="padding:10px; color: #fff; background-color: #666">

function test() {
	echo '<div>表示テスト</div>';
}

ソースコードをブログやホームページで表示するための変換 は、ソースコードだけでなく、スペースや改行、タブなどをそのまま表示したい文章などにも使えます。



So-netブログの場合、[設定]でリッチテキストエディタを「利用しない」にしておきます。

タグ：ソースコード ブログ ホームページ