From 53754cbe1f52fd753af1b12cca411455064d3908 Mon Sep 17 00:00:00 2001 From: Vitaliy Ribachenko Date: Mon, 25 May 2015 15:22:12 +0300 Subject: [PATCH 1/6] Added dsstore to gitignore --- .gitignore | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/.gitignore b/.gitignore index 692a6cb8bc..ea5cfc7e8e 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,4 @@ hide-*.js node_modules -.idea/ \ No newline at end of file +.idea/ +.DS_Store \ No newline at end of file From e05043f32282cfa1e0bca238524b7a25d8430d98 Mon Sep 17 00:00:00 2001 From: Vitaliy Ribachenko Date: Mon, 25 May 2015 15:26:10 +0300 Subject: [PATCH 2/6] Added support of soft wrap lines for line numbers plugin --- plugins/line-numbers/index.html | 3 +- plugins/line-numbers/prism-line-numbers.css | 5 + plugins/line-numbers/prism-line-numbers.js | 140 ++++++++++++++------ 3 files changed, 109 insertions(+), 39 deletions(-) diff --git a/plugins/line-numbers/index.html b/plugins/line-numbers/index.html index f22653a1d4..598ec9353f 100644 --- a/plugins/line-numbers/index.html +++ b/plugins/line-numbers/index.html @@ -29,6 +29,7 @@

How to use

Obviously, this is supposed to work only for code blocks (<pre><code>) and not for inline code.

Add class line-numbers to your desired <pre> and line-numbers plugin will take care.

Optional: You can specify the data-start (Number) attribute on the <pre> element. It will shift the line counter.

+

Optional: To support multiline line numbers add line-numbers-break-word class.

@@ -42,7 +43,7 @@

CSS

HTML

Please note the data-start="-5" in the code below.

- 

+  

 

 
 

diff --git a/plugins/line-numbers/prism-line-numbers.css b/plugins/line-numbers/prism-line-numbers.css
index 284cc0ac7f..861d9af796 100644
--- a/plugins/line-numbers/prism-line-numbers.css
+++ b/plugins/line-numbers/prism-line-numbers.css
@@ -4,6 +4,11 @@ pre.line-numbers {
 	counter-reset: linenumber;
 }
 
+pre.line-numbers-break-word > code {
+	white-space: pre-wrap;
+	display: inline-block;
+}
+
 pre.line-numbers > code {
 	position: relative;
 }
diff --git a/plugins/line-numbers/prism-line-numbers.js b/plugins/line-numbers/prism-line-numbers.js
index 9443deb7dc..5d7535f7a5 100644
--- a/plugins/line-numbers/prism-line-numbers.js
+++ b/plugins/line-numbers/prism-line-numbers.js
@@ -1,38 +1,102 @@
-Prism.hooks.add('after-highlight', function (env) {
-	// works only for  wrapped inside 
 (not inline)
-	var pre = env.element.parentNode;
-	var clsReg = /\s*\bline-numbers\b\s*/;
-	if (
-		!pre || !/pre/i.test(pre.nodeName) ||
-		// Abort only if nor the 
 nor the  have the class
-		(!clsReg.test(pre.className) && !clsReg.test(env.element.className))
-	) {
-		return;
-	}
-
-	if (clsReg.test(env.element.className)) {
-		// Remove the class "line-numbers" from the 
-		env.element.className = env.element.className.replace(clsReg, '');
-	}
-	if (!clsReg.test(pre.className)) {
-		// Add the class "line-numbers" to the 
-		pre.className += ' line-numbers';
-	}
-
-	var linesNum = (1 + env.code.split('\n').length);
-	var lineNumbersWrapper;
-
-	var lines = new Array(linesNum);
-	lines = lines.join('');
-
-	lineNumbersWrapper = document.createElement('span');
-	lineNumbersWrapper.className = 'line-numbers-rows';
-	lineNumbersWrapper.innerHTML = lines;
-
-	if (pre.hasAttribute('data-start')) {
-		pre.style.counterReset = 'linenumber ' + (parseInt(pre.getAttribute('data-start'), 10) - 1);
-	}
-
-	env.element.appendChild(lineNumbersWrapper);
-
-});
\ No newline at end of file
+(function(){
+
+	/**
+	 * Class name which is used to flag this code field has break-word css attr
+	 *
+	 * @type {String}
+	 */
+	var BREAK_WORD_CLASS = 'line-numbers-break-word';
+
+	/**
+	 * Returns style declaration for element
+	 *
+	 * @param  {Node} el
+	 * @return {Object}
+	 */
+	var getStyle = function(el){
+		if (!el){
+			return {};
+		}
+		if (el.currentStyle){
+		  return el.currentStyle;
+		}
+	 	else if (document.defaultView && document.defaultView.getComputedStyle){
+	 		return document.defaultView.getComputedStyle(el, '');
+	 	} else {
+		  return el.style;
+	 	}
+	};
+
+	var _resizeElement = function(element){
+		var lineNumbersWrapper = element.querySelector('.line-numbers-rows');
+		var lineNumberSizer = element.querySelector('.line-numbers-sizer');
+		var codeLines = element.textContent.split('\n');
+		var lineHeight;
+
+		lineNumberSizer.style.display = 'block';
+
+		// parse line height in such way because of problems with zoom & line height css attr
+		lineNumberSizer.innerText = '\n';
+		lineHeight = lineNumberSizer.getBoundingClientRect().height;
+
+		codeLines.forEach(function(line, lineNumber){
+			lineNumberSizer.innerText = line;
+			var lineSize = lineNumberSizer.getBoundingClientRect().height || lineHeight;
+			lineNumbersWrapper.children[lineNumber].style.height = lineSize + 'px';
+		});
+
+		lineNumberSizer.innerText = '';
+		lineNumberSizer.style.display = 'none';
+	};
+
+	window.addEventListener('resize', function(){
+		Array.prototype.forEach.call(document.querySelectorAll('pre.' + BREAK_WORD_CLASS), _resizeElement);
+	});
+
+	Prism.hooks.add('after-highlight', function (env) {
+		// works only for  wrapped inside 
 (not inline)
+		var pre = env.element.parentNode;
+		var clsReg = /\s*\bline-numbers\b\s*/;
+		if (
+			!pre || !/pre/i.test(pre.nodeName) ||
+			// Abort only if nor the 
 nor the  have the class
+			(!clsReg.test(pre.className) && !clsReg.test(env.element.className))
+		) {
+			return;
+		}
+
+		if (clsReg.test(env.element.className)) {
+			// Remove the class "line-numbers" from the 
+			env.element.className = env.element.className.replace(clsReg, '');
+		}
+		if (!clsReg.test(pre.className)) {
+			// Add the class "line-numbers" to the 
+			pre.className += ' line-numbers';
+		}
+
+		var linesNum = (1 + env.code.split('\n').length);
+		var lineNumbersWrapper = document.createElement('span');
+		lineNumbersWrapper.className = 'line-numbers-rows';
+
+		var lines = new Array(linesNum);
+		lines = lines.join('');
+
+		lineNumbersWrapper.innerHTML = lines;
+
+		if (pre.hasAttribute('data-start')) {
+			pre.style.counterReset = 'linenumber ' + (parseInt(pre.getAttribute('data-start'), 10) - 1);
+		}
+
+		env.element.appendChild(lineNumbersWrapper);
+
+		if (pre.classList.contains(BREAK_WORD_CLASS)){
+			var lineHeightSizer = document.createElement('span');
+			lineHeightSizer.className = 'line-numbers-sizer';
+
+			env.element.appendChild(lineHeightSizer);
+			_resizeElement(env.element);
+		}
+
+	});
+
+})();
\ No newline at end of file

From 8e0ebd5c5aa055cea2663089a6313e413bbe6e71 Mon Sep 17 00:00:00 2001
From: Vitaliy Ribachenko 
Date: Mon, 25 May 2015 15:32:11 +0300
Subject: [PATCH 3/6] Removed obsolette function

---
 plugins/line-numbers/prism-line-numbers.js | 21 ++-------------------
 1 file changed, 2 insertions(+), 19 deletions(-)

diff --git a/plugins/line-numbers/prism-line-numbers.js b/plugins/line-numbers/prism-line-numbers.js
index 5d7535f7a5..50a8ee0d9e 100644
--- a/plugins/line-numbers/prism-line-numbers.js
+++ b/plugins/line-numbers/prism-line-numbers.js
@@ -2,31 +2,14 @@
 
 	/**
 	 * Class name which is used to flag this code field has break-word css attr
-	 *
 	 * @type {String}
 	 */
 	var BREAK_WORD_CLASS = 'line-numbers-break-word';
 
 	/**
-	 * Returns style declaration for element
-	 *
-	 * @param  {Node} el
-	 * @return {Object}
+	 * Resizes line numbers spans according to height of line of code
+	 * @param  {Element} element  element
 	 */
-	var getStyle = function(el){
-		if (!el){
-			return {};
-		}
-		if (el.currentStyle){
-		  return el.currentStyle;
-		}
-	 	else if (document.defaultView && document.defaultView.getComputedStyle){
-	 		return document.defaultView.getComputedStyle(el, '');
-	 	} else {
-		  return el.style;
-	 	}
-	};
-
 	var _resizeElement = function(element){
 		var lineNumbersWrapper = element.querySelector('.line-numbers-rows');
 		var lineNumberSizer = element.querySelector('.line-numbers-sizer');

From 8ebc48c55f73077933f326e5e4a785758deae3d5 Mon Sep 17 00:00:00 2001
From: Vitalii Rybachenko 
Date: Tue, 26 May 2015 13:16:28 +0300
Subject: [PATCH 4/6] Moved lineHeight conditional inside forEach block

---
 plugins/line-numbers/prism-line-numbers.js | 9 ++-------
 1 file changed, 2 insertions(+), 7 deletions(-)

diff --git a/plugins/line-numbers/prism-line-numbers.js b/plugins/line-numbers/prism-line-numbers.js
index 50a8ee0d9e..d94d3c9c0e 100644
--- a/plugins/line-numbers/prism-line-numbers.js
+++ b/plugins/line-numbers/prism-line-numbers.js
@@ -14,17 +14,12 @@
 		var lineNumbersWrapper = element.querySelector('.line-numbers-rows');
 		var lineNumberSizer = element.querySelector('.line-numbers-sizer');
 		var codeLines = element.textContent.split('\n');
-		var lineHeight;
 
 		lineNumberSizer.style.display = 'block';
 
-		// parse line height in such way because of problems with zoom & line height css attr
-		lineNumberSizer.innerText = '\n';
-		lineHeight = lineNumberSizer.getBoundingClientRect().height;
-
 		codeLines.forEach(function(line, lineNumber){
-			lineNumberSizer.innerText = line;
-			var lineSize = lineNumberSizer.getBoundingClientRect().height || lineHeight;
+			lineNumberSizer.innerText = line || '\n';
+			var lineSize = lineNumberSizer.getBoundingClientRect().height;
 			lineNumbersWrapper.children[lineNumber].style.height = lineSize + 'px';
 		});
 

From de28992478ce42cf3d9e34c0664d152e9bfc7823 Mon Sep 17 00:00:00 2001
From: Vitalii Rybachenko 
Date: Tue, 26 May 2015 13:22:58 +0300
Subject: [PATCH 5/6] Replaced innerText with textContent for supporting ff

---
 plugins/line-numbers/prism-line-numbers.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/plugins/line-numbers/prism-line-numbers.js b/plugins/line-numbers/prism-line-numbers.js
index d94d3c9c0e..4eabfa8d6d 100644
--- a/plugins/line-numbers/prism-line-numbers.js
+++ b/plugins/line-numbers/prism-line-numbers.js
@@ -18,12 +18,12 @@
 		lineNumberSizer.style.display = 'block';
 
 		codeLines.forEach(function(line, lineNumber){
-			lineNumberSizer.innerText = line || '\n';
+			lineNumberSizer.textContent = line || '\n';
 			var lineSize = lineNumberSizer.getBoundingClientRect().height;
 			lineNumbersWrapper.children[lineNumber].style.height = lineSize + 'px';
 		});
 
-		lineNumberSizer.innerText = '';
+		lineNumberSizer.textContent = '';
 		lineNumberSizer.style.display = 'none';
 	};
 

From ffae34cffd734dc672d0224d5774bd107ff8b05f Mon Sep 17 00:00:00 2001
From: Vitaliy Ribachenko 
Date: Thu, 11 Jun 2015 19:56:17 +0300
Subject: [PATCH 6/6] Removed class name for soft wrap, made to determinate it
 automatically by white-space css attribute on the pre tag

---
 plugins/line-numbers/index.html             |  4 +-
 plugins/line-numbers/prism-line-numbers.css |  7 +--
 plugins/line-numbers/prism-line-numbers.js  | 64 +++++++++++++--------
 3 files changed, 45 insertions(+), 30 deletions(-)

diff --git a/plugins/line-numbers/index.html b/plugins/line-numbers/index.html
index 598ec9353f..363c2fa699 100644
--- a/plugins/line-numbers/index.html
+++ b/plugins/line-numbers/index.html
@@ -29,7 +29,7 @@ 
How to use

   
Obviously, this is supposed to work only for code blocks (<pre><code>) and not for inline code.

   
Add class line-numbers to your desired <pre> and line-numbers plugin will take care.

   
Optional: You can specify the data-start (Number) attribute on the <pre> element. It will shift the line counter.

-  
Optional: To support multiline line numbers add line-numbers-break-word class.

+  
Optional: To support multiline line numbers using soft wrap add css white-space to pre-line or pre-wrap.

 
 
 

@@ -43,7 +43,7 @@ 
CSS

 
   
HTML

   
Please note the data-start="-5" in the code below.

-  

+  

 

 
 

diff --git a/plugins/line-numbers/prism-line-numbers.css b/plugins/line-numbers/prism-line-numbers.css
index 861d9af796..e32989bc3d 100644
--- a/plugins/line-numbers/prism-line-numbers.css
+++ b/plugins/line-numbers/prism-line-numbers.css
@@ -4,13 +4,10 @@ pre.line-numbers {
 	counter-reset: linenumber;
 }
 
-pre.line-numbers-break-word > code {
-	white-space: pre-wrap;
-	display: inline-block;
-}
-
 pre.line-numbers > code {
 	position: relative;
+    display: inline-block;
+    white-space: inherit;
 }
 
 .line-numbers .line-numbers-rows {
diff --git a/plugins/line-numbers/prism-line-numbers.js b/plugins/line-numbers/prism-line-numbers.js
index 4eabfa8d6d..2d0f4805a0 100644
--- a/plugins/line-numbers/prism-line-numbers.js
+++ b/plugins/line-numbers/prism-line-numbers.js
@@ -1,34 +1,59 @@
 (function(){
 
 	/**
-	 * Class name which is used to flag this code field has break-word css attr
+	 * Class name for 
 which is activating the plugin
 	 * @type {String}
 	 */
-	var BREAK_WORD_CLASS = 'line-numbers-break-word';
+	var PLUGIN_CLASS = 'line-numbers';
 
 	/**
 	 * Resizes line numbers spans according to height of line of code
-	 * @param  {Element} element  element
+	 * @param  {Element} element 
 element
 	 */
 	var _resizeElement = function(element){
-		var lineNumbersWrapper = element.querySelector('.line-numbers-rows');
-		var lineNumberSizer = element.querySelector('.line-numbers-sizer');
-		var codeLines = element.textContent.split('\n');
+    var codeStyles = getStyles(element);
+    var whiteSpace = codeStyles['white-space'];
 
-		lineNumberSizer.style.display = 'block';
+    if (whiteSpace === 'pre-wrap' || whiteSpace === 'pre-line'){
+      var codeElement = element.querySelector('code');
+      var lineNumbersWrapper = element.querySelector('.line-numbers-rows');
+      var lineNumberSizer = element.querySelector('.line-numbers-sizer');
+      var codeLines = element.textContent.split('\n');
 
-		codeLines.forEach(function(line, lineNumber){
-			lineNumberSizer.textContent = line || '\n';
-			var lineSize = lineNumberSizer.getBoundingClientRect().height;
-			lineNumbersWrapper.children[lineNumber].style.height = lineSize + 'px';
-		});
+      if (!lineNumberSizer){
+        lineNumberSizer = document.createElement('span');
+        lineNumberSizer.className = 'line-numbers-sizer';
 
-		lineNumberSizer.textContent = '';
-		lineNumberSizer.style.display = 'none';
+        codeElement.appendChild(lineNumberSizer);
+      }
+
+      lineNumberSizer.style.display = 'block';
+
+      codeLines.forEach(function(line, lineNumber){
+        lineNumberSizer.textContent = line || '\n';
+        var lineSize = lineNumberSizer.getBoundingClientRect().height;
+        lineNumbersWrapper.children[lineNumber].style.height = lineSize + 'px';
+      });
+
+      lineNumberSizer.textContent = '';
+      lineNumberSizer.style.display = 'none';
+    }
 	};
 
+  /**
+   * Returns style declarations for the element
+   * @param {Element} element
+   */
+  var getStyles = function(element){
+    if (!element){
+      return null;
+    }
+
+    return window.getComputedStyle ? getComputedStyle(element) : (element.currentStyle || null);
+  };
+
 	window.addEventListener('resize', function(){
-		Array.prototype.forEach.call(document.querySelectorAll('pre.' + BREAK_WORD_CLASS), _resizeElement);
+		Array.prototype.forEach.call(document.querySelectorAll('pre.' + PLUGIN_CLASS), _resizeElement);
 	});
 
 	Prism.hooks.add('after-highlight', function (env) {
@@ -67,14 +92,7 @@
 
 		env.element.appendChild(lineNumbersWrapper);
 
-		if (pre.classList.contains(BREAK_WORD_CLASS)){
-			var lineHeightSizer = document.createElement('span');
-			lineHeightSizer.className = 'line-numbers-sizer';
-
-			env.element.appendChild(lineHeightSizer);
-			_resizeElement(env.element);
-		}
-
+    _resizeElement(pre);
 	});
 
 })();
\ No newline at end of file