簡単!ルクセリタスのシンタックスハイライトの使い方とデザインサンプル

2019/7/12 追記
Ver.3.6.x~ がリリースされ、Ver.3.6.2以降、従来のシンタックスハイライター用ショートコードが廃止されました。

すでに登録済みのハイライター用ショートコードは、表示はされますがハイライトはされませんCopyボタンも表示されません

 

当サイトは、クラシックエディタ利用でルクセリタスのハイライターショートコードを使っていた為、シンタックスハイライター「Prism.js」と「Prism.css」をサーバーにアップロードして直接使用する事で対応しました。
ルクセリタスのリリース&改訂履歴まとめ★どのバージョンから何が変わったか
頻繁に更新して下さるテーマの為、ちょっと気づかないうちにいくつもリリースされていたりして、たまに「アップデート注意事項」があるリリースもあるので、一気に最新版にアップデートしていいものか迷った際の目安に、Ver,3.6.0以降の改訂履歴をま...

 

Ver3.6.1以前のルクセリタスでハイライターショートコードを使っていた方、またはVer3.6.2以降のルクセリタスでもブロックエディタを使わない方は以下を参考にして下さい。

簡単で軽量!プラグインなしでシンタックスハイライター「Prism.js」を利用する
シンタックスハイライトとは テキストエディタの機能で文字の一部をカラー表示したりハイライトする事で、プログラミング言語などの表示が見やすくなるものです。 ルクセリタスをお使いの方へ ルクセリタスのVer3.6.1以前までの機能にあったショー...

 

以下は、Ver.3.6.1までの使い方になります。

 

シンタックスハイライトとは、テキストエディタの機能で文字の一部をカラー表示したりハイライトする事で、プログラミング言語などの表示が見やすくなるものです。

シンタックスハイライト表示サンプル

 

当サイトはCSS等の記述も多いので、この機能を利用しています。

 


 

プラグインなら

 

ルクセリタスでは標準機能で、ショートコード対応が可能なのでプラグイン不要です。

 

通常はプラグインを利用します。有名なのは以下の3つあたりです。

  • APH Prism Syntax Highlighter
  • Crayon Syntax Highlighter
  • SyntaxHighlighter Evolved

 

上記の中でも軽量な「APH Prism Syntax Highlighter」とデザインが同じ(たぶん)になりますが、本家プラグインよりルクセリタスのショートコード対応の方が使いやすいです。

 

ルクセリタスなら、定型文サンプルから簡単にショートコード登録ができます。

同じく定型文サンプルからの利用が可能な吹き出し機能については以下をご覧ください。

ルクセリタスの吹き出し定型文の出し方とカスタマイズ
左右にキャラアイコンが出て、吹き出しの中でおしゃべりしているようなデザイン、よく見ますよね。 ルクセリタスにもその機能がありますので、使い方とカスタマイズ方法をご紹介します。 2019/7/28 追記 Luxeritas Ver.3.6.7...

 

ルクセリタスでシンタックスハイライト機能を使う

定型文サンプルからショートコードに登録

「Luxeritas」→「定型文登録」

 

サンプル登録(ショートコード)タブ

 

ショートコード対応言語と選択

以下の通り、26種類に対応

使うものにチェックを入れて選択します。

 

全てを選択し、ショートコード登録しても軽快に動作するそうですが、不要なショートコードが増えると使いにくいので、当サイトでは以下の4つにしています。

  • Markup ( HTML / XHTML )
  • CSS
  • JSON
  • PHP

「全選択」「全解除」の機能がありますが、

言語の選択は、もちろんいつでも変更可能です。使わないショートコードがたくさん出てしまうと、エディタで使う際に不便なので、必要最小限の選択をお勧めします。

 

選択したら「変更を保存」ボタンを押します。

 

 

ショートコード確認

 

選択した言語の数だけ、ショートコードが登録されています。

 

 

編集・削除・エクスポート

それぞれのショートコードを個別に編集や削除も可能です。

エクスポートも可能ですので、他のテーマに移植する事もできます。

 

ショートコードを使う

 

ビジュアルエディタで「ショートコード」ボタンを押します。

以下のように選択肢が出ますので、例では「CSS」を選択。

 

すると以下のようにショートコードが入ります。

[enclosing_shortcode][highlight_css]
[/highlight_css][/enclosing_shortcode]

 

[enclosing_shortcode][highlight_css]
この間にコード
[/highlight_css] 
[/enclosing_shortcode]

 

デザインサンプル

Luxeritas 定型文登録→「サンプル登録(ショートコード)」
CSS Theme からデザインの選択が可能です。

 

Default

Dark

Okaidia

Twilight

coy

Solarized Light

Tommrow Night

 

 

以上です!

 

綾糸: 綾糸 主婦 1990年代、汎用機時代のエンジニア 趣味で長くやっていたweb制作は、未だにエディタでの手コーティング 現在は自宅でゆるりとweb制作やライターをしています