おすすめカテゴリー【WordPress】

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

WordPress

記事内にソースコードを表示させたいけど、見栄えよく表示させる方法が分からない...

今回は、こんな疑問を解決していきます。

本記事の内容

・ソースコードの装飾効果の概要
・実際の装飾手順

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

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

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

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

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

<div>Hello world</div>
<div>Hello world</div>
<div>Hello world</div>
body {
    color: #fff;
    background: #000;
}

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

  • ソースコードとしての表示(pre要素、code要素)
  • ソースコードエディタ風のフォント調整
  • シンタックスハイライトの対応
  • 行数の表示
  • 領域左上のリボン表示

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

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

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

ここで、説明を始める前に2点ほど注意点です。

  • 編集を行う前に、ファイルのバックアップを取っておいてください。
  • 編集はできるだけ子テーマ内で行ってください。

手順

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

  1. 「functions.php」の編集(コピペ)
  2. 「style.css」の編集(コピペ)
  3. 表示させたいコードを記事内に書く

①「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テーマ内からスクリプトを呼んでいます。

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

テーマにJavaScript(jsファイル)を正しい方法で読み込む
WordPressでJavaScriptを読み込むには、にタグを直接書き込むのではなく、wp_enqueue_script()という関数を使用します。
WordPressでスクリプトファイルを読み込むときはwp_enqueue_script関数を使う | 埼玉のWebコンサルタント ColdSleep Works
WordPressでスクリプトファイルを読み込むときwp_enqueue_script関数を使って読み込み順序、重複を制御しましょう。

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

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

Google Code-Prettify シンタックスハイライト/ Web Design Leaves
Google Code-Prettify を使ったシンタックスハイライト(プログラムのコードをキーワードや書式に応じて色分けして表示する機能)の設定方法や使い方、WordPress でのショートコードの作成方法などの覚え書きです。

②「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>Hello world</div>

エスケープ処理を行うと、ちゃんと文字列として表示されているのが分かると思います。

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

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

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

まとめ

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

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

そんな方はぜひ今回の記事を参考に、自分だけのオリジナルの装飾方法を見つけていただければ幸いです。

それでは次の記事でまたお会いしましょう!

タイトルとURLをコピーしました