plugin

WordPressの記事中にあるソースコードを綺麗に表現したい

アイキャッチ

WordPressでIT系のノウハウ・Tipsを備忘がてら記載しようとすると、どうしてもソースコードを記事中に書くことが多々あります。

黒背景に白or緑色の文字で表現するというのも元インフラ系技術者っぽくていいかと思いましたが、あまりにも野暮ったいサイトになってしまうのもいかがなものかと思いましたので

記事中でのコードの表現をVSCode等の今どきなオシャレエディター風な見た目になるようにWordPressをカスタマイズしてみました。

カスタマイズで目指す見栄え画像

最終的にVSCodeっぽい表現ができるようなることを目指します。
管理人
アタクシは2010年代の中盤くらいまで「秀丸」や「サクラエディタ」で開発したりしてました。
管理人
目次
  1. 前提、検証環境
  2. 『Enlighter – Customizable Syntax Highlighter』を利用する
  3. 『Enlighter – Customizable Syntax Highlighter』の設定を変更する
  4. まとめ

前提、検証環境

こちらの環境で検証しました

WordPress：6.3.2
テンプレート：AFFINGER6（ACTION）
エディター：classic

 

WordPressのプラグインを用いてのカスタマイズは、利用しているテンプレートによってはうまく使えなかったりすることがあります。

環境によっては本ページと同様の結果が得られないことがあることもありますのでご注意ください。

『Enlighter – Customizable Syntax Highlighter』を利用する

『Enlighter – Customizable Syntax Highlighter』はWordPressのプラグインです。

このプラグインは、WordPressの記事にコードを埋め込む際に、美しく・綺麗に強調表示をしてくれる機能があります。

インストール方法

WordPressの管理画面の「プラグイン」から「新規追加」にすすみ、「Enlighter – Customizable Syntax Highlighter」を検索します。

Customizable Syntax Highlighter検索結果画面

プラグインの追加

上図のような画面になりますので、「今すぐインストール」のボタンをクリックし、「有効化」します。

利用方法

WordPressの管理メニュー「投稿」から「新規追加」をクリックし、エディター（記事の編集）画面を表示します

Customizable Syntax Highlighter適用後のエディター画面

Classicエディター画面（抜粋）

 

上図赤枠で囲まれた｛｝（波括弧）の項目がエディターに追加されています。

注意ポイント

筆者はブロックエディター（Gutenberg）が受け付けない呪いに罹ってしまっております。

そのため、現在でもClassic Editorを愛用しています。
（上図はClassic Editorのものです）

もちろんGutenbergでも『Enlighter – Customizable Syntax Highlighter』は対応しており、同様に編集画面にボタン・機能が追加されますのでご安心ください。

エディターの｛｝（波括弧）部分をクリックする

コードを挿入する画面がポップアップ表示されます。

Customizable Syntax Highlighter実行画面

コード入力画面

 

【言語】の箇所にあるリストをプルダウンすると、『Enlighter – Customizable Syntax Highlighter』で対応しているPHP、Python等の言語がリストされますので、希望のものを選択します。

選択したら、上図下部にある大きな空白箇所に記事内で表現したいコードを記載し、OKボタンを押します。

結果

何も設定を変更していない、初期状態ではこのように表現されます。

Enlighterデザイン適用画面

それっぽい見た目になりました。

『Enlighter – Customizable Syntax Highlighter』の設定を変更する

初期状態でも「それっぽい」表示になりますが、筆者が希望している「黒っぽい背景」に変更する方法や、おすすめ設定を紹介します。

 

デザインを変更する

『Enlighter – Customizable Syntax Highlighter（ver 4.6.1）』では、13種類のテーマが用意されています。

表示されるデザインを変更する方法はWordPress管理画面「Enlighter」->「Appearance」タブに存在する「Thema」のプルダウンリストからお好みのものを選び、「変更を保存」ボタンを押すだけです。

Customizable Syntax Highlighterデザイン変更画面の画像

以下にデザイン名と、PHPソースを記載したときの適用パターンをまとめてみましたのでご確認ください。

Enlighter

Enlighterデザイン適用画面

Godzilla

Godzillaデザイン適用結果

Beyond

Beyondデザイン適用画面

Classic

Classicデザイン適用画像

MowTwo

MowTwoデザイン適用画像

Eclips

Eclipsデザイン適用画像

Droide

Droideデザイン適用画像

Minimal

Minimalデザイン適用画像

Atomic

Atomicデザイン適用画像

Rowhammer

Rowhammerデザイン適用画像

Bootstrap4

Bootstrap4デザイン適用画像

Dracula

Draculaデザイン適用画像

Monokai

Monokaiデザイン適用画像

おすすめ設定

筆者の好みによるところが大きいので、ご参考まで

ツールバーを常時表示させる

ツールバーはデフォルトではマウスホバー時に表示されるように設定されています。

個人的に筆者はマウスホバー時にチラチラ表示されるのは好きではありません。

また、スマホやタブレットなどで見たときとPCの挙動が異なるのも好きではないので、「マウスホバー系」は「常時表示」に切り替えてしまいます。

WordPressの管理メニュー「Enlighter」->「Toolbar」タブの「Visibility」箇所を「Show toolbar on mouseover」から「Always Show the toolbar」に変更し、「変更を保存」ボタンを押します。

Customizable Syntax Highlighterツールバーを常時表示に変更させる設定画面

ツールバーからEnlighterJS websiteに遷移させるボタンを消す

デフォルトの状態だとツールバー内に「EnlighterJS」というボタンが表示されています。

クリックするとGitHubのページに飛んでしまうので、ボタンが表示されないように設定を変更します。

WordPressの管理メニュー「Enlighter」->「Toolbar」タブの「EnlighterJS website button」箇所にあるスイッチをOFFに変更し、「変更を保存」ボタンを押します。

Customizable Syntax HighlighterツールバーEnlighterJS website buttonを表示させなくする設定画面

スマホが普及されるとともに使用されるようになった、「スイッチ」みたいな表現は未だに苦手です。

「ON」と「OFF」のラジオボタンの方がわかりやすいじゃないか！！

と思ってしまうお年頃です。

文字の折返しを停止し、スクロールバーを表示させる

エディターの折返しは真っ先に止める筆者なので、WordPress上でも同様に折り返しは停止し、スクロールバーで長い行を表現するように設定を変更します。

WordPress管理画面「Enlighter」->「Appearance」タブに存在する「Text overflow」のプルダウンリストから「Add scrollbar」を選択し、「変更を保存」ボタンを押します。

Customizable Syntax Highlighterでスクロールバー表示させる設定画面

マウスホバー時のハイライト表示を停止させる

行のハイライト表示は綺麗ですが、スマホでは全く表示されないため、ハイライト表示しないように設定を変更してしまいます。

WordPress管理画面「Enlighter」->「Appearance」タブに存在する「Line-hovereffect」箇所にあるスイッチをOFFに変更し、「変更を保存」ボタンを押します。

Customizable Syntax Highlighterでマウスホバー時のハイライト表示を停止する設定画面

最適化設定を行い、サイトが少しでも高速に表示されるようにする

サイトを運営していく上では「SEO対策」は必須です。

ページの表示スピードが少しでも早くなるような設定は積極的に実施するに越したことはありません！

WordPressの管理メニュー「Enlighter」->「Options」->「Resources」タブの「Optimization」箇所にある「Show toolbar on mouseover」から「Always Show the toolbar」に変更し、「変更を保存」ボタンを押します。

Customizable Syntax Highlighterの高速化設定画面

注意

※「Options」->「Resources」ページが長かったので、不要箇所の表示を削除してあります。

ここの設定を変更することで何が変わるかを以下の【補足】箇所に記載します。

興味がある方だけご確認ください。

【補足】

この設定がON状態だと、「Enlighter – Customizable Syntax Highlighter」を用いてコードを記載したページが表示された時のみEnlighterJSライブラリを読み込むようになります。

（その代わり、非常に軽量な監視・チェック用のjavascriptが全ページに追加されます）

 

まとめ

本ページの設定を行った結果、以下のように表示されるようになりました。

(筆者は”Monokai”のデザインテーマを使うことにしました）

PHP

<?php

namespace App\Providers;

use Illuminate\Auth\Events\Registered;
use Illuminate\Support\Facades\Event;

class EventServiceProvider extends ServiceProvider
{
    /**
     * The event to listener mappings for the application.
     *
     * @var array<class-string, array<int, class-string>>
     */
    protected $listen = [
        Registered::class => [
            SendEmailVerificationNotification::class,
        ],
    ];

    public function shouldDiscoverEvents(): bool
    {
        return false;
    }
}

html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="/css/style.css">
  <title>hogehoge</title>
</head>
<body>
    <div class="container">
    <h1>
        <span>テストページ</span>
        <a href="">[リンク]</a>
    </h1>
    <ul>
            <li>1111</li>
            <li>2222</li>
            <li>3333</li>
    </ul>
    <a href="https://www.google.co.jp/">Googleリンク</a>
    </div>
</body>
</html>

CSS

.container {
    width: 480px;
    margin: auto;
}

h1 {
    border-bottom: 1px solid;
    font-size: 18px;
    margin: 16px 0;
    padding-bottom: 8px;
    display: flex;
    align-items: center;
}

h1 > a {
    font-size: 16px;
    font-weight: normal;
    margin-left: auto;
}

h2 {
    font-size: 16px;
    margin-top: 40px;
}

li {
    line-height: 1.6;
    margin-bottom: 8px;
}

これでまた一歩「IT備忘録」っぽいサイトに近づけたかと思います！

-plugin
-