お問い合わせはコチラから

Luxeritas シンタックスハイライター有効化とソースの表示行数の指定【Prim.jsカスタマイズ】

サイト運営

無料の高機能高速Wordpressテーマ Luxeritas v3からPrim.jsがシンタックスハイライターとして組み込まれました。

使ってみると、シンタックスハイライターはとても便利です。

Luxeritas シンタックスハイライターの有効化

Luxeritasのシンタックスハイライターはショートコードで呼び出します。

まず、Luxeritas専用のショートコードを有効化しないと使えません。

Luxeritas専用ショートコードの有効化

ダッシュボードで、Luxeritas⇒定型文登録 と進みます。

サンプル登録 ( ショートコード )というタブを選ぶと、

ショートコード ( Luxeritas 専用 )という見出しがついたエリアがありますので、そこで必要な言語を選択して登録すれば、ひとまずOK。

Luxeritas専用ショートコードの呼び出し

その後、ビジュアルエディタで、ショートコードを呼び出せば、シンタックスハイライターのショートコードが選択できると思います。

ショートコードの名前はわかっているので、別にLuxeritasのエディタでショートコードを呼び出して挿入しなくても、他の方法でも結果は同じです。

ちょっとした問題

長いソースを表示させると記事がソースで埋まってしまうので、表示行数を指定する方法はないものかと、頭を悩ませていました。

ソースコードを適当に編集して行数を減らせばよさそうなものですが、コピペできるようにしたいのと、その作業が面倒なので、表示行数そのものを制限する方が生産的?です。

Luxeritasのテーマ設定にはシンタックスハイライターの表示行数を指定する機能はなさそう。

Prim.jsとして表示行数を指定するにはどうしたらよいのか?

備忘録用にメモしておきます。

参考サイトhttps://tadtadya.com/change-the-number-of-lines-displayed-in-prism-js/

pre[class*="language-"] > code{
max-height: 32em;
overflow: auto;
}

これをstyle.cssに追加すると、ある程度以上の行数になるとスクロールバーが表示されるようになります。

行数の変更はmax-heightを適当に増減させて調整します。

見本https://nldot.info/tiny-mce-visual-style-extension-like-cocoon/

まとめ

ピンポイント困ってる人以外には何のことやらわからん手抜き記事になっていますが、Luxeritasのシンタックスハイライター(Prim.js)の表示行数の指定はテーマからは行えず、記事で紹介したCSSで指定する必要があります。

Luxeritasのシンタックスハイライターの導入も画像もない説明で初心者にはわけわからんと思いますが、その辺の記事は別途Google検索していただければ、Luxeritasの導入記事が沢山見つかると思います。Luxeritasは基本的な使い方の説明の記事を書かれているサイトが沢山あるので本家のサイト以外で見つかったりします。

 

タイトルとURLをコピーしました