WordPressで記事を書いていると、記事の中でソースコードを紹介したいことがあります。CSSやHTML、Javascript、プログラムなど様々です。本記事では、WordPressのテーマにAFFINGER5を使っている方向けに、ソースコードの表示方法を紹介します。
目次
AFFINGER5でソースコードを表示する方法一覧
AFFINGER5でソースコードを表示するには、大きくは以下の3種類の方法があります。
-
- AFFINGER5で用意されているショートコードを使う
- プラグイン
- Google code-prettify
①AFFINGER5で用意されているショートコードを使う方法
ツールバーから、「タグ」、「ボックスデザイン」で表示されるメニューから選択出来る以下の3つです。
pre
html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="author" href="mailto:mail@example.com">
<title lang="en">HyperText Markup Language - Wikipedia</title>
</head>
<body>
<article>
<h1 lang="en">HyperText Markup Language</h1>
<p>HTMLは、<a href="http://ja.wikipedia.org/wiki/SGML">SGML</a>
アプリケーションの一つで、ハイパーテキストを利用してワールド
ワイドウェブ上で情報を発信するために作られ、
ワールドワイドウェブの<strong>基幹的役割</strong>をなしている。
情報を発信するための文書構造を定義するために使われ、
ある程度機械が理解可能な言語で、
写真の埋め込みや、フォームの作成、
ハイパーテキストによるHTML間の連携が可能である。</p>
</article>
</body>
</html>
pre: terminal
command
PS C:\Users> ping yahoo.com
yahoo.com [2001:4998:124:1507::f001]に ping を送信しています 32 バイトのデータ:
2001:4998:124:1507::f001 からの応答: 時間 =149ms
2001:4998:124:1507::f001 からの応答: 時間 =147ms
2001:4998:124:1507::f001 からの応答: 時間 =147ms
2001:4998:124:1507::f001 の ping 統計:
パケット数: 送信 = 3、受信 = 3、損失 = 0 (0% の損失)、
ラウンド トリップの概算時間 (ミリ秒):
最小 = 147ms、最大 = 149ms、平均 = 147ms
pre: shortcode
[/] shortcode
[st-mybox title="" fontawesome="" color="#757575" bordercolor="#f3f3f3" bgcolor="#f3f3f3" borderwidth="0" borderradius="5" titleweight="bold" fontsize="" myclass="st-mybox-class" margin="25px 0 25px 0"]
[/st-mybox]
それぞれ上記のように表示されます。AFFINGER5デフォルトのソースコード表示の特徴は以下の3点です。
- 違いは色と、表示箇所左上の
>_commandや</>htmlのみです。 - 自動的にコードシンタックスはされません。
- WordPressで記事編集にビジュアルエディタでコードを記述・貼り付ける場合は、WordPressのエディタが自動的にHTMLエスケープをしてくれます。
- テキストモードでコードを記述、貼り付ける場合はHTMLの特殊文字変換は自分で行う必要があります。HTML特殊文字変換ツール
- ビジュアルエディタとテキストエディタを行き来する間にショートコードの中に記載された行の先頭スペースが消されるため、表示したいソースコードのインデントが想定通りに表示されないことがある。
ソースコード表示用のプラグインを使う
WordPressにはソースコードを綺麗に表示するためのプラグインが複数用意されています。
特に問題なければこちらを使うのが良いのですが、残念ながら一長一短でどれも微妙です。
- デザイン性が悪い
- 他のプラグインとの相性が悪い
- AFFINGER5との相性が悪い
そのため私もいくつか試してみましたが、満足するものはありませんでした。その中でも推奨出来るプラグインについては以下で紹介しています。
-
-
【Niziプロジェクト】J.Y. Parkさんが大切にする3つの価値観
続きを見る
Google code-prettifyを使ってWordPressにコードを掲載する
Google code-prettifyは、ソースコードをきれいに表示するためのJavascriptのライブラリです。
Google code-prettifyを使うには、以下の2種類の方法があります。
- オートローダーで必要なファイルを動的に読み込む方法
- 事前に必要なファイルをダウンロードして読み込む方法
この記事では、オートローダーを使用する方法を紹介します。
オートローダーの設定
オートローダーを使用するには、以下のコードをbodyの閉じタグの直前に記述します。
<p><script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js"></script></p>
Header and Footerプラグインを使うと安全にコードを追加出来ます。
WordPress内でのコードの記述
WordPress内でコードを記述する際には、表示したいコードを以下のように<pre class="prettyprint"></pre>で囲みます。
<pre class="prettyprint"><br /> //記述したいコード<br /> </pre><br />
コードの表示をカスタマイズする
デフォルトだと、以下のように味気ない表示になります。これを綺麗に表示するためのカスタマイズ方法を紹介します。
スタイルを変更する
以下のようにオートローダーの末尾にスタイル名を指定します。以下はスタイル「Desert」を指定した場合の例です。
<script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js?skin=desert"></script><br />
利用可能なスタイルは以下を参考にしてください。
https://raw.githack.com/google/code-prettify/master/styles/index.html
スタイル名はアルファベット小文字で指定します。
| スタイル名 | オートローダーで指定するパラメタ |
| Desert | desert |
| Sunbrust | sunbrust |
| Sons-Of-Obsidian | sons-of-obsidian |
| Doxy | doxy |
行番号を指定する
<pre class="prettyprint linenums"><br /> //記述したいコード<br /> </pre><br />
CSSをカスタマイズする
以下はCSSのサンプルです。
/* Google code-prettify */<br />
pre.prettyprint * {<br />
font-family: Menlo, Consolas, 'DejaVu Sans Mono', monospace; /* フォントの指定 */<br />
<br />
}<br />
pre.prettyprint ::marker {<br />
}<br />
.prettyprint ol{<br />
white-space: pre-wrap; /* 折り返し */<br />
}<br />
.prettyprint ol.linenums > li {<br />
list-style-type: decimal; /* 1行ごとに行番号を表示 */<br />
border-left:solid 1px #999; /* 区切り線を表示 */<br />
}<br />
<br />
pre.prettyprint ol li {<br />
padding-bottom: 0px; /* Affinger5でコード表示領域の下のPaddingが広いのを調整*/<br />
}<br />
<br />
li.L0, li.L1, li.L2, li.L3, li.L4, li.L5, li.L6, li.L7, li.L8, li.L9 {<br />
list-style-position: outside;<br />
list-style: decimal;<br />
border-left: 1px #707070 solid;<br />
margin-left: 1.8rem;<br />
padding-left: 2rem;<br />
}<br />
参考にさせていただいた記事
https://www.webdesignleaves.com/pr/plugins/google_code_prettify.html
https://webutubutu.com/webdesign/5635
> https://osyu-web.com/library/google-code-prettify-information/
