スポンサーリンク

【Luxeritas】シンタックスハイライターブロックの使い方

Luxeritas

Luxeritasでは以前はソースコードを表示させるためのシンタックスハイライター機能が定型文、ショートコードにありましたが、WordPressのエディタがブロックエディタに変更され、ブロックエディタに対応され、定型文、ショートコードでのシンタックスハイライター機能は廃止されました。

旧エディタではシンタックスハイライター機能は廃止されましたが、ブロックエディタには標準搭載されているので使い方を紹介します。

※旧エディタ、Luxeritas以外のテーマをお使いの方は以下の記事を参考にしてください。

スポンサーリンク

シンタックスハイライターブロック

Luxeritasの独自ブロックの中に「シンタックスハイライター」ブロックがあります。このブロックはLuxeritasに標準搭載されていてプラグインやjsを使わずに使うことができます。

投稿編集画面左上の+をクリックして「シンタックスハイライター」ブロックを選択し、記事に挿入します。

記事に挿入したら表示するコードを入力してください。

ブロックの設定(言語と行番号の設定)

シンタックスハイライターに表示する言語や行番号の表示/非表示の設定をします。

右上の歯車アイコンをクリックします。右側のブロック設定で表示する言語を選択します。行番号を非表示にする場合はオフにしてください。

シンタックスハイライターの設定(テーマの設定)

Luxeritasのシンタックスハイライターのテーマ(CSS)コードをを変更することができます。

Luxeritasのシンタックスハイライターは「Prism.js」を利用しているのでテーマ(CSS)はPrism.jsと同じです。

場所[Luxeritas][カスタマイズ][CSS]

WordPressの管理画面から[Luxeritas]→[カスタマイズ]と進みLuxeritasカスタマイザー画面を開きます。上にあるCSSタブをクリックすると少し下に「シンタックスハイライターのCSS」という項目があるので、テーマを選択してください。

最後に

今回はLuxeritasのシンタックスハイライター機能について書きました。

このLuxeritasの機能も以前紹介したPrism.jsを導入する方法もプラグインを使うより軽量です(*^^*)

旧エディタでは使えず、ブロックエディタでの機能ですがLuxeritasに標準搭載されているのですぐ使えてとても便利です。

きらり
きらり

旧エディタじゃ使えないんだね。

結耶
結耶

以前は定型文やショートコードで使えたけどね。廃止されちゃった。
だから旧エディタ使ってるときにPrism.jsを導入したんだ(^^;)
もしコードを表示したいときは使ってみてね。

応援よろしくお願いします。
      ブログランキング・にほんブログ村へ

お問い合わせはこちら
この記事を書いた人
結耶(ゆうや)

2017年9月からブログを始め、2018年1月にWordPressに変更しました。知識ゼロのから始めた超初心者で、WordPressやHTML、CSSなど勉強したことを書いています。
愛知県在住。多発性硬化症(MS)という難病と闘っています。

登場キャラクター
きらり
きらり

ある日ひょっこり現れ住みついた居候(いそうろう)。今は結耶と一緒にWordPressやアフィリエイトのことを勉強している。
性別は♂ 。どこから来たかは不明。

楽天ROOM