如何在整个网站范围内和为单个代码块设置SyntaxHighlighter代码块的最大高度? [英] How to I set the max height of a SyntaxHighlighter code block both website-wide and for a single block of code?

问题描述

我想同时在本地和全局设置SyntaxHighlighter代码块的最大高度.

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:

一旦您实现了 SyntaxHighlighter 并可以运行

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>

(源).这会将代码大小限制为1024个垂直像素，然后添加一个垂直滚动条以查看其余部分.这很好，但是它不会设置 max 的高度，而是设置 fixed 的高度.因此，即使您的代码只有4行，现在它的高度也变为1024像素，在您的4行下以及下一个出现在帖子之前的空白处.

(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.

例如，下面的通知.这是我网站上的临时页面，网址为: http://www.electricrcaircraftguy.com/p/test-page_19.html .您会看到一长段代码，这很好，因为要显示> 1024个垂直像素，然后显示4行代码，然后是 ton 空白，然后是单词"end"表示帖子中下一个项目出现的位置.

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.

1. 我不需要所有的空白-我希望1024个像素成为最大高度而不是固定值，并且...
2. 我希望可以为单个代码块设置其他本地最大高度设置.例如:1024像素应该是我整个网站上的全局最大值，但是也许我想在某个帖子中使用350个像素来表示不同的代码块，然后再使用500个像素来表示下一个代码块，等等.

1. I don't want all that white space--I want 1024 pixels to be a maximum height not a fixed value, and...
2. 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.

推荐答案

使用CSS样式

最大高度

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

这篇关于如何在整个网站范围内和为单个代码块设置SyntaxHighlighter代码块的最大高度?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！