記載したソースコードを見やすくしてくれるやつです。
プログラムなどの解説サイトなどでよく使われているますね。

こんな感じの。

<p id="code">
   表示したいHTMLソース
</p>

p#code:before {
   content:"表示したいCSSソース";
}

var msg = '表示したいJavaScriptソース';
document.getElementById("code").innerHTML = msg;

一般のサイトではあまり使わないと思いますが参考までに。

通常のHTMLページに「Syntax Highlighter」を導入する方法はこちらのサイトなどを参考にしてください。

通常（HTML）版のサンプルはこちら。

このサイトでは、wordpress のプラグイン「Crayon Syntax Highlighter」を使っています。

ダッシュボードの［プラグイン］＞［ 新規追加］から
「Crayon Syntax Highlighter」と検索して、
検索一覧で見つけたらインストールボタンをポチッとするだけ。
※このプラグインを「有効にする」のもお忘れなく！

プラグインの設定は、ほとんどデフォルトで大丈夫だと思いますが、
当サイトではこんな感じにしてます。