From b210b67aeb666ab0c0d40a62f2b90a5fc241b90b Mon Sep 17 00:00:00 2001
From: Erez Oxman <erez.oxman@gmail.com>
Date: Tue, 10 Nov 2020 09:03:41 +0200
Subject: [PATCH 1/3] Update highlightjs-line-numbers.js

Added "ready" event when line numbering task is complete
---
 src/highlightjs-line-numbers.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/highlightjs-line-numbers.js b/src/highlightjs-line-numbers.js
index a6c10e8..ba67a2d 100644
--- a/src/highlightjs-line-numbers.js
+++ b/src/highlightjs-line-numbers.js
@@ -178,6 +178,10 @@
 
         async(function () {
             element.innerHTML = lineNumbersInternal(element, options);
+
+            // event line numbering task complete
+            const event = new Event('ready');
+            element.dispatchEvent(event);
         });
     }
 

From d8abbbf3d3097b4b7fc2720d9c419ccf3fe6bef0 Mon Sep 17 00:00:00 2001
From: Erez Oxman <erez.oxman@gmail.com>
Date: Tue, 10 Nov 2020 11:48:54 +0200
Subject: [PATCH 2/3] Create example.js

Example for adding multi line coloring, click, and hashchange,
---
 samples/example.js | 111 +++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 111 insertions(+)
 create mode 100644 samples/example.js

diff --git a/samples/example.js b/samples/example.js
new file mode 100644
index 0000000..bc2cdb0
--- /dev/null
+++ b/samples/example.js
@@ -0,0 +1,111 @@
+$(function() {
+
+    function scrollToLineNumber(lineNumber) {
+        var selector = ".hljs-ln-line[data-line-number='" + lineNumber +  "']";
+        var element_to_scroll_to = document.querySelector(selector);
+        element_to_scroll_to.scrollIntoView();
+    }
+
+
+    function extractLineNumbersFromHash(){
+        var str = location.hash.substring(1);
+        var matches = str.match(/L\d+/g);              // Regex match multiple events (/g) of the regex "L" + number
+        if (matches.length == 0){
+            return {
+                first: null,
+                second: null,
+            };
+        }
+        else if(matches.length == 1){
+            return {
+                first: parseInt(matches[0].substring(1)),
+                second: null,
+            };
+        }
+        else{
+            return {
+                first: parseInt(matches[0].substring(1)),
+                second: parseInt(matches[1].substring(1)),
+            };
+        }
+    }
+
+
+    function colorLineNumbers(lineNumberBegin, lineNumberEnd){
+        // clean current highlighted lines first
+        var highlightedList = document.querySelectorAll(".hljs-ln-highlight");
+        var idx;
+        for (idx = 0; idx < highlightedList.length ; idx++) {
+            highlightedList[idx].classList.remove("hljs-ln-highlight");
+        }
+
+        if (!lineNumberBegin) return;
+        if (!lineNumberEnd) lineNumberEnd=lineNumberBegin;
+
+        var lineNumber;
+        for (lineNumber = lineNumberBegin; lineNumber < lineNumberEnd+1 ; lineNumber++) {
+            var selector = ".hljs-ln-code[data-line-number='" + lineNumber +  "']";
+            var element = document.querySelector(selector);
+            if (element){
+                element.classList.add('hljs-ln-highlight');
+            }
+        }
+    }
+
+
+    if (typeof hljs != "undefined")
+    {
+        /////////////////////////////
+        // classic highlight js
+        /////////////////////////////
+        hljs.configure({
+          languages: []
+        })
+        $('pre code').each(function(i, e) {hljs.highlightBlock(e)});
+
+
+
+
+        /////////////////////////////
+        // line numbers highlight js - activate only on class "do-hljs-ln"
+        /////////////////////////////
+        $('pre.do-hljs-ln code.hljs').each(function(i, block) {
+            hljs.lineNumbersBlock(block);
+        });
+
+
+        // Add multi line coloring, click, and hashchange,
+        // Assumes hash is similar to github format. Can be a range (#L35-L68) or single line(#L128).
+        var preList = document.querySelectorAll("pre.do-hljs-ln code.hljs");
+        var idx;
+        for (idx = 0; idx < preList.length ; idx++) {
+          preList[idx].addEventListener('ready', function(e) {
+
+            // scroll to hash
+            if (location.hash){
+                var res = extractLineNumbersFromHash();
+                scrollToLineNumber(res.first);
+                colorLineNumbers(res.first, res.second);
+                e.preventDefault();
+            }
+
+            // add event listener scroll to hash change
+            $(window).on('hashchange', function() {
+                var res = extractLineNumbersFromHash();
+                scrollToLineNumber(res.first);
+                colorLineNumbers(res.first, res.second);
+                e.preventDefault();
+            });
+
+            // add event listener scroll to click
+            $(".hljs-ln-n").click(function(){
+                var lineNumber = parseInt( $(this).attr('data-line-number'));
+                var new_path = window.location.pathname + window.location.search + '#L' + lineNumber;
+                history.replaceState(null, null, new_path);             // change hash without triggering hashchange event
+                colorLineNumbers(lineNumber, lineNumber)
+                e.preventDefault();
+            });
+          }, false);
+        };
+    }
+});

From dc918a2f8560c61b1bf9bee9eb17fe4148d8b631 Mon Sep 17 00:00:00 2001
From: Erez Oxman <erez.oxman@gmail.com>
Date: Tue, 10 Nov 2020 11:53:56 +0200
Subject: [PATCH 3/3] Create example.css

CSS additions for multi line coloring, click, and hashchange,
---
 samples/example.css | 8 ++++++++
 1 file changed, 8 insertions(+)
 create mode 100644 samples/example.css

diff --git a/samples/example.css b/samples/example.css
new file mode 100644
index 0000000..aa5d5f6
--- /dev/null
+++ b/samples/example.css
@@ -0,0 +1,8 @@
+.hljs-ln-highlight {
+    background: #FFFAE3;
+    width: 100%;
+}
+
+.hljs-ln-numbers:hover {
+  color: #2badd4;
+}