How to I set the max height of a SyntaxHighlighter code block both website-wide and for a single block of code?

问题

I'd like to both locally and globally set the max height of SyntaxHighlighter code blocks.

Here's an example of a global implementation that sort of works:

Once you get SyntaxHighlighter implemented and working per these instructions here, just before </head> in your Blogger template, add:

<style type="text/css">
  .syntaxhighlighter {
    height: 1024px;
    overflow-y: auto !important;
    overflow-x: auto !important;}
</style>

(Source). This will limit code size to 1024 vertical pixels, then add a vertical scrollbar to see the rest. This is great, but it does NOT set the max height, rather, it sets a fixed height. So, even if your code is only 4 lines long, it now makes the height 1024 pixels, pushing white space under your 4 lines and before the next thing appears on your post.

Notice below, for example. This is a temporary page on my website here: http://www.electricrcaircraftguy.com/p/test-page_19.html. You'll see a long block of code, which is fine, because it takes > 1024 vertical pixels to display, followed by 4 little lines of code, followed by a ton of white space, followed by the word "end" to indicate where the next item in the post appears.

I don't want all that white space--I want 1024 pixels to be a maximum height not a fixed value, and...
I want to have the option to set other, local max-height settings for individual code blocks. Ex: 1024 pixels should be a global maximum across my whole site, but maybe I want 350 pixels on a certain post for a different code block, followed by 500 pixels for the next code block, etc.

回答1:

use css style

max-height

.syntaxhighlighter {
    overflow-y: auto !important;
    overflow-x: auto !important;
    max-height: 1024px;
}

来源：https://stackoverflow.com/questions/40166519/how-to-i-set-the-max-height-of-a-syntaxhighlighter-code-block-both-website-wide

标签

javascript

css

syntax-highlighting

blogger

syntaxhighlighter