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

  • -

    シェア
  • ---

    LINEで送る
  • -

    はてなブックマーク
    ブックマーク
  • -

    pocket
  • -

    rss
他言語サイト
us us
JavaScript image

ソースコードのハイライト機能をもつPrism.jsの表示サイズを変更します。作業はとても簡単でCSSで指定します。

Prism.jsのデフォルトではすべての行数が表示されます。

20行ぐらいであればそれでもよいですが、それ以上の行数になる場合Webページが冗長になります。そこで表示行数を制限する必要があります。

制限する方法はCSSで行います。CSSの設定は簡単です。以下にそのコードを表示します。

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

Prism.jsではcodeタグのclassでlanguage-***を指定します。codeタグで使用言語を指定すると、作成されるHTMLではpreタグのclassにlanguage-***が追加されます。これを利用してCSS指定を行います。

max-heightは表示する行数の制御を行い、overflow: autoで縦、横のスクロールを表示するようにしています。

max-heightをem、remで指定する場合そのまま値が行数になるわけではありません。行間のサイズが関係しているのですが、それぞれ環境によって異なるので微調整が必要です。

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

作業は以上です。

この方法は、Prism.jsの仕様に大きく影響されています。バージョンアップのときは気を付ける必要があります。
 
最近Webカテゴリでよく読まれている記事です。
post-cta-image
blog image

ドメイン取得の意味が分からない人へ。王道の方法を紹介します。

ドメインの登録業者を選ぶのに悩む必要はないです。サイトを簡単に早く公開するには全くいらないことで、むしろ邪魔です。『お名前.com』というサービスは必ず耳にします。そのお名前.comのメリットとデメリットと一緒に、ドメインの意味が分からない人が一番失敗しないドメインの取得方法を紹介します。

tadtadya.com

_

SNSでも記事を配信しています。
コメントを残す

*

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

この記事を気に入ったらぜひシェアも!!