Allow setting an initial line-number.

The initial value at which the line-numbers will start can be set by
adding an inline style which sets the CSS variable
`--line-numbers-init` to that desired initial value.

Note:
This behavior now requires a modern browser, which supports CSS
variables.

Author: DenizThatMenace

README.md

@@ -51,6 +51,27 @@ print my_example_code(TRUE);
 </code></pre>
 ```
 
+### Starting line-numbers from other number than 1
+To make the line numbers start at a different number than 1, you can add an inline style to the &lt;code> element
+which sets the CSS variable `--line-numbers-init` to its initial value.
+
+```html
+<pre><code class="line-numbers" style="--line-numbers-init: 42">
+/**
+ * Example Code.
+ */
+function my_example_code($line_numbers = TRUE) {
+  $message = 'This example code does';
+  $message .= ($line_numbers ? '' : ' not');
+  $message .= ' have line numbers starting at 42.';
+
+  return $message;
+}
+
+print my_example_code(TRUE);
+</code></pre>
+```
+
 ### Highlighting line numbers.
 
 To highlight particular line numbers in a code block, add the attribute 'data-highlight-lines' to the &lt;code> element.

line-numbers.css

@@ -1,5 +1,5 @@
 code.line-numbers {
-  counter-reset: line_numbers;
+  counter-reset: line_numbers calc(var(--line-numbers-init, 1) - 1);
 }
 
 code span.line-number {

line-numbers.js

@@ -72,6 +72,9 @@ function addLineNumbers() {
         highlights = getLineNumberHighlights(line_numbers[l].getAttribute("data-highlight-lines"));
       }
 
+      // Determine the intial value of the line-numbers-counter.
+      var init_offset = getInitialLineNumberCounterValue(line_numbers[l]);
+
       // Get the content of the code block.
       var content = line_numbers[l].innerHTML;
       var classes = '';
@@ -85,7 +88,7 @@ function addLineNumbers() {
         // Add class 'line-number'.
         classes = 'line-number';
         // Should this line be highlighted?
-        if (highlights.indexOf(n+1) > -1) {
+        if (highlights.indexOf(n+1 + init_offset) > -1) {
           classes += ' highlight-line';
         }
         // Append line with line number span.
@@ -141,3 +144,20 @@ function getLineNumberHighlights(line_numbers) {
   // Return count of hightlight lines.
   return highlights;
 }
+
+// Determines the initial value of the line-numbers CSS-counter.
+function getInitialLineNumberCounterValue(block) {
+  var init_line_number = 0;
+
+  // Retrieve initial value from style.
+  var string_from_css = getComputedStyle(block, null).getPropertyValue('--line-numbers-init');
+  // Verify initial value.
+  if (typeof string_from_css == 'string') {
+    var initVal = parseInt(string_from_css);
+    if (! isNaN(initVal)) {
+      init_line_number = initVal - 1;
+    }
+  }
+
+  return init_line_number;
+}