相互リンク詳細へ

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

2019-04-21使い方

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

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

 

当サイトは、クラシックエディタ利用でルクセリタスのハイライターショートコードを使っていた為、シンタックスハイライター「Prism.js」と「Prism.css」をサーバーにアップロードして直接使用する事で対応しました。

 

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

 

 

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

 

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

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

 

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

 

プラグインなら

 

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

 

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

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

 

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

 

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

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

 

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

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

 「Luxeritas」→「定型文登録」

6430_01

 

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

6430_02

 

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

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

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

6430_03

 

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

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

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

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

 

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

6430_05

 

 

ショートコード確認

 

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

 

6430_05

 

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

6430_16

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

6430_15

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

 

ショートコードを使う

 

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

6430_06

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

 

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

[highlight_css]
[/highlight_css]

 

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

 

デザインサンプル

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

6430_08

 

Default

6430_09

Dark

6430_10

Okaidia

6430_11

Twilight

6430_12

coy

6430_04

Solarized Light

6430_13

Tommrow Night

6430_14

 

 

以上です!

 

使い方

Posted by 綾糸