AFFINGER5でソートコードを綺麗に表示する方法【Google code-prettify利用】

どうも、CHASUKEです。

本記事では、記事内でプログラムソースコードを綺麗に表示する方法をご紹介します。軽量で簡単に導入できる「Google code-prettify」を使います。

現在、当ブログでは、WordPressテーマ「AFFINGER5EX」を使ってます。

以前使ってたテーマでは「highlight.js」でコード表示させてましたが、AFFINGER5に移行したらおかしな表示に。。。直したかったけど、無理でした。断念です。

AFFINGERで使えるソースコード表示を調べてもなかなか思うような記事がなかったので、自分がやったメモを残すことにしました。

ブログ内でPHPやCSSなどのコードをハイライト表示したい人の参考になれば幸いです。

同じAFFINGERでもプラグインなど利用環境の違いで上手くいかない場合もあります。

タップできる目次

AFFINGER5デフォルトのソース表示機能と比較
AFFINGER5で「Google code-prettify」を使ってコード表示させる方法
最後に

AFFINGER5デフォルトのソース表示機能と比較

先に言っておきますが、

AFFINGER5にはデフォルトでコード表示っぽいスタイルができます。

[タグ] - [ボックスデザイン] - [pre: terminal]

▼使うとこんな風に表示されます。

実際の表示イメージ

 command
.sample > li {
color: xxx;
padding: xxx;
}

投稿画面

CHASUKE

この書きっぷりが微妙なんですよねー。

では続いて、「Google Code-Prettify」を使ったイメージです。

実際の表示イメージ

.sample > li {
    color: xxx;
    padding: xxx;
}

投稿画面

CHASUKE

こっちのが好み！

AFFINGER5で「Google code-prettify」を使ってコード表示させる方法

設定手順はこんな感じです。

code-prettifyのダウンロード
ファイルの読み込み設定
スタイルシートの調整

Google code-prettifyの使うには、ヘッダーに <script> タグを記述するだけで必要な資産を読み込んでくれる「オートローダー」という方法と、「自分の環境にダウンロード」する方法の2パターンがあります。

オートローダーのが設定は簡単ですが、後々のカスタマイズを考慮し、後者の「自分の環境にダウンロード」する方法を選びました。

Web Design Leaves | Google Code-Prettify

CHASUKE

内容はこちらを参考にさせてもらってます。詳しくてとても参考になった

Google code-prettifyのダウンロード

このリンクから『Google code-prettify』をダウンロードできます。

ダウンロードする

ダウンロードしたら、srcディレクト内の下記ファイルを子テーマに配置します。

prettify.css
prettify.js
lang-css.js
skins一式

上の4つをサーバ上の子テーマに「code-prettify」を作成し、FTP転送してます。

▼僕の環境だと転送イメージはこんな感じ。

この中の「lang-css.js」は言語ハンドラーと呼ばれるもので、ソースコードの色分けに使われるJavaScriptです。ここでは例として、CSSコードの色分けをする「lang-css.js」を使います。

また、skinsは表示デザインのためのスタイルシート群です。

▼スキンは4パターンあり、サンプルギャラリーから好みのものが選べます。

Default
Desert
Sunburst
Sons-Of-Obsidian
Doxy

スキンの読み込ませる方法は、次で紹介します

ファイルの読み込み設定

サーバー上に置いたスキンとJavaScriptを読み込ませます。AFFINGERの場合、管理画面からコードが記載できます。

AFFINGER管理 - その他 - コードの出力

それぞれの記載例は下記の通り。自分の環境のパスに変えてコピペすればOKです。

①スキンCSSの読み込み設定

以下を「headに出力するコード」に記載

<link rel="stylesheet" type="text/css" href="https://xxxxx/【code-prettifyのパス】/skins/desert.css">

CHASUKE

僕の場合、「Dessert」スキンを指定してます。

②JavaScriptの読み込み設定

以下を「</body>直前に出力するコード」に記載

<script src="https://xxxxx/【code-prettifyのパス】/prettify.js"></script>
<script src="https://xxxxx/【code-prettifyのパス】/lang-css.js"></script>
<script>
  window.addEventListener("load", function() {
    PR.prettyPrint();
  });
</script>

通常であれば、子テーマに作成した「code-prettify」ディレクトリまでのパスはこんな感じになると思います。

https://xxxxxxx/wp-content/themes/affinger5-child/code-prettify

スタイルシートの調整

あとは見栄えを良い感じにして終わり。

skinsの中にある「desert.css」を直接編集して、各行ごとの番号表示と区切り線、背景色などをカスタマイズしてます。あと、太字が邪魔だったんで、全て解除してます。

pre.prettyprint { 
    display: block;
    background-color: #333;
    word-wrap: normal; /* 右端折り返し禁止 */
    white-space: pre; /* 右端折り返し禁止 */
    -webkit-overflow-scrolling: touch;
}
ol.linenums {
    margin-top: 0;
    margin-bottom: 0;
    color: #999
}
.prettyprint ol {
    padding: 1em 1em 1em 3em　/* 微調整 */
}
ol.linenums > li {
    font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,Courier,monospace !important;
    list-style-type: decimal; /* 1行ごとに行番号を表示 */ 
    border-left:solid 2px #999; /* 区切り線を表示  */
    padding-left:0.5rem; /* 微調整 */
    word-wrap:normal;
}

CHASUKE

まだまだ改良の余地はありそう..

使ってみる！

基本的な使い方はこんな感じ。記載した内容と表示イメージをあわせています。 ▼行番号なし、言語ハンドラーなし

<pre class="prettyprint">
.sample &gt; li {
    color: xxx;
    padding: xxx;
}

▼行番号あり、言語ハンドラーなし

<pre class="prettyprint linenums">
.sample &gt; li {
    color: xxx;
    padding: xxx;
}
</pre>

▼行番号あり、言語ハンドラーあり

<pre class="prettyprint lang-css linenums">
.sample &gt; li {
    color: xxx;
    padding: xxx;
}
</pre>

最後に

以上、AFFINGER5でソースコードを綺麗に表示する方法を書きました。

シンタックスハイライトされて、ソースコードが綺麗に見やすくなった。けれど、もう少しだけ見栄えのCSSをイジろうかなと思います。

この記事が参考になれば幸いです。それではまた。