All geek questions in one place

PrismJS: center selected lines vertically

PrismJS is a syntax shortcut for source code on web pages. It has a line-highlight plugin that selects specific lines in the source code. In particular, this plugin supports the determination of which lines to select from the hash (for example, it #play.5-6says to select lines from 5 to 6 elements <pre>with idof play).

For this hash, the plugin usesscrollIntoView() to make sure that the highlighted lines are visible:

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

( line-highlightadded here as a class to the strings)

However, it scrollIntoView()places the highlighted lines at the top. In my use case, it would be better for the selected lines to be vertically centered, assuming that the selected range is shorter than the available space.

What would I replace the above line so that the highlighted lines are vertically centered?

FWIW:

  • While I'm OK with CSS / JS, I'm not an expert

  • If that matters, my use case is to show this code in a widget WebViewin an Android app

+4
source share
2 answers

Here is a function that will center the selected lines when scrolling (assuming the scroll bar is in the element 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);
}

:

, scrollIntoView() pre .

...

  • preHeight > linesHeight - pre :
  • pre.scrollTop < (pre.scrollHeight - preHeight) - pre ( pre).

... pre . , pre.

, , :

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

, , , /, :

, 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);
  }
}
+3

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>
Hide result

div highlight .

0

Source: https://habr.com/ru/post/1627182/

More articles:


All Articles