【LION MEDIA】highlight.jsを使ってソースコードを綺麗に表示する方法

【LION MEDIA】highlight.jsを使ってソースコードを綺麗に表示する方法

<事象>プログラムのコード部分が見づらい…

沙知です。
当サイトは、WordPressの無料テーマ「LION MEDIA」を使っています。

ブログを始めて約3ヶ月経過し、このテーマにもだいぶ慣れてきたのですが…
「これはいただけない…」と思っていることがあります。

プログラムのコード部分が見づらい…

これでもシステムエンジニアの端くれなので、プログラミングの記事とか書いたりするんですね。するとソースコードも載せようってなるんですよ。

で、いざ「コード」というフォーマットのブロックを使用してみると。。。

これじゃただの付箋だね…

ということで、今後のことも考えてカスタマイズすることに。

↓こんな感じ

無事、ソースコードが見やすくなりました!

この記事を読むと…
→ LION MEDIAでプログラムのソースコードを綺麗に表示できます

※動作の保証はできませんのでご了承ください

<方針>「highlight.js」をCDNを使わずに導入する

WordPressでソースコードを綺麗に表示するためのツール(プラグイン)はいろいろあったのですが…
LION MEDIA」で調べてみると、名前の挙がるものが意外に少なかったです。。(テーマとの相性もあるみたいです)

LION MEDIAで使えそうなのはこの<2つ>
 ◇ Crayon Syntax Highlighter
 ◇ highlight.js ←こちらを導入しました

Crayon…は「読み込みが遅いらしい」「最終更新が4年前」というので却下しました。

highlight.jsは、プログラムのソースコードを綺麗に表示するためのJavascriptライブラリです。
コードの言語に合わせて、シンタックスハイライト(構文強調)してくれます。

2020年5月現在で189言語に対応していて、91のスタイルが用意されています。

highlight.jsの導入方法はこの<2つ>
 ◇ CDNを使う
 ◇ ライブラリファイルを組み込む ←こちらで導入しました

CDN(Content Delivery Network。同一コンテンツを多くの配布先へ効率的に配布するための仕組み)を使う方法のほうが、楽に導入できそうではあったのですが
「レンダリングブロック」?というのが発生するらしく、後々面倒そうだったので、後者の方法を選択しました。

<対応>3ステップで解決!

今回、カスタマイズするにあたって、以下の記事を参考にさせていただきました。

参考にさせていただいたサイト様
 WordPressでhighlight.jsを使う方法。|DESIGN REMARKS
 軽量ソースコード ハイライター highlight.js を WordPressへ導入する方法。|beizのノート

公式サイトからカスタムパッケージ(zip)をダウンロード

まずは、highlight.zipを公式サイトからゲットします。

トップページの「Get version」ボタンを押下。

使いたい言語をチェック
(デフォルトでCommonが選択されてるので、変更しなかった)

Downloadボタンを押下。

→ ダウンロード完了!

サーバーに必要ファイル(js / css)をアップロード

FTPに接続して、2つのファイルをアップロードします。

FTPの接続については、過去記事「【LION MEDIA】検索アイコンを正しく(欠けずに)表示する方法」にて軽く紹介しています(FTPに接続して「icomoon.svg」をダウンロードする

zipを解凍して、中身を確認します。

必要ファイルはこの<2つ>
 ◇ スクリプトファイル(highlight.pack.js)
 ◇ スタイルファイル(xxxxx.css) ※xxxxxはスタイル名

スクリプトファイルは、入っていたファイルをそのまま使います。
スタイルファイルは「styles」フォルダから、自分の好きなスタイルのcssのみ抜粋です。

黒背景がいいので、「Hybrid」にしました

ファイルのアップロード(格納)先は、任意でよいのですが
次の工程で使用するのでどこかにメモっておきます。

とりあえず、わたしは迷った末
「wp-includes」フォルダの「js」「css」配下に、それぞれ「highlight-js」フォルダを作成して、その中に入れました。

→ アップロード完了!

WordPressの管理画面でカスタマイズ用コードを追加

カスタマイズ用コードは、2か所追加です。

 ①highlight.jsを適用する
 ②元のスタイルを無効にする

カスタマイズしたてのコードブロックで説明したいと思います!!

※カスタマイズ前に、必ずファイルのバックアップを取っておきましょう
※もし失敗してしまっても、ごめんなさい…責任取れませんのでご了承ください


①highlight.jsを適用する
外観 > テーマエディター > functions.php に以下のコードを追加

/* Syntax highlight */
if(!is_admin()){
  function load_highlightjs() {
    wp_enqueue_style( 'highlight_js_style', includes_url() . 'css/highlight-js/hybrid.css', array(), '10.0.3');
    wp_enqueue_script('highlight_js_script', includes_url() . 'js/highlight-js/highlight.pack.js', array(), '10.0.3', true);
  }
  add_action( 'wp_enqueue_scripts', 'load_highlightjs' );

  function init_highlightjs() {
    echo '<script>hljs.initHighlightingOnLoad();</script>';
  }
  add_action( 'wp_footer', 'init_highlightjs', 30 );
}

メモ
 is_admin():管理画面かどうかの判定
 wp_enqueue_style():スタイルの読み込み
 wp_enqueue_script():スクリプトの読み込み
 includes_url():「wp-includes」フォルダのパス
 wp_enqueue_scripts:ファイルを読み込みたいときに使う(?)
 wp_footer:ページの最後になんかしたいときに使う(?)

②元のスタイルを無効にする
外観 > カスタマイズ > 追加 CSS に以下のコードを追加

/* Syntax highlight */
.content .wp-block-code{
  padding:0px;
  border-left: none;
  font-size:1.8rem;
}

@media only screen and (max-width: 767px){
  .content .wp-block-code{
    padding:0px;
    font-size:1.4rem;
  }
}

メモ
 @media only screen and (max-width: 767px){
 :スマホ、タブレット用のcss(レスポンシブウェブデザイン)

<結果>シンタックスハイライトで見やすくなった

というわけで
LION MEDIAでプログラムのソースコードを綺麗に表示
することが出来ました!!

正直こんなに時間かかると思っていませんでしたw
(プラグイン使ってチャチャッと一発OKかと…)
(舐めすぎ)

まぁ多少フロントの勉強になった…かな…?

正直LION MEDIAけっこう融通きかないなって思うとこあって…
テーマの変更も検討しようかな…

[Eye catch image] Photo by Kim Heimbuch on Pixabay

IT / プログラミングカテゴリの最新記事