【クラシックエディタ対応】ルクセリタスのシンタックスハイライターの使い方

7月 28, 2019


ルクセリタスVer.3.6.2から、ブロックエディタ(Gutenberg)に『シンタックスハイライター用ブロック』が追加されました。
その一方、クラシックエディタ用のハイライターが廃止になりました。

しかし、諦めるのはまだ早いです。
クラシックエディタでもシンタックスハイライターは使えます!

おじさん
ハイライターを使うと腹いたー

うさぎ

シンタックスハイライターとは


シンタックスハイライター(Syntax Highlighter)とは、編集画面(エディター)でプログラミングコードに色を付けて、視覚的に分かりやすくする機能のことです。

WordPressでハイライト表示するには、プラグインやPrim.jsなどのプログラムの導入が必要です。
ところがルクセリタスはテーマの中にその機能が入っているので、コードをコピペするだけでハイライト表示できます。

おじさん
ハイライト表示すると、レベルが一段上がった気がします

シンタックスハイライターのコード

ルクセリタスのハイライターのコードはブロックエディタ(Gutenberg)で取得します。

ブロックエディタでコードを取得するときの注意

クラシックエディタを使っている方は、ブロックエディタに切り替えると記事の行間が消えてしまうことがあります。
なので、クラシックエディタは停止しないのが無難です。

コードの取得方法

下の画像のように、記事投稿画面の左上にある「ブロックの追加」 > 「Luxeritas Blocks」> 「シンタックスハイライター」の順にクリックしてください。

画面右の「設定」から、使用する言語を選択します。

言語を選択したら、編集モードをコードエディター(従来のテキストモード)に切り替えます。
切り替えは、右上の三点マークをクリックし、「コードエディター」を選択でおこないます。

すると、コードが表示されるので、これをコピペすればOKです。
<!– –>で囲まれた部分はコメント(但し書き)なので、不要なら削除しても大丈夫です。
コメント以外のHTMLとCSSのコードを記載しておきます。
HTML用コード

<pre class="wp-block-luxe-blocks-syntaxhighlighter line-numbers language-markup"><code class="language-markup">ここにコード</code></pre>

CSS用コード

<pre class="wp-block-luxe-blocks-syntaxhighlighter line-numbers language-css"><code class="language-css">ここにコード</code></pre>

ハイライターで使える言語

ハイライターは設定した言語と入力したコードが違っていると、ハイライトしません。

地味!
うさぎ

26の言語が使えるので、適切に言語を設定してください。

ASP.NET Apache Config Bash Basic C C# C++ CSS Clike Diff Git HTML/XHTML JASON Java JavaScript PHP PL/SQL Perl Pyton Ruby SQL Sass VB.NET Vim autoHotkey nginx
おじさん
恥ずかしながら95%知りません

シンタックスハイライターのデザイン一覧

シンタックスハイライターには8種類のデザインが用意されています。
設定は「Luxeritas カスタマイズ」 > 「CSS」でおこないます。

Default

Dark

Okaidia

Twilight

Coy

Solarized Light

Tomorrow Night


おじさん
なんだかんだ黒背景のほうがプログラマっぽいですな

ハイライターの縦スクロール

コードが長くなると、記事がコードに占領されて読みにくくなります。
そこで縦スクロールを導入して記事を読みやすくするのがオススメです。

以下のコードでハイライターに縦スクロールのスライドバーが表示されます。高さのmax-heightは、pxでもemでもOKです。
CSS

pre[class*="language-"] {
  max-height: 20em;
  overflow-y: scroll;
}

下の画像のように右にスクロールバーが表示されます。

まとめ

今回は、クラシックエディタでLuxeritasのシンタックスハイライターを使う方法を紹介しました。
バージョン3.6になってから廃止になったと、諦めていた方の参考になれば幸いです。

また、今回初めてブロックエディタを使ってみましたが、編集画面が広くてとても使いやすく感じました。
ブロックエディタが導入された初期の頃の評価は散々だったので、僕と同じように使ったことのない人も多いはず。
一度使ってみると、その良さを実感できると思います。

おじさん
僕も近々クラシックエディタを停止しようと思ってます

ルクセリタス関連記事一覧