ブログ内に表示するソースコードの装飾方法を解説【コピペでOK】

こんな疑問を解決していきます。

本記事の内容

技術系の記事を書くにあたり、ソースコードの例などを載せることは多いかと思いますが、どうせなら見栄えよく記事を読んでいる人が理解しやすいソースコード表示にしたいですよね。

当ブログでも今後技術系の記事を書いていく際、ソースコードを載せる機会が増えていくだろうなと思い、見栄えの良いソースコード表示方法について色々調べてみました。

今回の記事では、その方法と実際の変更手順を解説していきます。

コピペで簡単に実装が可能なので、ぜひ参考にしてみてください！

ソースコードの装飾効果の概要

まず装飾方法を解説する前に、当ブログでのソースコードの表示を見ていただきたいと思います。

<div>Hello world</div>
<div>Hello world</div>
<div>Hello world</div>

body {
    color: #fff;
    background: #000;
}

技術系の記事なんかでよく見るような見た目になっているんじゃないかなと思いますが、上記のソースコードには具体的に以下のような装飾効果があります。

今回の記事では、上記の効果を一つ一つ詳細に解説していくことはしませんが、次からの手順説明にて途中途中に参考ページのリンクを張っているので、効果の詳細を知りたい方はぜひそれらのページの内容を参考にしてみてください。

ソースコード装飾手順【コピペでOK】

それでは早速ですが、実際にソースコードを装飾する手順を説明していきたいと思います。

編集を行う前に、以下注意点です。

手順

ざっくりとした流れとしては以下のような感じになります。

①「functions.php」の編集

以下のコードを「functions.php」内の一番下の行にコピペしてください(親/子どちらのテーマを編集する場合でも一番下の行で問題ありません)。

function my_enqueue_scripts() {
  wp_enqueue_script( 
    "my_script", 
    "https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js?lang=css&skin=desert"
  );
}
add_action( "wp_enqueue_scripts", "my_enqueue_scripts" );

簡単に説明すると、このコードではwp_enqueue_script()という関数を使って、WordPressテーマ内から装飾を行うためのスクリプトを呼んでいます。

スクリプトを読み込みの詳細まで知りたい方は、以下のページの説明が分かりやすかったので参考にしてみてください。

また、ここで呼んでいるのは「code-prettify」というスクリプトで、これは装飾効果の中で説明した「シンタックスハイライト」や「行数の表示」を実現しています。

「code-prettify」については以下のページに詳しく書かれていました。

②「style.css」の編集

続いて「style.css」の編集ですが、こちらも以下のコードを「style.css」内の任意の場所にコピペしてください。

コピペする場所についてはどこでも大丈夫ですが、以下のコード内に書かれている要素やクラスと同じ名前で既にスタイリングを行っている場合には、クラス名を変更するなどしてスタイリングの上書きなどが起こらないよう気を付けてください。

pre {
	background-color:#eee;
 	border:none;
	margin: 20px 0;
	padding:7px;
	overflow: auto;
}

.prettyprint {
	position: relative;
	padding: 40px 20px 20px 20px;
}

.prettyprint ol{
  white-space: pre-wrap;
}

.ribbon-html::before {
	content: "HTML";
	position: absolute;
	font-size: 14px;
	font-weight: bold;
	font-family: Consolas, Menlo, 'Liberation Mono', Courier, monospace;
	color: #fff;
	text-align: center;
	background: #ffbf7f;
	width: 50px;
	height: 25px;
	top: 0px;
	left: 0px;
}

.ribbon-css::before {
	content: "CSS";
	position: absolute;
	font-size: 14px;
	font-weight: bold;
	font-family: Consolas, Menlo, 'Liberation Mono', Courier, monospace;
	color: #fff;
	text-align: center;
	background: #7fbfff;
	width: 50px;
	height: 25px;
	top: 0px;
	left: 0px;
}

.prettyprint ol.linenums > li {
	font-size: 14px;
	border-left: 0.5px solid #aeaeae;
	margin-left: 10px;
	padding: 0 0 0 20px;
	list-style-type: decimal;
	list-style-position: outside;
}

code{
	font-family: Consolas, Menlo, 'Liberation Mono', Courier, monospace;
}

少し長いですが、こちらのコードでは「ソースコードエディタ風のフォント」や「表示領域左上のリボン表示」、その他余白や背景色などのスタイリングを行っています。

ソースコード領域全体のスタイリングの詳細については、以下のページの説明を参考にしてください。

③表示させたいコードを記事内に書く

最後に表示コードを記載していきますが、ここでは以下のテンプレートを使います。

ブロックの詳細設定メニューから「HTMLとして編集」を選択して、以下のコードをコピペしてください。

<pre class="prettyprint linenums">
<code>//ここにコードを入力
//ここにコードを入力
//ここにコードを入力</code>
</pre>

そして「//ここにコードを入力」となっている部分を消して、実際に表示させたいコードを書いてください。

ここで1つ注意点ですが、HTMLのソースコードを書く際は各種記号に対してエスケープ処理をする必要があります。

そうしないと、入力した記号などがHTML特有の記号だと認識されてしまい、そのまま表示されないからです。

例えば、以下はブログ記事上で「<div>Hello world</div>」と表示させたい場合の例です。

エスケープ処理なし

Hello world

エスケープ処理あり

<div>Hello world</div>

どうでしょうか。

エスケープ処理を行うと、<div>というタグが正しく文字列として表示されているのが分かると思います。

以下によく使われる記号のエスケープ処理方法をまとめておきます。

記号	エスケープ処理
<	&lt;
>	&gt;
&	&amp;
"	&quot;
(スペース)	&nbsp;

例えば、「<div>」と書きたい時は「<div>」のように入力します。

まとめ

今回はブログ記事内でソースコードを装飾して表示する方法について紹介しました。

これから技術記事などを書いていこう！と思っている方であれば、記事内でのソースコードの表示はできるだけきれいに見せたいですよね。

今回の記事が少しでもブログでのソースコード表示の参考になれば幸いです。

また、今回紹介したコードに手を加えれば自分だけのオリジナル装飾も作れるので、興味のある方はぜひ試してみてください。