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

  • ---

    LINEで送る
  • -

    ブックマーク
  • -

    pocket
  • -

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

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

Prism.jsはすべての行数が表示されます。20行ぐらいならそれでもいいですが、それ以上になるとダラダラと長くなってしまいます。

そこで、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
この記事を気に入ったらぜひシェアも!!