Prism.js max-heightを指定してoverflow:autoでスクロールバーを出す

記事作成日: 2023-10-27

長文のソースコードを記載するとページが長くなりすぎるので500pxを超える長文の場合はスクロールバーを出すようにしようとしましたがcodeタグ部分がインライン要素になっており高さ指定が効きません。

<pre class="language-js" tabindex="0">
<code class="language-js">

私のコードでは冗長ですがpreタグにもclass="language-"が付く仕様になっていたのでpreタグにmax-heightを設定することでscrollを実装できました。

pre[class^="language-"]{
	max-height: 500px;
}

なお､overflow:autoの設定はprism.cssのほうに書かれていたのでここでは記述していません｡

preタグにidやclassが設定しておらずタグを特定しづらい場合はpreタグをdivで囲んでdivにつけたid等でheightを指定すれば同じことができると思います｡