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」をクリックする
 
テーマを選択する。今回は、「Tomorrow Night」を選択して見る。
テーマを選択する。今回は、「Tomorrow Night」を選択して見る
 
シンタックスハイライトする「言語」を選択する。赤枠分は、デフォルトでチェックが入っている。
シンタックスハイライトする「言語」を選択する。赤枠分は、デフォルトでチェックが入っている。
 
シンタックスハイライト表示される画面の「オプション機能」を選択する。
シンタックスハイライト表示される画面の「オプション機能」を選択する
 
「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 タグ」に下記コードを追記する。
<script src="https://xxxxx/wp-content/prism/prism.js"></script>
<link rel="stylesheet" href="https://xxxxx/wp-content/prism/prism.css">
Luxeritasの「子テーマの編集」を開き、「Head タグ」に下記コードを追記する
 
 
 
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 を使っています。コメントデータの処理方法の詳細はこちらをご覧ください