Send by LINE
B! Bookmarks in Hate-bu
Bookmarks in Pocket
RSS feeds

JavaScript: Change the number of lines displayed in Prism.js

Other language site
No available translations found
Google Translate
JavaScript logo

How to change the display size of Prism.js with highlight display function such as source code. It is specified by CSS.

By default in Prism.js, all row numbers are displayed.

If it is about 20 lines, you can leave it as it is, but if it goes beyond that, it will be hard to see if it is displayed on a web page. Therefore, it is necessary to limit the number of display lines.

You can do this with CSS. Setting up CSS is very simple. The code is displayed below.

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

Prism.js often specifies language-*** in the class of the code tag. If you specify a language to use with the code tag, the created HTML adds language-*** to the class of the pre tag. We will use this to specify CSS.

Since there are times when the specification of Prism.js is changed in this part, you need to be careful when upgrading.

max-height controls the number of lines to be displayed, and overflow:auto displays vertical and horizontal scrolls.

Values specified by max-height do not have the same number of rows as they are when specified by em, rem. Since the size between lines is related, it depends on each environment. So, you need to make fine adjustments.

In my environment, 20 lines are displayed when horizontal scrolling is displayed at 32 em, and 21 lines are displayed when there is no horizontal scrolling.

Leave a Reply