Is there a way to auto scroll the page to a particular line number of code, formatted using google code-prettify?

Question

I am writing a small application to display c++ code in the browser and using Google code-prettify for it. As a requirement, I have to scroll to a particular line number. After some searching, I found to select node, I can use the following snippet

#cd li:nth-child(<line>) {
    outline: 1px solid #f00;
}

What could be the way, to scroll to a particular line number?

I tried using the following code for the same, but position() is returning undefined

$('#cd').scrollTop($('#cd li:nth-child(<line>)').position().top)

<html>

  <head>
    <style>
      .prettyprint ol.linenums>li {
        list-style-type: decimal;
      }

      li.L0,
      li.L1,
      li.L2,
      li.L3,
      li.L4,
      li.L5,
      li.L6,
      li.L7,
      li.L9,
      li.L8 {
        background-color: #fdf6e3;
      }
    </style>
  </head>

  <body>
    <pre class="prettyprint linenums" id="cd">
      #ifndef _ABC_HPP</a>
      #define _ABC_HPP</a>
      #include &lt;myheader.h&gt;
      #endif
    </pre>
  </body>
  <script>
    $('#cd').scrollTop($('#cd li:nth-child(3)').position().top)
  </script>

</html>

I expect on load, the page should scroll to a given line number.

You could set the line-height via css and then scroll to line * line-height — Jackson Miller, Mar 25 '19 at 08:07
`scrollBy(x)` will scroll the page `x` pixels. If you set the CSS to `font-size: 12; line-height: 20`, you can scroll to the 10th line with `scrollBy(200)`. — Jackson Miller, Mar 25 '19 at 11:10
Would you like to add it as Answer? I tried the above method and with some glitches, it worked finally. Thanks for your comment. — varshneyabhi, Mar 26 '19 at 04:58

Is there a way to auto scroll the page to a particular line number of code, formatted using google code-prettify?

0 Answers0