Merge branch 'v2'

Author: wcoder

LICENSE

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2015 Yauheni Pakala
+Copyright (c) 2017 Yauheni Pakala
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -1,4 +1,4 @@
-# highlightjs-line-numbers.js [![version](http://img.shields.io/badge/release-v1.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.0.0-brightgreen.svg?style=flat)](https://github.com/wcoder/highlightjs-line-numbers.js/archive/master.zip)
 
 Highlight.js line numbers plugin.
 
@@ -25,21 +25,6 @@ Download plugin and include file after highlight.js:
 <script src="path/to/highlightjs-line-numbers.min.js"></script>
 ```
 
-Adding styles:
-```css
-.hljs-line-numbers {
-	text-align: right;
-	border-right: 1px solid #ccc;
-	color: #999;
-	-webkit-touch-callout: none;
-	-webkit-user-select: none;
-	-khtml-user-select: none;
-	-moz-user-select: none;
-	-ms-user-select: none;
-	user-select: none;
-}
-```
-
 Initialize plugin after highlight.js:
 ```js
 hljs.initHighlightingOnLoad();
@@ -56,5 +41,31 @@ $(document).ready(function() {
 });
 ```
 
+If your needs cool style, add styles by taste:
+```css
+/* for block of numbers */
+td.hljs-ln-numbers {
+	-webkit-touch-callout: none;
+	-webkit-user-select: none;
+	-khtml-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+
+	text-align: center;
+	color: #ccc;
+	border-right: 1px solid #CCC;
+	vertical-align: top;
+	padding-right: 5px;
+
+	/* your custom style here */
+}
+
+/* for block of code */
+td.hljs-ln-code {
+	padding-left: 10px;
+}
+```
+
 ---
-&copy; 2015 Yauheni Pakala | MIT License
+&copy; 2017 Yauheni Pakala | MIT License

bower.json

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

dist/highlightjs-line-numbers.min.js

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

package.json

@@ -1,11 +1,37 @@
 (function (w) {
 	'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';
+
+	// https://wcoder.github.io/notes/string-format-for-string-formating-in-javascript
+	String.prototype.format = String.prototype.f = function () {
+		var args = arguments;
+		return this.replace(/\{(\d+)\}/g, function(m, n){
+			return args[n] ? args[n] : m;
+		});
+	};
+
 	if (typeof w.hljs === 'undefined') {
 		console.error('highlight.js not detected!');
 	} else {
 		w.hljs.initLineNumbersOnLoad = initLineNumbersOnLoad;
 		w.hljs.lineNumbersBlock = lineNumbersBlock;
+
+		addStyles();
+	}
+
+	function addStyles () {
+		var css = document.createElement('style');
+		css.type = 'text/css';
+		css.innerHTML = ('.{0}{border-collapse:collapse}' +
+		                 '.{0} td{padding:0}' +
+		                 '.{1}:before{content:attr({2})}').format(TABLE_NAME, NUMBER_LINE_NAME, DATA_ATTR_NAME);
+		document.getElementsByTagName('head')[0].appendChild(css);
 	}
 
 	function initLineNumbersOnLoad () {
@@ -33,35 +59,30 @@
 	function lineNumbersBlock (element) {
 		if (typeof element !== 'object') return;
 
-		var parent = element.parentNode;
-		var lines = getCountLines(parent.textContent);
+		var lines = getLines(element.innerHTML);
 
-		if (lines > 1) {
-			var l = '';
-			for (var i = 0; i < lines; i++) {
-				l += (i + 1) + '\n';
-			}
+		if (lines.length > 1) {
+			var html = '';
 
-			var linesPanel = document.createElement('code');
-			linesPanel.className = 'hljs hljs-line-numbers';
-			linesPanel.style.float = 'left';
-			linesPanel.textContent = l;
+			for (var i = 0; i < lines.length; i++) {
+				html += ('<tr><td class="{0}"><div class="{1} {2}" {3}="{5}"></div></td>' +
+				         '<td class="{4}"><div class="{1}">{6}</div></td></tr>').format(
+				             NUMBERS_BLOCK_NAME,
+				             LINE_NAME,
+				             NUMBER_LINE_NAME,
+				             DATA_ATTR_NAME,
+				             CODE_BLOCK_NAME,
+				             i + 1,
+				             lines[i].length > 0 ? lines[i] : ' ');
+			}
 
-			parent.insertBefore(linesPanel, element);
+			element.innerHTML = '<table class="{0}">{1}</table>'.format(TABLE_NAME, html);
 		}
 	}
 
-	function getCountLines(text) {
-		if (text.length === 0) return 0;
-
-		var regExp = /\r\n|\r|\n/g;
-		var lines = text.match(regExp);
-		lines = lines ? lines.length : 0;
-
-		if (!text[text.length - 1].match(regExp)) {
-			lines += 1;
-		}
-
-		return lines;
+	function getLines(text) {
+		if (text.length === 0) return [];
+		return text.split(/\r\n|\r|\n/g);
 	}
+
 }(window));