Commit 1784b175dbf0be95af5e8bc436a3689d90b98a4f

at055612 2022-02-10T18:51:13

Command Line: Add support for line continuation and improved colors (#3326)

diff --git a/plugins/command-line/index.html b/plugins/command-line/index.html
index 04398bb..c8cd9c4 100644
--- a/plugins/command-line/index.html
+++ b/plugins/command-line/index.html
@@ -49,6 +49,14 @@
 	</dl>
 
 	<p>Optional: To automatically present some lines as output, you can prefix those lines with any string and specify the prefix using the <code class="language-markup">data-filter-output</code> attribute on the <code class="language-markup">&lt;pre></code> element. For example, <code class="language-markup">data-filter-output="(out)"</code> will treat lines beginning with <code class="language-markup">(out)</code> as output and remove the prefix.</p>
+
+	<p>Output lines are user selectable by default, so if you select the whole content of the code block, it will select the shell commands and any output lines. This may not be desireable if you want to copy/paste just the commands and not the output. If you want to make the output not user selectable then add the following to your CSS:</p>
+
+	<pre><code class="language-css">.command-line span.token.output {
+	user-select: none;
+}</code></pre>
+
+	<p>Optional: For multi-line commands you can specify the <code class="language-markup">data-continuation-str</code> attribute on the <code class="language-markup">&lt;pre></code> element. For example, <code class="language-markup">data-continuation-str="\"</code> will treat lines ending with <code class="language-markup">\</code> as being continued on the following line. Continued lines will have a prompt as set by the attribute <code class="language-markup">data-continuation-prompt</code> or a default of <code class="language-markup">&gt;</code>.</p>
 </section>
 
 <section>
@@ -90,6 +98,26 @@ d-r--        10/14/2015   5:06 PM            Saved Games
 d-r--        10/14/2015   5:06 PM            Searches
 d-r--        10/14/2015   5:06 PM            Videos</code></pre>
 
+	<h2>Line continuation with Output (bash)</h2>
+<pre class="command-line" data-filter-output="(out)" data-continuation-str="\" ><code class="language-bash">echo "hello"
+(out)hello
+echo one \
+two \
+three
+(out)one two three
+(out)
+echo "goodbye"
+(out)goodbye</code></pre>
+
+	<h2>Line continuation with Output (PowerShell)</h2>
+<pre class="command-line" data-prompt="PS C:\Users\Chris>" data-continuation-prompt=">>" data-filter-output="(out)" data-continuation-str=" `"><code class="language-powershell">Write-Host `
+'Hello' `
+'from' `
+'PowerShell!'
+(out)Hello from PowerShell!
+Write-Host 'Goodbye from PowerShell!'
+(out)Goodbye from PowerShell!</code></pre>
+
 </section>
 
 <footer data-src="assets/templates/footer.html" data-type="text/html"></footer>
diff --git a/plugins/command-line/prism-command-line.css b/plugins/command-line/prism-command-line.css
index 153a870..984a718 100644
--- a/plugins/command-line/prism-command-line.css
+++ b/plugins/command-line/prism-command-line.css
@@ -6,6 +6,7 @@
 	letter-spacing: -1px;
 	margin-right: 1em;
 	pointer-events: none;
+	text-align: right;
 
 	-webkit-user-select: none;
 	-moz-user-select: none;
@@ -14,7 +15,7 @@
 }
 
 .command-line-prompt > span:before {
-	color: #999;
+	opacity: 0.4;
 	content: ' ';
 	display: block;
 	padding-right: 0.8em;
@@ -31,3 +32,12 @@
 .command-line-prompt > span[data-prompt]:before {
 	content: attr(data-prompt);
 }
+
+.command-line-prompt > span[data-continuation-prompt]:before {
+	content: attr(data-continuation-prompt);
+}
+
+.command-line span.token.output {
+	/* Make shell output lines a bit lighter to distinguish them from shell commands */
+	opacity: 0.7;
+}
diff --git a/plugins/command-line/prism-command-line.js b/plugins/command-line/prism-command-line.js
index c546977..6437775 100644
--- a/plugins/command-line/prism-command-line.js
+++ b/plugins/command-line/prism-command-line.js
@@ -12,22 +12,16 @@
 		? function (s, p) { return s.startsWith(p); }
 		: function (s, p) { return s.indexOf(p) === 0; };
 
-	/**
-	 * Repeats the given string some number of times.
-	 *
-	 * This is just a polyfill for `String.prototype.repeat`.
-	 *
-	 * @param {string} str
-	 * @param {number} times
-	 * @returns {string}
-	 */
-	function repeat(str, times) {
-		var s = '';
-		for (var i = 0; i < times; i++) {
-			s += str;
+	// Support for IE11 that has no endsWith()
+	/** @type {(str: string, suffix: string) => boolean} */
+	var endsWith = ''.endsWith
+		? function (str, suffix) {
+			return str.endsWith(suffix);
 		}
-		return s;
-	}
+		: function (str, suffix) {
+			var len = str.length;
+			return str.substring(len - suffix.length, len) === suffix;
+		};
 
 	/**
 	 * Returns whether the given hook environment has a command line info object.
@@ -79,6 +73,22 @@
 		}
 
 		var codeLines = env.code.split('\n');
+
+		var continuationLineIndicies = commandLine.continuationLineIndicies = new Set();
+		var lineContinuationStr = pre.getAttribute('data-continuation-str');
+
+		// Identify code lines that are a continuation line and thus don't need
+		// a prompt
+		if (lineContinuationStr && codeLines.length > 1) {
+			for (var j = 1; j < codeLines.length; j++) {
+				if (codeLines.hasOwnProperty(j - 1)
+						&& endsWith(codeLines[j - 1], lineContinuationStr)) {
+					// Mark this line as being a continuation line
+					continuationLineIndicies.add(j);
+				}
+			}
+		}
+
 		commandLine.numberOfLines = codeLines.length;
 		/** @type {string[]} */
 		var outputLines = commandLine.outputLines = [];
@@ -168,15 +178,29 @@
 		}
 
 		// Create the "rows" that will become the command-line prompts. -- cwells
-		var promptLines;
+		var promptLines = '';
 		var rowCount = commandLine.numberOfLines || 0;
 		var promptText = getAttribute('data-prompt', '');
+		var promptLine;
 		if (promptText !== '') {
-			promptLines = repeat('<span data-prompt="' + promptText + '"></span>', rowCount);
+			promptLine = '<span data-prompt="' + promptText + '"></span>';
 		} else {
 			var user = getAttribute('data-user', 'user');
 			var host = getAttribute('data-host', 'localhost');
-			promptLines = repeat('<span data-user="' + user + '" data-host="' + host + '"></span>', rowCount);
+			promptLine = '<span data-user="' + user + '" data-host="' + host + '"></span>';
+		}
+
+		var continuationLineIndicies = commandLine.continuationLineIndicies || new Set();
+		var continuationPromptText = getAttribute('data-continuation-prompt', '>');
+		var continuationPromptLine = '<span data-continuation-prompt="' + continuationPromptText + '"></span>';
+
+		// Assemble all the appropriate prompt/continuation lines
+		for (var j = 0; j < rowCount; j++) {
+			if (continuationLineIndicies.has(j)) {
+				promptLines += continuationPromptLine;
+			} else {
+				promptLines += promptLine;
+			}
 		}
 
 		// Create the wrapper element. -- cwells
diff --git a/plugins/command-line/prism-command-line.min.css b/plugins/command-line/prism-command-line.min.css
index 97b41d5..5e5c875 100644
--- a/plugins/command-line/prism-command-line.min.css
+++ b/plugins/command-line/prism-command-line.min.css
@@ -1 +1 @@
-.command-line-prompt{border-right:1px solid #999;display:block;float:left;font-size:100%;letter-spacing:-1px;margin-right:1em;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.command-line-prompt>span:before{color:#999;content:' ';display:block;padding-right:.8em}.command-line-prompt>span[data-user]:before{content:"[" attr(data-user) "@" attr(data-host) "] $"}.command-line-prompt>span[data-user=root]:before{content:"[" attr(data-user) "@" attr(data-host) "] #"}.command-line-prompt>span[data-prompt]:before{content:attr(data-prompt)}
\ No newline at end of file
+.command-line-prompt{border-right:1px solid #999;display:block;float:left;font-size:100%;letter-spacing:-1px;margin-right:1em;pointer-events:none;text-align:right;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.command-line-prompt>span:before{opacity:.4;content:' ';display:block;padding-right:.8em}.command-line-prompt>span[data-user]:before{content:"[" attr(data-user) "@" attr(data-host) "] $"}.command-line-prompt>span[data-user=root]:before{content:"[" attr(data-user) "@" attr(data-host) "] #"}.command-line-prompt>span[data-prompt]:before{content:attr(data-prompt)}.command-line-prompt>span[data-continuation-prompt]:before{content:attr(data-continuation-prompt)}.command-line span.token.output{opacity:.7}
\ No newline at end of file
diff --git a/plugins/command-line/prism-command-line.min.js b/plugins/command-line/prism-command-line.min.js
index cfef753..ee6e6a4 100644
--- a/plugins/command-line/prism-command-line.min.js
+++ b/plugins/command-line/prism-command-line.min.js
@@ -1 +1 @@
-!function(){if("undefined"!=typeof Prism&&"undefined"!=typeof document){var p=/(?:^|\s)command-line(?:\s|$)/,d="command-line-prompt",m="".startsWith?function(e,t){return e.startsWith(t)}:function(e,t){return 0===e.indexOf(t)};Prism.hooks.add("before-highlight",function(e){var t=h(e);if(!t.complete&&e.code){var n=e.element.parentElement;if(n&&/pre/i.test(n.nodeName)&&(p.test(n.className)||p.test(e.element.className))){var a=e.element.querySelector("."+d);a&&a.remove();var s=e.code.split("\n");t.numberOfLines=s.length;var o=t.outputLines=[],r=n.getAttribute("data-output"),i=n.getAttribute("data-filter-output");if(null!==r)r.split(",").forEach(function(e){var t=e.split("-"),n=parseInt(t[0],10),a=2===t.length?parseInt(t[1],10):n;if(!isNaN(n)&&!isNaN(a)){n<1&&(n=1),a>s.length&&(a=s.length),a--;for(var r=--n;r<=a;r++)o[r]=s[r],s[r]=""}});else if(i)for(var l=0;l<s.length;l++)m(s[l],i)&&(o[l]=s[l].slice(i.length),s[l]="");e.code=s.join("\n")}else t.complete=!0}else t.complete=!0}),Prism.hooks.add("before-insert",function(e){var t=h(e);if(!t.complete){for(var n=e.highlightedCode.split("\n"),a=t.outputLines||[],r=0,s=n.length;r<s;r++)a.hasOwnProperty(r)?n[r]='<span class="token output">'+a[r]+"</span>":n[r]='<span class="token command">'+n[r]+"</span>";e.highlightedCode=n.join("\n")}}),Prism.hooks.add("complete",function(e){if(function(e){return"command-line"in(e.vars=e.vars||{})}(e)){var t=h(e);if(!t.complete){var n,a=e.element.parentElement;p.test(e.element.className)&&(e.element.className=e.element.className.replace(p," ")),p.test(a.className)||(a.className+=" command-line");var r=t.numberOfLines||0,s=u("data-prompt","");if(""!==s)n=f('<span data-prompt="'+s+'"></span>',r);else n=f('<span data-user="'+u("data-user","user")+'" data-host="'+u("data-host","localhost")+'"></span>',r);var o=document.createElement("span");o.className=d,o.innerHTML=n;for(var i=t.outputLines||[],l=0,m=i.length;l<m;l++)if(i.hasOwnProperty(l)){var c=o.children[l];c.removeAttribute("data-user"),c.removeAttribute("data-host"),c.removeAttribute("data-prompt")}e.element.insertBefore(o,e.element.firstChild),t.complete=!0}}function u(e,t){return(a.getAttribute(e)||t).replace(/"/g,"&quot")}})}function f(e,t){for(var n="",a=0;a<t;a++)n+=e;return n}function h(e){var t=e.vars=e.vars||{};return t["command-line"]=t["command-line"]||{}}}();
\ No newline at end of file
+!function(){if("undefined"!=typeof Prism&&"undefined"!=typeof document){var v=/(?:^|\s)command-line(?:\s|$)/,g="command-line-prompt",p="".startsWith?function(e,t){return e.startsWith(t)}:function(e,t){return 0===e.indexOf(t)},d="".endsWith?function(e,t){return e.endsWith(t)}:function(e,t){var n=e.length;return e.substring(n-t.length,n)===t};Prism.hooks.add("before-highlight",function(e){var t=N(e);if(!t.complete&&e.code){var n=e.element.parentElement;if(n&&/pre/i.test(n.nodeName)&&(v.test(n.className)||v.test(e.element.className))){var a=e.element.querySelector("."+g);a&&a.remove();var i=e.code.split("\n"),r=t.continuationLineIndicies=new Set,s=n.getAttribute("data-continuation-str");if(s&&1<i.length)for(var o=1;o<i.length;o++)i.hasOwnProperty(o-1)&&d(i[o-1],s)&&r.add(o);t.numberOfLines=i.length;var l=t.outputLines=[],m=n.getAttribute("data-output"),u=n.getAttribute("data-filter-output");if(null!==m)m.split(",").forEach(function(e){var t=e.split("-"),n=parseInt(t[0],10),a=2===t.length?parseInt(t[1],10):n;if(!isNaN(n)&&!isNaN(a)){n<1&&(n=1),a>i.length&&(a=i.length),a--;for(var r=--n;r<=a;r++)l[r]=i[r],i[r]=""}});else if(u)for(var c=0;c<i.length;c++)p(i[c],u)&&(l[c]=i[c].slice(u.length),i[c]="");e.code=i.join("\n")}else t.complete=!0}else t.complete=!0}),Prism.hooks.add("before-insert",function(e){var t=N(e);if(!t.complete){for(var n=e.highlightedCode.split("\n"),a=t.outputLines||[],r=0,i=n.length;r<i;r++)a.hasOwnProperty(r)?n[r]='<span class="token output">'+a[r]+"</span>":n[r]='<span class="token command">'+n[r]+"</span>";e.highlightedCode=n.join("\n")}}),Prism.hooks.add("complete",function(e){if(function(e){return"command-line"in(e.vars=e.vars||{})}(e)){var t=N(e);if(!t.complete){var n=e.element.parentElement;v.test(e.element.className)&&(e.element.className=e.element.className.replace(v," ")),v.test(n.className)||(n.className+=" command-line");var a,r="",i=t.numberOfLines||0,s=h("data-prompt","");if(""!==s)a='<span data-prompt="'+s+'"></span>';else a='<span data-user="'+h("data-user","user")+'" data-host="'+h("data-host","localhost")+'"></span>';for(var o=t.continuationLineIndicies||new Set,l='<span data-continuation-prompt="'+h("data-continuation-prompt",">")+'"></span>',m=0;m<i;m++)o.has(m)?r+=l:r+=a;var u=document.createElement("span");u.className=g,u.innerHTML=r;for(var c=t.outputLines||[],p=0,d=c.length;p<d;p++)if(c.hasOwnProperty(p)){var f=u.children[p];f.removeAttribute("data-user"),f.removeAttribute("data-host"),f.removeAttribute("data-prompt")}e.element.insertBefore(u,e.element.firstChild),t.complete=!0}}function h(e,t){return(n.getAttribute(e)||t).replace(/"/g,"&quot")}})}function N(e){var t=e.vars=e.vars||{};return t["command-line"]=t["command-line"]||{}}}();
\ No newline at end of file