Change the display size of Prism.js, a plugin to highlight the source code. It's very simple to work with and is specified in CSS, without touching any JavaScript.
This is written by a Japanese who can't speak English with the help of translation application. Sorry if it's not good.
Prism.js displays all line numbers. 20 lines or so is fine, but if it's longer than that, it's too long and tiring to read.
So, we fix the number of lines displayed in Prism.js and make it possible to scroll vertically to see the full text.
Don't worry, we won't change the JavaScript code. Everything is done with CSS.
The changes are simple. Just add the following four lines
pre[class*="language-"] > code{
max-height: 32em;
overflow: auto;
}Additional code description? If you don't know, you can just say 'that's how it is'.
In Prism.js, you can specify "language-***" in the HTML class. Specify the language type. (java, html, css, json…)
The final HTML code created by Prism.js will then add "language-***" to the class.
This is used to specify CSS.
The 'max-height' is the maximum number of lines to display. overflow: auto', showing scrolling as it increases in size.
This is the only work.
When specifying the max-height with em and rem, the value is not directly converted to the number of lines. Fine tuning is needed because of the size of the line spacing.
The font size in my environment is 16px. 20 lines at 32em.
This method is heavily influenced by the specifications of Prism.js. It may not work when upgrading plugins, so be careful.
In addition
In fact, you can also write the following in CSS.
pre > code{
max-height: 32em;
overflow: auto;
}However, I didn't introduce it because it covers all
and of HTML, not just Prism.js.
"HTML pre, code tags are all in Prism.js !" This is simpler for those who think that.
