{"id":4391,"date":"2017-10-06T13:00:34","date_gmt":"2017-10-06T04:00:34","guid":{"rendered":"https:\/\/tadtadya.com\/en\/?p=4391"},"modified":"2021-01-25T14:24:38","modified_gmt":"2021-01-25T05:24:38","slug":"change-the-number-of-lines-displayed-in-prism-js","status":"publish","type":"post","link":"https:\/\/tadtadya.com\/en\/change-the-number-of-lines-displayed-in-prism-js\/","title":{"rendered":"JavaScript Prism.js, Changing the number of lines to display"},"content":{"rendered":"\n<p>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.<\/p>\n\n\n\n<!--more-->\n\n\n\n<div class=\"wp-block-origin-block-msg-box\"><div class=\"msgbox msgbox-notice v1\"><i class=\"fas fa-exclamation-triangle icon\"><\/i><div class=\"msg\">\n<p>This is written by a Japanese who can't speak English with the help of translation application. Sorry if it's not good.<\/p>\n<\/div><\/div><\/div>\n\n\n\n<p>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.<\/p>\n\n\n\n<p>So, we fix the number of lines displayed in Prism.js and make it possible to scroll vertically to see the full text.<\/p>\n\n\n\n<p>Don't worry, we won't change the JavaScript code. Everything is done with CSS.<\/p>\n\n\n\n<p>The changes are simple. Just add the following four lines<\/p>\n\n\n\n<div class=\"pre-code-title\">Add CSS<\/div><pre class=\"line-numbers\"><code class=\"language-css\">pre[class*=\"language-\"] > code{\n    max-height: 32em;\n    overflow: auto;\n}<\/code><\/pre>\n\n\n\n<p>Additional code description? If you don't know, you can just say 'that's how it is'.<\/p>\n\n\n\n<p>In Prism.js, you can specify \"language-***\" in the HTML class. Specify the language type. (java, html, css, json\u2026)<\/p>\n\n\n\n<p>The final HTML code created by Prism.js will then add \"language-***\" to the class.<\/p>\n\n\n\n<p>This is used to specify CSS.<\/p>\n\n\n\n<p>The 'max-height' is the maximum number of lines to display. overflow: auto', showing scrolling as it increases in size.<\/p>\n\n\n\n<p>This is the only work.<\/p>\n\n\n\n<div class=\"wp-block-origin-block-em-box em-group em-group-point\">\n<p>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.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-origin-block-em-box em-group em-group-note\">\n<p>The font size in my environment is 16px. 20 lines at 32em.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-origin-block-msg-box\"><div class=\"msgbox msgbox-notice v1\"><i class=\"fas fa-exclamation-triangle icon\"><\/i><div class=\"msg\">\n<p>This method is heavily influenced by the specifications of Prism.js. It may not work when upgrading plugins, so be careful.<\/p>\n<\/div><\/div><\/div>\n\n\n\n<h2 class=\"is-style-h2df\">In addition<\/h2>\n\n\n\n<p>In fact, you can also write the following in CSS.<\/p>\n\n\n\n<div class=\"pre-code-title\">\u8ffd\u52a0CSS<\/div><pre class=\"line-numbers\"><code class=\"language-css\">pre > code{\n    max-height: 32em;\n    overflow: auto;\n}<\/code><\/pre>\n\n\n\n<p>However, I didn't introduce it because it covers all<br>and of HTML, not just Prism.js.<\/p>\n\n\n\n<p>\"HTML pre, code tags are all in Prism.js !\" This is simpler for those who think that.<\/p>\n\n<!-- WP QUADS Content Ad Plugin v. 2.0.65.1 -->\n<div class=\"quads-location quads-ad2\" id=\"quads-ad2\" style=\"float:none;margin:0px;\">\n<ul class=\"quads-location-ul\">\r\n<li class=\"quads-location-li li-1\">\r\n<script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script>\r\n<ins class=\"adsbygoogle\"\r\n     style=\"display:block\"\r\n     data-ad-client=\"ca-pub-4926008942376207\"\r\n     data-ad-slot=\"6550760310\"\r\n     data-ad-format=\"auto\"\r\n     data-full-width-responsive=\"true\"><\/ins>\r\n<script>\r\n     (adsbygoogle = window.adsbygoogle || []).push({});\r\n<\/script>\r\n<\/li>\r\n<li class=\"quads-location-li li-2\">\r\n<script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script>\r\n<ins class=\"adsbygoogle\"\r\n     style=\"display:block\"\r\n     data-ad-client=\"ca-pub-4926008942376207\"\r\n     data-ad-slot=\"6550760310\"\r\n     data-ad-format=\"auto\"\r\n     data-full-width-responsive=\"true\"><\/ins>\r\n<script>\r\n     (adsbygoogle = window.adsbygoogle || []).push({});\r\n<\/script>\r\n<\/li>\r\n<\/ul>\n<\/div>\n\n","protected":false},"excerpt":{"rendered":"<p>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.<\/p>\n","protected":false},"author":1,"featured_media":12732,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"jetpack_publicize_message":"Change the number of lines displayed in Prism.js\r\n#JavaScript #Js #PrismJs","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_options":[]},"categories":[9,43,158],"tags":[157,159],"jetpack_publicize_connections":[],"aioseo_notices":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/tadtadya.com\/en\/wp-content\/uploads\/sites\/2\/2018\/11\/javascript-1.png?fit=1280%2C671&ssl=1","jetpack_sharing_enabled":false,"jetpack_shortlink":"https:\/\/wp.me\/p8Qw77-18P","jetpack_likes_enabled":false,"_links":{"self":[{"href":"https:\/\/tadtadya.com\/en\/wp-json\/wp\/v2\/posts\/4391"}],"collection":[{"href":"https:\/\/tadtadya.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tadtadya.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tadtadya.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tadtadya.com\/en\/wp-json\/wp\/v2\/comments?post=4391"}],"version-history":[{"count":0,"href":"https:\/\/tadtadya.com\/en\/wp-json\/wp\/v2\/posts\/4391\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tadtadya.com\/en\/wp-json\/wp\/v2\/media\/12732"}],"wp:attachment":[{"href":"https:\/\/tadtadya.com\/en\/wp-json\/wp\/v2\/media?parent=4391"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tadtadya.com\/en\/wp-json\/wp\/v2\/categories?post=4391"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tadtadya.com\/en\/wp-json\/wp\/v2\/tags?post=4391"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}