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

  • ---

    LINEで送る
  • -

    ブックマーク
  • -

    pocket
  • -

    rss
他言語サイト
en_US en_US
JavaScript image
イラストACの画像をもとに加工しています。

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

ソースコードをハイライト表示するプラグインPrism.jsはすべての行数が表示されます。

20行ぐらいであればそれでもよいですが、それ以上の行数になるときWebページがダラダラと長くなってしまいます。

そこで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の本
post-cta-image

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

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

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


javaScriptの本4選

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

*

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

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