Command Line: Add support for line continuation

plugins/command-line/index.html

@@ -49,6 +49,8 @@ <h1>How to use</h1>
 	</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>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 +92,25 @@ <h2>Windows PowerShell With Output</h2>
 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
+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>

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,14 @@
 .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 a bit lighter to distinguish them from shell commands */
+	opacity: 0.7;
+  /* Ignore shell output lines when selecting to copy/paste */
+	user-select: none;
+}

plugins/command-line/prism-command-line.js

@@ -4,6 +4,16 @@
 		return;
 	}
 
+	// Polyfill for pre-ES6 Support, i.e. Internet Explorer
+	if (!String.prototype.endsWith) {
+		String.prototype.endsWith = function (search, this_len) {
+			if (this_len === undefined || this_len > this.length) {
+				this_len = this.length;
+			}
+			return this.substring(this_len - search.length, this_len) === search;
+		};
+	}
+
 	var CLASS_PATTERN = /(?:^|\s)command-line(?:\s|$)/;
 	var PROMPT_CLASS = 'command-line-prompt';
 
@@ -12,23 +22,6 @@
 		? 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;
-		}
-		return s;
-	}
-
 	/**
 	 * Returns whether the given hook environment has a command line info object.
 	 *
@@ -79,6 +72,22 @@
 		}
 
 		var codeLines = env.code.split('\n');
+
+		/** @type {int[]} */
+		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)
+						&& codeLines[j - 1].endsWith(lineContinuationStr)) {
+					continuationLineIndicies.add(j);
+				}
+			}
+		}
+
 		commandLine.numberOfLines = codeLines.length;
 		/** @type {string[]} */
 		var outputLines = commandLine.outputLines = [];
@@ -168,15 +177,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
@@ -200,3 +223,4 @@
 	});
 
 }());
+// vim: set tabstop=2 shiftwidth=2 noexpandtab: