ここではSyntaxHighlighterを使いソースコードをきれいに表示させます。

WordPressで使う場合はこちら
https://office-goto.info/wordpress/syntaxhighlighter-2/

SyntaxHighlighter3.0.83をダウンロード
http://alexgorbatchev.com/SyntaxHighlighter/download/

head内で読み込み

<link type="text/css" rel="stylesheet" href="syntaxhighlighter/styles/shCore.css">
<link type="text/css" rel="stylesheet" href="syntaxhighlighter/styles/shThemeDefault.css">
<script type="text/javascript" src="syntaxhighlighter/scripts/shCore.js"></script>
<script type="text/javascript" src="syntaxhighlighter/scripts/shBrushXml.js"></script>
<script type="text/javascript" src="syntaxhighlighter/scripts/shBrushCss.js"></script>
<script type="text/javascript" src="syntaxhighlighter/scripts/shBrushBash.js"></script>
<script type="text/javascript" src="syntaxhighlighter/scripts/shBrushJava.js"></script>
<script type="text/javascript" src="syntaxhighlighter/scripts/shBrushJScript.js"></script>
<script type="text/javascript" src="syntaxhighlighter/scripts/shBrushPhp.js"></script>
<script type="text/javascript" src="syntaxhighlighter/scripts/shBrushSql.js"></script>

4行目以降を自分が使用する言語に合わせて読み込んでください。

改行などの設定

<script type="text/javascript">
    SyntaxHighlighter.config.bloggerMode=true;
    SyntaxHighlighter.config.stripBrs=true;
    SyntaxHighlighter.defaults['toolbar'] = false;
    SyntaxHighlighter.all();
</script>

htmlでの使い方

<pre class="brush: js;"></pre>

jsの箇所を使用するソースコードに適した設定をしてpreタグで表示させるソースを囲んでください。

パラメーター一覧
http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/

ブログなどで使用する際はこちらで特殊文字のエスケープを行ってください。
http://www.mapee.jp/tools/pretagmaker/
Mapee様

WardPressにはプラグインがありますのでインストールして使用できます。

知らなかったので今回の解説どおり読み込んでました。