Tech

AFFINGERを適用したWordPressにhighlight.jsを導入する

2020年11月10日

開発系のブログなどでは、ソースコードを記載する記事を書くことも多いと思います。

サイト上でソースコードや実行コマンドなどを表示するときに便利なのが、シンタックスを綺麗にハイライトしてくれるJavaScriptライブラリです。

この記事ではそんなライブラリのひとつhighlight.jsを、AFFINGERテーマを適用したWordPressへ導入してみます。

 

一般的な導入方法(どんなサイトでも共通)

公式サイトにあるように、CDN経由で導入するのが便利です。

以下のコードをhead内に入れます。(バージョンは記事時点のものです)

<link rel="stylesheet"
      href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/highlight.min.js"></script>
<script>hljs.highlightAll();</script>

 

実際にコードを表示させたい部分では、以下のように<pre><code>で囲んであげます。

<pre><code>
def throw_or_something():
    raise 'MAKE AMERICA GREAT AGAIN'

i=1
try:
    i = throw_or_something()
except BaseException as i:
    pass

print(i)
</code></pre>

これをブラウザで見ると、こんな感じに。

def throw_or_something():
    raise 'MAKE AMERICA GREAT AGAIN'

i=1
try:
    i = throw_or_something()
except BaseException as i:
    pass

print(i)

mattn - Twitter

 

あとは見やすいようにスタイルシート(CSS)で調整します。
WordPressだとstyles.cssに追加すればOK。
例えば、こんな感じに等幅フォントを小さめで指定してあげると、よく見かけるような視認性の高いルックスに。

code {
    font-family: Consolas, Monaco, monospace;
    font-size: 0.8rem;
}

 

AFFINGERテーマ下での導入方法

下記コードをfunction.phpに追加します。

add_action( 'wp_head', 'meta_headcustomtags', 99);
function meta_headcustomtags() {
	$headcustomtag = <<<EOM
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/styles/hybrid.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/highlight.min.js"></script>
<script>hljs.highlightAll();</script>
EOM;
	echo $headcustomtag;
}

 

もしくは、Affinger5では管理画面で、head内に置くコードを導入することもできます。

AFFINGER5管理 → その他 → 上級者向け → コードの出力

まとめ

AFFINGER5の場合、プラグイン導入やwp_enqueue_script()による方法ではうまくいかないことが多く、highlight.jsではキレイに表示できたのでよかったです。

上記のように直接head内で読み込むだけで導入できるので、手軽なのもいいところですね。

  • この記事を書いた人

nextpenguin

システム開発・プログラミングのしごとやっています。甘味とコーヒーは生命線。日常での学びを記事にしています。

人気の記事

1

先日の記事では、初心者からフリーランスプログラマーになる難しさと、それでもなんとか稼げるようになるにはどうしたらいいか解説しました。 今回の記事では、稼げるフリーランサーになるために必要な要素を、もう ...

2

気休めだけの甘い言葉は書きません。 最近は多くの企業やサイトで、使い捨てられるプログラマーが欲しいがために、甘い言葉で初心者プログラマを誘い出しています。 この記事では、まずは「現実」をちゃんと理解し ...

3

Vuetifyの v-progress-circular コンポーネントは、数値データや処理状況を環状(円状)のデザインで教えてくれるUIデザインです。 ローディングのスピナー(処理中のマーク)として ...

4

※画像はずとまよの新曲とは一切関係ありません   ずっと真夜中でいいのに。(以下、ずとまよ)の新曲『勘ぐれい』のMVが12月1日に公開されましたね。 MV前に公開されていた原曲を聴き、神曲な ...

5

Vuexのstore(ストア)を使うと、各コンポーネント間で個別にデータのやり取りすることなく、データを一元的に管理できます。Vueでは欠かせない機能といえるでしょう。 state(変数、コンポーネン ...

-Tech
-,

© 2021 スターレイヴ