PrismJS:垂直对高亮线

Question

PrismJS是网页中源代码的语法高亮符。它有一个线高光插件，突出了源代码中的某些行。特别是，该插件支持确定从散列突出显示哪些行(例如，#play.5-6说要用id of play突出显示<pre>元素的第5到第6行)。

对于该散列，scrollIntoView()确保突出显示的行是可见的：

document.querySelector('.temporary.line-highlight').scrollIntoView();

(在这里，line-highlight作为类添加到行中)

然而，scrollIntoView()将突出显示的线条放在顶部。在我的用例中，如果高亮显示的范围比可用的空间短，那么高亮显示的行最好是垂直居中的。

为了使这些突出显示的线垂直中心，我应该用什么来代替上面的线？

FWIW：

• 虽然我对CSS/JS没意见，但我不是专家
• 如果这很重要，我的用例是在Android应用程序中的WebView小部件中显示这段代码。

Answer 1

下面是一个函数，当滚动时(假设滚动条位于pre元素上)将突出显示的线条居中：

function scrollToLines (pre) {
  var lines = document.querySelector('.temporary.line-highlight'),
      linesHeight = lines.offsetHeight,
      preHeight = pre.offsetHeight;

  lines.scrollIntoView();

  if (preHeight > linesHeight && pre.scrollTop < (pre.scrollHeight - preHeight)) {
    pre.scrollTop = pre.scrollTop - (preHeight / 2) + (linesHeight / 2);
  }
}

只需在调用appyHash函数之后在highlightLines函数中调用该函数：

function applyHash() {
  // ...

  highlightLines(pre, range, 'temporary ');
  scrollToLines(pre);
}

解释：

和以前一样，调用方法并将pre元素滚动到第一个突出显示的行的顶部。

如果这两个条件都是真的..。

• preHeight > linesHeight -高亮区域的高度小于pre元素和的高度。
• pre.scrollTop < (pre.scrollHeight - preHeight) - pre元素没有滚动到底部(即当前滚动位置小于可用的可滚动高度减去pre元素的高度)。

...then从当前滚动位置减去pre元素的一半高度，并将突出显示的行的高度增加一半。在这样做时，如果范围的高度不超过pre元素的高度，则突出显示的行将垂直居中。

基本测试用例基于我在编写代码时使用的活动片段：

• #scroll.40-44，#scroll.107，#scroll.40-62，#scroll.4-6，#scroll.140-144

正如您在注释中指出的那样，这并不适用于您，因为滚动条实际上位于body元素上(而不是上面的pre元素)。

要解决这一问题，请更改逻辑，以便计算相对于body元素和窗口：

function scrollToLines () {
  var lines = document.querySelector('.temporary.line-highlight'),
      linesHeight = lines.offsetHeight,
      body = document.body,
      windowHeight = window.innerHeight;

  lines.scrollIntoView();

  if (windowHeight > linesHeight && body.scrollTop < (body.scrollHeight - windowHeight)) {
    body.scrollTop = body.scrollTop - (windowHeight / 2) + (linesHeight / 2);
  }
}

下面是一些基本的测试用例，说明当高亮显示的范围位于顶部/底部，或者高亮显示范围的高度超过窗口的高度时，它是有效的：

• #src.42-58，#src.2-9，#src.34-40，#src.15-80，#src.80-88

由于您可能不知道滚动条是在pre元素上还是在body上，所以可以先检查pre元素是否可以滚动，如果不是，则返回到相对于body元素的计算：

function scrollToLines (pre) {
  var lines = document.querySelector('.temporary.line-highlight'),
      linesHeight = lines.offsetHeight,
      pre = pre.scrollHeight > pre.clientHeight ? pre : document.body,
      preHeight = pre === document.body ? window.innerHeight : pre.offsetHeight;

  lines.scrollIntoView();

  if (preHeight > linesHeight && pre.scrollTop < (pre.scrollHeight - preHeight)) {
    pre.scrollTop = pre.scrollTop - (preHeight / 2) + (linesHeight / 2);
  }
}

Answer 2

如果使用jQuery可以的话，您可以使用以下内容：

​

function goToHighLight(selector, container){
    document.querySelector(selector).scrollIntoView();
    var scroll = document.querySelector(container).clientHeight ;
    var half_scroll = scroll/2;
    
    var selector_h = document.querySelector(selector).clientHeight/2;

    var next = 0;
    $(selector).nextAll().each(function( index ) {
      next += this.clientHeight;
    });

    var prev = 0;
    $(selector).prevAll().each(function( index ) {
      prev += this.clientHeight;
    });
    if(next < half_scroll){
      var diff = half_scroll-next-selector_h;
      $(container).children().last().css("margin-bottom",diff);
      var where_am_i = $(container).scrollTop();
      $(container).scrollTop(where_am_i+diff);
    }
    
    else if(prev < half_scroll){
      var diff = half_scroll-prev-selector_h;
      $(container).children().first().css("margin-top",diff);
      var where_am_i = $(container).scrollTop();
      $(container).scrollTop(where_am_i-diff);
    }
    else{
      var where_am_i = $(container).scrollTop();
      $(container).scrollTop(where_am_i-half_scroll+selector_h);
    }

}

goToHighLight("#highlight4", "#container");

$(".goH").click(function(){
    goToHighLight("#"+this.id,"#container");
});

#container{
  width:250px;
  height: 300px;
  overflow-y: auto;
  overflow-x: hidden;
  float:left;
}
.foo{
  width:250px;
  height: 600px;
  display:block;
  background:grey;
}
.bar{
  width:250px;
  height: 100px;
  display:block;
  background:yellow;
  overflow:hidden;
}
.highlight{
  width:250px;
  background:green;
}
#buttons{
  float:left;  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <div class="highlight" id="highlight1">
   highlight, highlight, highlight<br>
   highlight, highlight, highlight<br>
   highlight, highlight, highlight<br>
  highlight, highlight, highlight<br>
  highlight, highlight, highlight
  </div>
  <div class="bar">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br> Fusce dolor ante, luctus ut nibh in, ultrices eleifend elit. 
  </div>
   <div class="highlight" id="highlight2">
   highlight2, highlight2, highlight2<br>
   highlight2, highlight2, highlight2
  </div>
  <div class="bar">
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br> Fusce dolor ante, luctus ut nibh in, ultrices eleifend elit. 
  </div>
   <div class="highlight" id="highlight3">
   highlight3, highlight3, highlight3<br>
   highlight3, highlight3, highlight3<br>
   highlight3, highlight3, highlight3
  </div>
  <div class="foo">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br> Fusce dolor ante, luctus ut nibh in, ultrices eleifend elit. 
  </div>
  <div class="foo">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br> Fusce dolor ante, luctus ut nibh in, ultrices eleifend elit. 
  </div>
  <div class="foo">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br> Fusce dolor ante, luctus ut nibh in, ultrices eleifend elit. 
  </div>
  <div class="foo">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br> Fusce dolor ante, luctus ut nibh in, ultrices eleifend elit. 
  </div>
  <div class="foo">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br> Fusce dolor ante, luctus ut nibh in, ultrices eleifend elit. 
  </div>
  <div class="highlight" id="highlight4">
   highlight4, highlight4, highlight4<br>
   highlight4, highlight4, highlight4<br>
   highlight4, highlight4, highlight4<br>
  highlight4, highlight4, highlight4<br>
  highlight4, highlight4, highlight4<br>
  highlight4, highlight4, highlight4<br>
  highlight4, highlight4, highlight4
  </div>
  <div class="bar">
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br> Fusce dolor ante, luctus ut nibh in, ultrices eleifend elit. 
  </div>
  <div class="highlight" id="highlight5">
  highlight5, highlight5, highlight5<br>
  highlight5, highlight5, highlight5<br>
  highlight5, highlight5, highlight5<br>
  highlight5, highlight5, highlight5<br>
  highlight5, highlight5, highlight5<br>
  
  </div>
</div>
<div id="buttons">
  <button class="goH" id="highlight1">
    highlight1
  </button>
  <button class="goH" id="highlight2">
    highlight2
  </button>
  <button class="goH" id="highlight3">
    highlight3
  </button>
  <button class="goH" id="highlight4">
    highlight4
  </button>
  <button class="goH" id="highlight5">
    highlight5
  </button>
</div>

​

尝试将highlight div放置在不同的位置。