WordPress

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

2020年4月27日

どうも、CHASUKEです。

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

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

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

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

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

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

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」を使ってコード表示させる方法

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

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

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

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

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をイジろうかなと思います。

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

Amazonでお得に買い物

Amazon.co.jpで買い物するならギフト券を現金チャージするのがお得です。チャージごとに最大2.5%分のAmazonポイントがもらえます。また、5000円チャージで1000円分ポイント還元キャンペーンも実施中!!

詳しくはコチラ

Amazonキャンペーン中

こちらの記事も読まれてます

  • この記事を書いた人
CHASUKE

CHASUKE

某IT企業でエンジニアをしているCHASUKEです。 当ブログでは生活を便利にするガジェットやサービスなどライフスタイルに関わる様々な情報をお届けします。レビュー依頼も受け付けています。「お問い合わせ」より気軽にご相談ください。

Copyright© CHASUKE.com , 2020 All Rights Reserved.