ソースコードの表示に便利な prism だが、一つだけ不便な点がある。
そのままだと、ソースコードの全ての行を表示する大きさで表示してしまう。これだと、短い行数のソースコードの場合はいいが、長い場合はちと困る。
行番号表示の場合、記事中の <pre> タグの要素として class=”line-numbers” と書けば行番号が表示されるようになるが、どうやらソースコード表示枠に表示する行数そのものを指定する方法は無く、しかし、 css で max-height プロパティに em 単位で数値を指定することで、 font-size プロパティで指定されている高さに対する倍率として指定することでソースコード表示枠の高さを変更でき、結果的に表示行数をコントロールすることができると分かった。
参考にした「JavaScript Prism.js: 表示する行数を指定する」のように、 prism.css を、
pre[class*="language-"] > code{
max-height: 32em;
overflow: auto;
}
のように修正し max-height プロパティの値を指定しても確かに実現出来るのだが、これだと、そのサイトで表示される全てのソースコード表示枠の高さが固定になってしまうので具合が悪い。
そうではなく、記事中にソースコードを埋め込む際に挿入する <pre> タグに、
<pre class="line-numbers" styles="max-height: calc(16px*1.5*31);">
のようにして、 <pre> タグの要素としてスタイルシートを埋め込むことで、ソースコード枠ごとに好きな高さを設定することができる。（現在のバージョンの prism では、 <code> タグに対し、 mex-height: inherit; と指定されているため。）
ちなみに、１行の正確な高さを取得して、「その３１行分」のように max-height を指定できないか、いろいろ試してみた。行高さを指定するプロパティ line-height があるが、 css では、
<pre styles="max-height: calc(line-height*31);">
のような書き方は出来ないようだ。非常に不便だが、上の例のように、ソースコード枠を表示したい場所での行高さを、即値を用いた計算で（それでも calc が使えるだけマシか）求め指定するしかないようだ。（ css のこのあたりの不便さはなんとかならないものか。）
また、ソースコードが表示枠からはみ出る場合にスクロールバーを出すためには、 overflow: auto; が必要だが、現在のバージョンでは prism をダウンロードした状態で既にそのように設定されているようなので修正不要。