[Luxeritas]コードのハイライトをプラグイン無しで表示

どんなブログでも使いやすいLuxeritas。
技術系ブログを書く人も結構利用しているんじゃないでしょうか。

ちょっとしたコードを載せるときの機能もLuxeritasには標準で備わっています。

Luxeritas(ルクセリタス)のシンタックスハイライターとは

Luxeritasではv3.0以降で、Prime.jsが標準実装されています。
そしてLuxeritas用に最適化もされています(きっと)

一度使えばやり方わかるのですが、初めては分かりにくいので説明していきます。

Luxeritas(ルクセリタス)のシンタックスハイライターの使い方

ショートコードでシンタックスハイライターを設定

Luxeritas 定型文登録 WordPressのテーマカスタマイズするよのブログ WordPress

左サイドメニューバーより
Luxeritas > 定型文登録 をクリック

Luxeritas 定型文登録 wp custom WordPress

任意の言語とテーマを選んで更新
言語は全部選んでいても問題ないとのことですが、単純に自分が選択するときに見にくいので確実に使わないものは外しておくほうが良いです。

投稿で表示したいコードをショートコードで囲む

投稿の編集 wp custom WordPress

投稿にコードを貼り付けて、選択した状態でショートコードのアイコン(上の段の左から2番目です)を押すと、先程選んだ言語が出てくるので表示したい言語をクリック

投稿の編集 wp custom WordPress

するとこんな感じにで囲まれます。
これだけでコードが整形されて出力されます

テスト投稿 wp custom

ハイライト表示する際にクラシックエディタでの注意点

上記画像のようにショートコードのアイコンがあるのはクラシックエディタです。
クラシックエディタの表示の仕方はこちらの記事で参照ください。

リンク

記事を書いている時点での最新版Luxeritas v3.5.11ではまだクラシックエディタを使用しないとショートコードやブログカードなどのLuxeritas専用の便利な機能が使えません。

なので、必然的にまだクラシックエディタで書く必要があるのですが、クラシックエディタにコードをそのままコピペすると、divタグが入り込んでしまい思った表示になってくれませんでした。

テスト投稿 wp custom

なので、ペーストする時はCtrl + Shift + V (Windowsの場合)、またはCmd + Shift + V (Macの場合)をしてスタイルを継承しない形にしましょう。

きちんとできているかどうかは、html編集にしてみると分かります。(html編集は一番右の点々アイコンをクリックすると出てきます)

投稿の編集 wp custom WordPress

投稿の編集 wp custom WordPress

継承なしペーストが出来ていると、余計なものは表示されずに出力してくれます。

クラシックエディタでのハイライト表示におけるさらなる高み

これで万事解決のように見えますが、界隈にいるエンジニア達はきっと満足しません。なぜならタブは反映されてないからです。

テスト投稿 wp custom

全部左揃えになってますね。でも本当はタブでインデント(階層)がついてるんです。タブが2個だ、3個だ、いや4個だというので戦争になるくらいなのでこれはきっと怒られますw

というか自分も若干気持ち悪かったのでなんとかタイプ通りにならないか試行錯誤した末に表示できる方法にたどり着きました。結構面倒くさいので、タブ気にならないよーとか、1行しかないよーとか、タブ戦争になってもいいよーって人はこれより下は無視でいいです。

ビジュアルモードで表示したいコードのショートコードを出しpreタグで囲む

投稿の編集 wp custom WordPress

ショートコードだけ先に出します。
でここがポイントなのですが、そのショートコードをpreタグで囲みます。
(codeタグも試しましたがこちらでも出来ました。)

これによってblankやタブが消えたりといった症状が無くなります。

html編集モードでコードを普通のペーストで貼り付ける

投稿の編集 wp custom WordPress

HTMLとして編集をクリックするとpreタグに囲まれたショートコードが表示されるので、そのショートコード内に普通のペースト(Ctrl + V or Cmd + V)でコードを貼ります。

ビジュアルモードに戻して、後は普通どおりに書いて完了

Test wp custom

無事タグのインデントが表示されました。

まとめ

デフォルト機能でハイライトできるのはとても素晴らしいですが、現時点だと完璧なフォーマットを考えると手間は残ってます。

しかし頻繁にLuxeritasは頻繁にアップデートされてるので、いずれブロックエディタをメインで使える仕様に変わると思います。
クラシックエディタの間だけのハックだと思って耐えようと思いますw