Javascript PrismJS：垂直居中高亮显示的线

是网页中源代码的语法高亮显示。它有一个插件，突出显示源代码中的某些行。特别是，该插件支持确定从散列中突出显示哪些行（例如，

#play.5-6

表示突出显示

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

（此处，
行突出显示
作为类添加到行中）

但是，
scrollIntoView（）
将突出显示的行放在顶部。在我的用例中，如果突出显示的行的范围小于可用空间，则最好将突出显示的行垂直居中

为了使高亮显示的线垂直居中，我将用什么替换上面的线

FWIW：


虽然我对CSS/JS还可以，但我不是专家

如果重要的话，我的用例是在Android应用程序中的
WebView
小部件中显示此代码

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


函数goToHighLight（选择器、容器）{
document.querySelector（selector.scrollIntoView（）；
var scroll=document.querySelector（container.clientHeight）；
变量半滚动=滚动/2；
var selector_h=document.querySelector（selector.clientHeight/2；
var-next=0；
$（选择器）.nextAll（）.each（函数（索引）{
next+=this.clientHeight；
});
var-prev=0；
$（选择器）.prevAll（）.each（函数（索引）{
prev+=这个.clientHeight；
});
如果（下一个

#容器{
宽度：250px；
高度：300px；
溢出y：自动；
溢出x：隐藏；
浮动：左；
}
傅先生{
宽度：250px；
高度：600px；
显示：块；
背景：灰色；
}
.酒吧{
宽度：250px；
高度：100px；
显示：块；
背景：黄色；
溢出：隐藏；
}
.亮点{
宽度：250px；
背景：绿色；
}
#钮扣{
浮动：左；
}

突出显示，突出显示，突出显示

突出显示，突出显示，突出显示

突出显示，突出显示，突出显示

突出显示，突出显示，突出显示

突出显示，突出显示，突出显示
我的同僚都是精英，我的同僚都是精英。
我的同僚都是精英，我的同僚都是精英。
highlight2，highlight2，highlight2

highlight2，highlight2，highlight2
我的同僚都是精英，我的同僚都是精英。
我的同僚都是精英，我的同僚都是精英。
highlight3，highlight3，highlight3

highlight3，highlight3，highlight3

highlight3，highlight3，highlight3
我的同僚都是精英，我的同僚都是精英。
我的同僚都是精英，我的同僚都是精英。
我的同僚都是精英，我的同僚都是精英。
我的同僚都是精英，我的同僚都是精英。
我的同僚都是精英，我的同僚都是精英。
我的同僚都是精英，我的同僚都是精英。
我的同僚都是精英，我的同僚都是精英。
我的同僚都是精英，我的同僚都是精英。
我的同僚都是精英，我的同僚都是精英。
我的同僚都是精英，我的同僚都是精英。
highlight4，highlight4，highlight4

highlight4，highlight4，highlight4

highlight4，highlight4，highlight4

highlight4，highlight4，highlight4

highlight4，highlight4，highlight4

highlight4，highlight4，highlight4

highlight4，highlight4，highlight4
我的同僚都是精英，我的同僚都是精英。
我的同僚都是精英，我的同僚都是精英。
highlight5，highlight5，highlight5

highlight5，highlight5，highlight5

highlight5，highlight5，highlight5

highlight5，highlight5，highlight5

highlight5，highlight5，highlight5

亮点1
亮点2
亮点3
亮点4
亮点5
这里有一个函数，在滚动时将突出显示的行居中（假设滚动条位于
pre
元素上）：

说明：

与前面一样，将调用，并将
pre
元素滚动到第一个高亮显示的行的顶部

如果这两个条件都成立


preHeight>linesHeight
-高亮显示范围的高度小于
pre
元素的高度和：

pre.scrollTop<（pre.scrollHeight-preHeight）
-元素未滚动到底部（即当前滚动位置小于可用的可滚动高度减去
pre
元素的高度）

…然后从当前滚动位置减去
pre
元素高度的一半，再加上高亮显示行高度的一半。这样做时，如果范围高度不超过
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);
  }
}

function applyHash() {
  // ...

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

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);
  }
}

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);
  }
}