HOME → 6 Luxeritas → 03 カスタマイズ → 

Luxeritas シンタックスハイライターの導入

Luxeritas(ルクセリタス)
シンタックスハイライターの導入
Prism.js
 
導入環境。
・WordPress:バージョン 5.8.2
・旧エディターを使用中
・Luxeritasバージョン:3.21.1.1
 
ブロックエディタを使用していれば、Luxeritasの独自ブロックの中に「シンタックスハイライター」ブロックがあるが、いまだに「Classic Editor」を使用しているため、プラグインを使用せず、軽量な「Prism.js」を使用することにした。
 
表示例
 
以下、Syntax Highlighter(シンタックス ハイライト)表示するための【JavaScriptライブラリ】である「Prism.js」を導入した記録。
 

 

スポンサー リンク

 

 
 
 
 
 
1. Prismのダウンロード
 
①.Prismのダウンロードページにアクセスし、「DOWNLOAD」をクリックする。
Prismのダウンロードページにアクセスし、「DOWNLOAD」をクリックする
 
②.左上の Minified version(軽量版)を選択し(Development versionは開発者向け)テーマを選択する。テーマ「Tomorrow Night」を選択すると、上部に〇で表示されているテーマの色がグレイから黄緑に変化する。
左上の Minified version(軽量版)を選択し(Development versionは開発者向け)テーマを選択する
 
テーマ名にはリンクが張られているので、クリックすると・・・。
テーマ名にはリンクが張られているので、クリックすると・・・
 
テーマの、見た目のサンプルが確認できる。
テーマの、見た目のサンプルが確認できる
 
③.少し下にスクロールして、シンタックスハイライトの対象にする「言語」を選択する。赤枠分は、デフォルトでチェックが入っている。
シンタックスハイライトする「言語」を選択する。赤枠分は、デフォルトでチェックが入っている。
 
言語はアルファベット順に並んでおり、V行に「VBA」がある。
言語はアルファベット順に並んでおり、V行に「VBA」がある
 
④.更に下にスクロールして、プラグイン=シンタックスハイライト表示される画面の「オプション機能」を選択する。
シンタックスハイライト表示される画面の「オプション機能」を選択する
 
⑤.最下部までスクロールし、「prism.js」と「prism.css」の双方をダウンロードする。
「prism.js」と「prism.css」の双方をダウンロードする
 
 
 
2. Prismの設置
 
フォルダーを作成し、ダウンロードした「prism.js」と「prism.css」をこの中に入れる。ここでは、フォルダー名を「prism」とした。
 
作成した「prism」フォルダーを、Luxeritasサイトの「wp-content」直下にアップロードする。
作成した「prism」フォルダーを、Luxeritasサイトの「wp-content」直下にアップロードする
 
Luxeritasの「子テーマの編集」を開き、「Head タグ」に下記コードを追記する。xxxxx は、ドメイン名で、アップロードした「prism」フォルダーへのパスを記述する。
<script src="https://xxxxx/wp-content/prism/prism.js"></script>
<link rel="stylesheet" href="https://xxxxx/wp-content/prism/prism.css">
Luxeritasの「子テーマの編集」を開き、「Head タグ」に下記コードを追記する
 

テーマを変更したい場合は、
方法-1:アップロードする「prism-xx」フォルダーを幾つか作成し、「Head タグ」に記述する「prism-xx」フォルダーへのパスを変更する事で対応する。

方法-2:アップロードフォルダーは「prism」に固定して置き、アップロードした【js】と【css】ファイルの名前を変更する事で対応する。
アップロードフォルダーは「prism」に固定して置き、アップロードした【js】と【css】ファイルの名前を変更する事で対応する

 
 
 
3. Prismの使い方
 
Prism でのハイライト方法。
<pre><code class="language-言語名">~
~
~</code></pre>
vba での表示例。
<pre><code class="language-vba">
表示例
 
行番号を表示。
<pre class="line-numbers"><code class="language-言語名">~
~
~</code></pre>
行番号を表示した例。
行番号を表示した例
 
指定した行の色を変える。
<pre class="line-numbers" data-line="3-4"><code class="language-言語名">~
~
~</code></pre>
指定した行の色を変えた例。指定した行の背景色が濃くなっている。
指定した行の色を変えた例
 
data-line="3,7-10,18-20" などと指定すれば、3行目、7~10行目、18~20行目の色を変えられる。
 
言語名の表示。
<pre class="line-numbers"><code class="language-言語名" data-language="言語名">~
~
~</code></pre>
言語名を表示した例。右上に言語名が表示される。
言語名を表示した例
 
 
以上。
(2021.12.19)
 

 

スポンサー リンク

 

             

 

 

 

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください