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