Bug Fixes & refactoring

.editorconfig

@@ -0,0 +1,9 @@
+
+root = true
+
+[*]
+end_of_line = lf
+insert_final_newline = true
+charset = utf-8
+indent_style = space
+indent_size = 4

README.md

@@ -1,4 +1,4 @@
-# highlightjs-line-numbers.js [![version](http://img.shields.io/badge/release-v2.1.0-brightgreen.svg?style=flat)](https://github.com/wcoder/highlightjs-line-numbers.js/archive/master.zip)
+# highlightjs-line-numbers.js [![version](http://img.shields.io/badge/release-v2.2.0-brightgreen.svg?style=flat)](https://github.com/wcoder/highlightjs-line-numbers.js/archive/master.zip)
 
 Highlight.js line numbers plugin.
 
@@ -18,7 +18,7 @@ npm install highlightjs-line-numbers.js
 
 #### Getting the library from CDN
 ```html
-<script src="//cdnjs.cloudflare.com/ajax/libs/highlightjs-line-numbers.js/2.1.0/highlightjs-line-numbers.min.js"></script>
+<script src="//cdnjs.cloudflare.com/ajax/libs/highlightjs-line-numbers.js/2.2.0/highlightjs-line-numbers.min.js"></script>
 ```
 
 ## Usage

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "highlightjs-line-numbers.js",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "homepage": "https://github.com/wcoder/highlightjs-line-numbers.js",
   "authors": [
     "Yauheni Pakala <evgeniy.pakalo@gmail.com>"

gulpfile.js

@@ -4,11 +4,11 @@ var rename = require("gulp-rename");
 var replace = require('gulp-replace');
 
 gulp.task('build', function() {
-	return gulp.src('src/*.js')
-		.pipe(uglify())
-		.pipe(replace('\\t', ''))
-		.pipe(rename({
-			extname: '.min.js'
-		}))
-		.pipe(gulp.dest('dist'));
-});
+    return gulp.src('src/*.js')
+        .pipe(uglify())
+        .pipe(replace('    ', ''))
+        .pipe(rename({
+            extname: '.min.js'
+        }))
+        .pipe(gulp.dest('dist'));
+});

package.json

@@ -1,6 +1,6 @@
 {
   "name": "highlightjs-line-numbers.js",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "description": "Highlight.js line numbers plugin.",
   "main": "src/highlightjs-line-numbers.js",
   "dependencies": {},

src/highlightjs-line-numbers.js

@@ -1,113 +1,177 @@
+// jshint multistr:true
+
 (function (w, d) {
-	'use strict';
-
-	var TABLE_NAME = 'hljs-ln',
-	    LINE_NAME = 'hljs-ln-line',
-	    CODE_BLOCK_NAME = 'hljs-ln-code',
-	    NUMBERS_BLOCK_NAME = 'hljs-ln-numbers',
-	    NUMBER_LINE_NAME = 'hljs-ln-n',
-		DATA_ATTR_NAME = 'data-line-number';
-
-	// string format
-	// https://wcoder.github.io/notes/string-format-for-string-formating-in-javascript
-	var format = function (str, args) {
-		return str.replace(/\{(\d+)\}/g, function(m, n){
-			return args[n] ? args[n] : m;
-		});
-	};
-
-	if (w.hljs) {
-		w.hljs.initLineNumbersOnLoad = initLineNumbersOnLoad;
-		w.hljs.lineNumbersBlock = lineNumbersBlock;
-
-		addStyles();
-	} else {
-		w.console.error('highlight.js not detected!');
-	}
-
-	function addStyles () {
-		var css = d.createElement('style');
-		css.type = 'text/css';
-		css.innerHTML = format(
-			'.{0}{border-collapse:collapse}\
-			.{0} td{padding:0}\
-			.{1}:before{content:attr({2})}',
-		[
-			TABLE_NAME,
-			NUMBER_LINE_NAME,
-			DATA_ATTR_NAME
-		]);
-		d.getElementsByTagName('head')[0].appendChild(css);
-	}
-
-	function initLineNumbersOnLoad (options) {
-		if (d.readyState === 'complete') {
-			documentReady(options);
-		} else {
-			w.addEventListener('DOMContentLoaded', function () {
-				documentReady(options);
-			});
-		}
-	}
-
-	function documentReady (options) {
-		try {
-			var blocks = d.querySelectorAll('code.hljs');
-
-			for (var i in blocks) {
-				if (blocks.hasOwnProperty(i)) {
-					lineNumbersBlock(blocks[i], options);
-				}
-			}
-		} catch (e) {
-			w.console.error('LineNumbers error: ', e);
-		}
-	}
-
-	function lineNumbersBlock (element, options) {
-		if (typeof element !== 'object') return;
-
-		// define options or set default
-		options = options || {
-			singleLine: false
-		};
-
-		// convert options
-		var firstLineIndex = !!options.singleLine ? 0 : 1;
-
-		var lines = getLines(element.innerHTML);
-
-		if (lines.length > firstLineIndex) {
-			var html = '';
-
-			for (var i = 0, l = lines.length; i < l; i++) {
-				html += format(
-					'<tr>\
-						<td class="{0}">\
-							<div class="{1} {2}" {3}="{5}"></div>\
-						</td>\
-						<td class="{4}">\
-							<div class="{1}">{6}</div>\
-						</td>\
-					</tr>',
-				[
-					NUMBERS_BLOCK_NAME,
-					LINE_NAME,
-					NUMBER_LINE_NAME,
-					DATA_ATTR_NAME,
-					CODE_BLOCK_NAME,
-					i + 1,
-					lines[i].length > 0 ? lines[i] : ' '
-				]);
-			}
-
-			element.innerHTML = format('<table class="{0}">{1}</table>', [ TABLE_NAME, html ]);
-		}
-	}
-
-	function getLines(text) {
-		if (text.length === 0) return [];
-		return text.split(/\r\n|\r|\n/g);
-	}
-
-}(window, document));
+    'use strict';
+
+    var TABLE_NAME = 'hljs-ln',
+        LINE_NAME = 'hljs-ln-line',
+        CODE_BLOCK_NAME = 'hljs-ln-code',
+        NUMBERS_BLOCK_NAME = 'hljs-ln-numbers',
+        NUMBER_LINE_NAME = 'hljs-ln-n',
+        DATA_ATTR_NAME = 'data-line-number',
+        BREAK_LINE_REGEXP = /\r\n|\r|\n/g;
+
+    if (w.hljs) {
+        w.hljs.initLineNumbersOnLoad = initLineNumbersOnLoad;
+        w.hljs.lineNumbersBlock = lineNumbersBlock;
+
+        addStyles();
+    } else {
+        w.console.error('highlight.js not detected!');
+    }
+
+    function addStyles () {
+        var css = d.createElement('style');
+        css.type = 'text/css';
+        css.innerHTML = format(
+            '.{0}{border-collapse:collapse}\
+            .{0} td{padding:0}\
+            .{1}:before{content:attr({2})}',
+        [
+            TABLE_NAME,
+            NUMBER_LINE_NAME,
+            DATA_ATTR_NAME
+        ]);
+        d.getElementsByTagName('head')[0].appendChild(css);
+    }
+
+    function initLineNumbersOnLoad (options) {
+        if (d.readyState === 'complete') {
+            documentReady(options);
+        } else {
+            w.addEventListener('DOMContentLoaded', function () {
+                documentReady(options);
+            });
+        }
+    }
+
+    function documentReady (options) {
+        try {
+            var blocks = d.querySelectorAll('code.hljs');
+
+            for (var i in blocks) {
+                if (blocks.hasOwnProperty(i)) {
+                    lineNumbersBlock(blocks[i], options);
+                }
+            }
+        } catch (e) {
+            w.console.error('LineNumbers error: ', e);
+        }
+    }
+
+    function lineNumbersBlock (element, options) {
+        if (typeof element !== 'object') return;
+
+        // define options or set default
+        options = options || {
+            singleLine: false
+        };
+
+        // convert options
+        var firstLineIndex = !!options.singleLine ? 0 : 1;
+
+        async(function () {
+
+            duplicateMultilineNodes(element);
+
+            element.innerHTML = addLineNumbersBlockFor(element.innerHTML, firstLineIndex);
+        });
+    }
+
+    function addLineNumbersBlockFor (inputHtml, firstLineIndex) {
+
+        var lines = getLines(inputHtml);
+
+        if (lines.length > firstLineIndex) {
+            var html = '';
+
+            for (var i = 0, l = lines.length; i < l; i++) {
+                html += format(
+                    '<tr>\
+                        <td class="{0}">\
+                            <div class="{1} {2}" {3}="{5}"></div>\
+                        </td>\
+                        <td class="{4}">\
+                            <div class="{1}">{6}</div>\
+                        </td>\
+                    </tr>',
+                [
+                    NUMBERS_BLOCK_NAME,
+                    LINE_NAME,
+                    NUMBER_LINE_NAME,
+                    DATA_ATTR_NAME,
+                    CODE_BLOCK_NAME,
+                    i + 1,
+                    lines[i].length > 0 ? lines[i] : ' '
+                ]);
+            }
+
+            return format('<table class="{0}">{1}</table>', [ TABLE_NAME, html ]);
+        }
+
+        return inputHtml;
+    }
+
+    /**
+     * Recursive method for fix multi-line elements implementation in highlight.js
+     * Doing deep passage on child nodes.
+     * @param {HTMLElement} element
+     */
+    function duplicateMultilineNodes (element) {
+        var nodes = element.childNodes;
+        for (var node in nodes){
+            if (nodes.hasOwnProperty(node)) {
+                var child = nodes[node];
+                if (getLinesCount(child.textContent) > 0) {
+                    if (child.childNodes.length > 0) {
+                        duplicateMultilineNodes(child);
+                    } else {
+                        duplicateMultilineNode(child);
+                    }
+                }
+            }
+        }
+    }
+
+    /**
+     * Method for fix multi-line elements implementation in highlight.js
+     * @param {HTMLElement} element
+     */
+    function duplicateMultilineNode (element) {
+        var className = element.parentNode.className;
+
+        if ( ! /hljs-/.test(className)) return;
+
+        var lines = getLines(element.textContent);
+
+        for (var i = 0, result = ''; i < lines.length; i++) {
+            result += format('<span class="{0}">{1}</span>\n', [ className, lines[i] ]);
+        }
+        element.parentNode.innerHTML = result.trim();
+    }
+
+    function getLines (text) {
+        if (text.length === 0) return [];
+        return text.split(BREAK_LINE_REGEXP);
+    }
+
+    function getLinesCount (text) {
+        return (text.trim().match(BREAK_LINE_REGEXP) || []).length;
+    }
+
+    function async (func) {
+        w.setTimeout(func, 0);
+    }
+
+    /**
+     * {@link https://wcoder.github.io/notes/string-format-for-string-formating-in-javascript}
+     * @param {string} format
+     * @param {array} args
+     */
+    function format (format, args) {
+        return format.replace(/\{(\d+)\}/g, function(m, n){
+            return args[n] ? args[n] : m;
+        });
+    }
+
+}(window, document));