ソースコードをハイライト表示するプラグイン、Prism.jsの表示サイズを変更します。作業はとてもかんたんです。CSSで指定します。JavaScriptはまったくいじりません。
ただ細かい微調整が必要で、たんに行の高さ ✕ 行数にすればいいというものではありません。
Prism.jsはすべての行数が表示されます。20行ぐらいならそれでもいいですが、それ以上になるとダラダラと長くなってしまいます。
そこで、Prism.jsの表示行数を固定して、タテのスクロールで全文を見れるようにします。
安心してください（昔のギャグじゃないです）。JavaScriptのコードは変更しません。すべてCSSで行います。
変更はかんたんです。次の4行を追加するだけです。
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で次の書き方をしてもイケます。
pre > code{
max-height: 32em;
overflow: auto;
}ただこれだと、Prism.jsだけでなくHTMLのすべての<pre>, <code>が対象になるので紹介しませんでした。
『HTMLのpre, codeタグはぜんぶPrism.jsでいくんだ！』という人はこちらの方がシンプルです。
