ツイート
シェア
LINEで送る
B! はてぶでブックマーク
Pocketでブックマーク
RSSフィード

JavaScript Prism.js, 表示する行数を変更する

JavaScript image
イラストダウンロードサイト【イラストAC】
の画像をもとに加工しています。

ソースコードをハイライト表示するプラグイン、Prism.jsの表示サイズを変更します。作業はとてもかんたんです。CSSで指定します。JavaScriptはまったくいじりません。

ただ細かい微調整が必要で、たんに行の高さ ✕ 行数にすればいいというものではありません。

Prism.jsはすべての行数が表示されます。20行ぐらいならそれでもいいですが、それ以上になるとダラダラと長くなってしまいます。

そこで、Prism.jsの表示行数を固定して、タテのスクロールで全文を見れるようにします。

安心してください(昔のギャグじゃないです)。JavaScriptのコードは変更しません。すべてCSSで行います。

変更はかんたんです。次の4行を追加するだけです。

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

追加コードの解説をしますね?分からない人は『ふ~ん』程度でもいいです。

Prism.jsでは、HTMLの<code>のclassで"language-***"を指定します。言語の種類指定です(java, html, css, json...)。

すると、Prism.jsが作る最終的なHTMLのコードは、<pre>のclassに"language-***"を追加します。CSSの指定にはこれを利用します。

max-heightは、表示する行数の最大値です。overflow: autoで、サイズが大きくなるとスクロールを表示します。

作業はこれだけです。

max-heightをem、remで指定するとき、値がそのまま行数になりません。行間のサイズがあるので微調整が必要です。

ぼくの環境ではフォントサイズは16pxです。32emで20行表示します。

この方法は、Prism.jsの仕様に大きく影響されます。プラグインのバージョンアップのときは効かなくなることもあるので、気をつけましょう。

おまけ

じつは、CSSで次の書き方をしてもイケます。

追加CSS
pre > code{
    max-height: 32em;
    overflow: auto;
}

ただこれだと、Prism.jsだけでなくHTMLのすべての<pre>, <code>が対象になるので紹介しませんでした。

『HTMLのpre, codeタグはぜんぶPrism.jsでいくんだ!』という人はこちらの方がシンプルです。

前の投稿
JavaScript, Prism.jsをWebサイトに実装する

JavaScriptの本

post-cta-image

『自分は向いていない』『やってみたけど挫折した』『プログラマだけどjavaScriptは未経験』『フロントエンドエンジニアを目指したい』など、いろいろなタイプに合わせた書籍を集めました。

どうしてもネットで自分で調べるのが苦手という人におすすめです。

将来的には、書籍を買わずにネット上の公式ドキュメントで情報収集できるようなものを選んでいます。

コメントを残す

*