kmx.io/prism.js

diff --git a/plugins/line-highlight/index.html b/plugins/line-highlight/index.html
index a331da9..3106135 100644
--- a/plugins/line-highlight/index.html
+++ b/plugins/line-highlight/index.html
@@ -20,14 +20,10 @@
 	<p>Highlights specific lines and/or line ranges.</p>
 </header>
 
-<section>
+<section class="language-markup">
 	<h1>How to use</h1>
 	
-	<p>To use this plugin, your code samples need to use a <code>&lt;pre></code> element, with the <code>prism</code> class and it should include
-	one or more <code>&lt;code></code> element(s) as children. For example:</p>
-	<pre class="lang-markup"><code>&lt;pre class="language-javascript">&lt;code>console.log("this plugin is awesome!");&lt;/code>&lt;/pre></code></pre>
-	<p>This is also valid:
-	<pre class="language-markup"><code>&lt;pre>&lt;code class="language-javascript">console.log("this plugin is awesome!");&lt;/code>&lt;/pre></code></pre>
+	<p>Obviously, this only works on code blocks (<code>&lt;pre>&lt;code></code>) and not for inline code.
 	
 	<p>You specify the lines to be highlighted through the <code>data-line</code> attribute on the <code>&lt;pre></code> element, in the following simple format:</p>
 	<ul>
diff --git a/plugins/line-highlight/prism-line-highlight.css b/plugins/line-highlight/prism-line-highlight.css
index 8734d4e..9eb3173 100644
--- a/plugins/line-highlight/prism-line-highlight.css
+++ b/plugins/line-highlight/prism-line-highlight.css
@@ -3,15 +3,11 @@ pre[data-line] {
 	padding: 1em 0 1em 3em;
 }
 
-pre[data-line] > code {
-	position: relative;
-}
-
 .line-highlight {
 	position: absolute;
 	left: 0;
 	right: 0;
-	padding-left: .6em;
+	padding: inherit 0;
 	margin-top: 1em; /* Same as .prism’s padding-top */
 
 	background: hsla(24, 20%, 50%,.08);
@@ -21,6 +17,9 @@ pre[data-line] > code {
 	background: linear-gradient(left, hsla(24, 20%, 50%,.1) 70%, hsla(24, 20%, 50%,0));
 	
 	pointer-events: none;
+	
+	line-height: inherit;
+	white-space: pre;
 }
 
 	.line-highlight:before,
@@ -28,6 +27,7 @@ pre[data-line] > code {
 		content: attr(data-start);
 		position: absolute;
 		top: .4em;
+		left: .6em;
 		min-width: 1em;
 		padding: 0 .5em;
 		background-color: hsla(24, 20%, 50%,.4);
diff --git a/plugins/line-highlight/prism-line-highlight.js b/plugins/line-highlight/prism-line-highlight.js
index d1d1d74..930e938 100644
--- a/plugins/line-highlight/prism-line-highlight.js
+++ b/plugins/line-highlight/prism-line-highlight.js
@@ -1,9 +1,6 @@
 (function(){
 
-if(!window.Prism
- || !window.addEventListener 
- || !window.getComputedStyle
- || !document.querySelectorAll) {
+if(!window.Prism) {
 	return;
 }
 
@@ -11,16 +8,13 @@ function $$(expr, con) {
 	return Array.prototype.slice.call((con || document).querySelectorAll(expr));
 }
 
-var CRLF = crlf = /\r?\n|\r/g,
-    preTag = /pre/i;
+var CRLF = crlf = /\r?\n|\r/g;
     
 function highlightLines(pre, lines, classes) {
 	var ranges = lines.replace(/\s+/g, '').split(','),
 	    offset = +pre.getAttribute('data-line-offset') || 0;
-	    
-	var cs = getComputedStyle(pre),
-	    lineHeight = parseFloat(cs.lineHeight),
-	    firstChild = pre.firstChild;
+	
+	var lineHeight = parseFloat(getComputedStyle(pre).lineHeight);
 
 	for (var i=0, range; range = ranges[i++];) {
 		range = range.split('-');
@@ -30,6 +24,7 @@ function highlightLines(pre, lines, classes) {
 		
 		var line = document.createElement('div');
 		
+		line.textContent = Array(end - start + 2).join(' \r\n');
 		line.className = (classes || '') + ' line-highlight';
 		line.setAttribute('data-start', start);
 		
@@ -37,10 +32,9 @@ function highlightLines(pre, lines, classes) {
 			line.setAttribute('data-end', end);
 		}
 	
-		line.style.height = (end - start + 1) * lineHeight + 'px';
 		line.style.top = (start - offset - 1) * lineHeight + 'px';
 		
-		pre.insertBefore(line, firstChild);
+		(pre.querySelector('code') || pre).appendChild(line);
 	}
 }
 
@@ -54,18 +48,18 @@ function applyHash() {
 	
 	var range = (hash.match(/\.([\d,-]+)$/) || [,''])[1];
 	
-	if(!range || document.getElementById(hash)) {
+	if (!range || document.getElementById(hash)) {
 		return;
 	}
 	
 	var id = hash.slice(0, hash.lastIndexOf('.')),
 	    pre = document.getElementById(id);
 	    
-	if(!pre) {
+	if (!pre) {
 		return;
 	}
 	
-	if(!pre.hasAttribute('data-line')) {
+	if (!pre.hasAttribute('data-line')) {
 		pre.setAttribute('data-line', '');
 	}
 
@@ -77,17 +71,15 @@ function applyHash() {
 var fakeTimer = 0; // Hack to limit the number of times applyHash() runs
 
 Prism.hooks.add('after-highlight', function(env) {
-	clearTimeout(fakeTimer);
+	var pre = env.element.parentNode;
+	var lines = pre && pre.getAttribute('data-line');
 	
-	var pre = preTag.test(env.element.nodeName)? env.element
-	        : preTag.test(env.element.parentNode.nodeName)? env.element.parentNode
-	        : null,
-	    lines = pre.getAttribute('data-line');
-	
-	if (!pre || !lines) {
+	if (!pre || !lines || !/pre/i.test(pre.nodeName)) {
 		return;
 	}
 	
+	clearTimeout(fakeTimer);
+	
 	$$('.line-highlight', pre).forEach(function (line) {
 		line.parentNode.removeChild(line);
 	});
diff --git a/plugins/line-highlight/prism-line-highlight.min.js b/plugins/line-highlight/prism-line-highlight.min.js
index 7c8eaa9..5f10a69 100644
--- a/plugins/line-highlight/prism-line-highlight.min.js
+++ b/plugins/line-highlight/prism-line-highlight.min.js
@@ -1 +1 @@
-(function(){function e(e,t){return Array.prototype.slice.call((t||document).querySelectorAll(e))}function r(e,t,n){var r=t.replace(/\s+/g,"").split(","),i=+e.getAttribute("data-line-offset")||0,s=getComputedStyle(e),o=parseFloat(s.lineHeight),u=e.firstChild;for(var a=0,f;f=r[a++];){f=f.split("-");var l=+f[0],c=+f[1]||l,h=document.createElement("div");h.className=(n||"")+" line-highlight";h.setAttribute("data-start",l);c>l&&h.setAttribute("data-end",c);h.style.height=(c-l+1)*o+"px";h.style.top=(l-i-1)*o+"px";e.insertBefore(h,u)}}function i(){var t=location.hash.slice(1);e(".temporary.line-highlight").forEach(function(e){e.parentNode.removeChild(e)});var n=(t.match(/\.([\d,-]+)$/)||[,""])[1];if(!n||document.getElementById(t))return;var i=t.slice(0,t.lastIndexOf(".")),s=document.getElementById(i);if(!s)return;s.hasAttribute("data-line")||s.setAttribute("data-line","");r(s,n,"temporary ");document.querySelector(".temporary.line-highlight").scrollIntoView()}if(!window.Prism||!window.addEventListener||!window.getComputedStyle||!document.querySelectorAll)return;var t=crlf=/\r?\n|\r/g,n=/pre/i,s=0;Prism.hooks.add("after-highlight",function(t){clearTimeout(s);var o=n.test(t.element.nodeName)?t.element:n.test(t.element.parentNode.nodeName)?t.element.parentNode:null,u=o.getAttribute("data-line");if(!o||!u)return;e(".line-highlight",o).forEach(function(e){e.parentNode.removeChild(e)});r(o,u);s=setTimeout(i,1)});addEventListener("hashchange",i)})();
\ No newline at end of file
+(function(){function e(e,t){return Array.prototype.slice.call((t||document).querySelectorAll(e))}function n(e,t,n){var r=t.replace(/\s+/g,"").split(","),i=+e.getAttribute("data-line-offset")||0,s=parseFloat(getComputedStyle(e).lineHeight);for(var o=0,u;u=r[o++];){u=u.split("-");var a=+u[0],f=+u[1]||a,l=document.createElement("div");l.textContent=Array(f-a+2).join(" \r\n");l.className=(n||"")+" line-highlight";l.setAttribute("data-start",a);f>a&&l.setAttribute("data-end",f);l.style.top=(a-i-1)*s+"px";(e.querySelector("code")||e).appendChild(l)}}function r(){var t=location.hash.slice(1);e(".temporary.line-highlight").forEach(function(e){e.parentNode.removeChild(e)});var r=(t.match(/\.([\d,-]+)$/)||[,""])[1];if(!r||document.getElementById(t))return;var i=t.slice(0,t.lastIndexOf(".")),s=document.getElementById(i);if(!s)return;s.hasAttribute("data-line")||s.setAttribute("data-line","");n(s,r,"temporary ");document.querySelector(".temporary.line-highlight").scrollIntoView()}if(!window.Prism)return;var t=crlf=/\r?\n|\r/g,i=0;Prism.hooks.add("after-highlight",function(t){var s=t.element.parentNode,o=s&&s.getAttribute("data-line");if(!s||!o||!/pre/i.test(s.nodeName))return;clearTimeout(i);e(".line-highlight",s).forEach(function(e){e.parentNode.removeChild(e)});n(s,o);i=setTimeout(r,1)});addEventListener("hashchange",r)})();
\ No newline at end of file