当ブログはWordpressを採用していますが、Wordpressの更新をした折、使用していたブログテーマが古くなりすぎて表示がおかしくなったので新しくテーマを入れ替えました。
するとコードを記述している部分で使っていたプラグインも死んでしまったり、いろんなところに不具合が出ました。
環境
WordPress v5.8.1
とりあえずこのエントリーでは、シンタックスハイライターの再選定について記録しておきます。
新しく導入するシンタックスハイライターには以下2つの要件を求めました。
- 言語の種類を設定しなくても良い
- プラグインの独自のタグに依存しない
1 については、できるだけ簡単に貼り付けたいから
2 については、今後使っているシンタックスハイライターが廃れたとしても、すぐに代替品に交換できるように。
ということで今回はhighlight.jsを選びました。
highlight.js
https://highlightjs.org/
導入にはこちらを参考にさせていただきました。
WordPressでhighlight.jsを使う方法。 – DESIGN REMARKS [デザインリマークス]
https://design-remarks.com/highlight-to-wordpress/
それで、これだけではコードの行数が表示されないんですね。
行数が表示されないと部分的な説明をする時などに困るだろうな、ということで、探したら下記のソフトウェアを発見。
これでソースコードの行も表示できるようになりました。
wcoder/highlightjs-line-numbers.js: Line numbering plugin for Highlight.js
https://github.com/wcoder/highlightjs-line-numbers.js/
導入にはこちらを参考にさせていただきました。
highlight.jsに行番号を追加する方法 – kotonoha
さて、これで必要なファイルが揃ったので、Wordpressテーマ以下のcssディレクトリとjsディレクトリに必要なファイルを配置。
その後テーマのfunctions.phpに下記の通り追記しました。
// Load Highlight.js --------------------------------------------------------------------------------------
function library_scripts() {
wp_enqueue_script( 'js_highlight', get_template_directory_uri() . '/js/highlight.min.js', array());
wp_enqueue_script( 'js_highlight_numbers', get_template_directory_uri() . '/js/highlightjs-line-numbers.min.js', array());
}
add_action( 'wp_enqueue_scripts', 'library_scripts' );
これで、ソースコードの行表示が出来るようになったのですが、何もしない状態だとすごく見づらいです。
上のkotonohaブログさんのCSSを参考に、自分のみやすいように変更しました。
/* ******************** highlight.js -numbers ******************** */
.post_content pre {
border-left: 5px solid #56aabf;
margin-bottom: 27px;
line-height: 25px;
/* background: url(img/common/pre.gif) repeat left top; */
padding: 0;
overflow: auto;
}
/* for block of numbers */
td.hljs-ln-numbers {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
text-align: right;
color: #ccc;
border-right: 1px solid #CCC;
vertical-align: top;
padding-right: 5px;
color: #ccc;
background-color: none;
}
/* for block of code */
td.hljs-ln-code {
padding-left: 10px !important;
}
/* 枠線の削除 */
.hljs-ln {
margin-bottom: 0;
border: none;
}
.hljs-ln tr, .hljs-ln td {
border: none;
background: #23241f
}
/* 行番号 */
.hljs-ln-numbers {
font-family: inherit;
-webkit-touch-callout: none; /* スマホ等で長押しで表示されるポップアップメニューの非表示 */
-webkit-user-select: none; /* コードコピー時に行番号が除外されるようにする */
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
text-align: center;
color: #ccc; /* 行番号の色 */
vertical-align: top;
padding-right: 10px;
width: 2rem; /* 番号の幅 */
min-width: 2rem; /* 番号の最低幅 */
}
.hljs-ln-code.hljs-ln-line {
padding-left: 8px;
}
/* ******************** end of highlight.js -numbers ******************** */記事ページでhighlight.jsとhighlight.jsに番号をつけるソフトウェアを有効にしますが、その前にどういうスタイルにするか下記サイトより選べます。
最終的にscriptの動くページでこんな感じに実行します。
<link href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.2.0/styles/monokai-sublime.min.css" rel="stylesheet">
<script>hljs.initLineNumbersOnLoad();</script>
<script>hljs.initHighlightingOnLoad();</script>以上です。
functions.phpを扱う時の注意
ここからは余談になりますが、functions.phpを編集したあたりから、サイトの様子がおかしくなりました。
記事中の「変更をプレビュー」ボタンを押しても、プレビュー先の記事が表示されません。真っ白になります。
しかしブラウザのバックボタンを押すと記事編集画面に戻ってこれるし、記事の変更は適用されています。
どうなっているのだろうと思って、ブラウザの別タブを開いてWordpressにログインし直そうとしたところ、ログイン画面が表示されません。
本格的にぶっ壊れてるなーということで、Wordpressのインストールディレクトリのwp-config.php内のwp-settings.phpをrequireしている手前にdebugコマンドを埋め込みました。
/** Debug mode on */
define('WP_DEBUG', true);
/** Sets up WordPress vars and included files. */
require_once(ABSPATH . 'wp-settings.php');するとテーマのfunctions.phpのファイルの行末でWarningが出ていることがわかりました。
行末でWarningってどういうこと？と思いながら、行末に改行があることがわかったので、その改行を消すと、システムが元に戻りました。
いつの間にかファイル行末に改行を入れてしまったのだと思うのですが、行末の改行でシステムに影響が起こるとは思っていなかったので驚きましたね。
こういうケースもあるということで、今後Wordpressのファイルを扱う時には注意したいと思いました。
