プラグイン：Crayon Syntax Highlighterの削除と、それに伴うWPテーマLuxeritasの設定

2021年1月8日wordpress,Web開発

まずは方針を考える

WordPressテーマのLuxeritasはシンタックスハイライト(ソースコードのハイライト）を内蔵しています。私は今までプラグインCrayon Syntax Highlighterをシンタックスハイライトを実現していましたが、今やプラグインは更新されておらず動作も重かった為、今回テーマをLuxeritasに移行するついてに、シンタックスハイライトも変更する事に決めました。なおLuxeritasの開発者ルナ様のブログを読み込んでいくとprism.jsが組み込んである事がわかりました。Prism.jsは以下の様に<pre><code>タグにクラスや属性を追加して埋め込む必要があります。

<pre class="行数の表示設定等"><code class="language-言語">
</code></pre>

なお上記クラスや属性なしで<pre><code>だけを記述すると、Prism.jsのシンタックス・ハイライトは機能しません。つまり過去記事に記載したソースコードの<pre><code>を編集しなおす必要があり面倒です。それに漏れがあった時、そこだけハイライトされておらず恥ずかしいですよね。そこで以下のcssを追加し当面は誤魔化す方法とする事にしました。

pre {
    margin: 20px 0 30px 0;
    padding: 1em;
    color:          lightgray;
    background-color: #2d2d2d;
    border: 1px solid #ccc;
    border-radius:    0.5em;
}

上記のスタイルシートで<pre><code>を記載した例は以下の通りです。

$ sudo apt update
$ sudo apt upgrade
$ sudo apt install curl git libcurl4-openssl-dev make zlib1g-dev gawk g++ gcc libreadline6-dev libssl-dev libyaml-dev libsqlite3-dev sqlite3 autoconf libgdbm-dev libncurses5-dev automake libtool bison pkg-config ruby ruby-bundler ruby-dev -y
$ sudo gem install wpscan