Auto-detect command lines if 'data-filter' attribute present

plugins/command-line/index.html

@@ -30,6 +30,8 @@ <h1>How to use</h1>
 
 	<p>Add class <strong>command-line</strong> to your <code class="language-markup">&lt;pre></code>. For a server command line, specify the user and host names using the <code class="language-markup">data-user</code> and <code class="language-markup">data-host</code> attributes. The resulting prompt displays a <strong>#</strong> for the root user and <strong>$</strong> for all other users. For any other command line, such as a Windows prompt, you may specify the entire prompt using the <code class="language-markup">data-prompt</code> attribute.</p>
 
+	<p>Optional: You may ask the plugin to scan the content in a <code class="language-markup">&lt;code></code> block to detect and format commands and responses. Add a <code class="language-markup">data-filter</code> attribute on the <code class="language-markup">&lt;pre></code> element with a non-empty value. All lines that start with the value in the <code class="language-markup">data-prompt</code> attribute will be taken as a shell command, and those that do not will be treated as shell output.</p>
+
 	<p>Optional: You may specify the lines to be presented as output (no prompt) through the <code class="language-markup">data-output</code> attribute on the <code class="language-markup">&lt;pre></code> element in the following simple format:</p>
 	<ul>
 		<li>A single number refers to the line with that number</li>
@@ -93,6 +95,14 @@ <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>Automatic Formatting with data-filter Attribute</h2>
+<pre class="command-line" data-prompt="user%" data-filter="1"><code class="language-bash">user% ls -l
+total 40
+-rw-r--r--  1 howes  staff  5466 Mar 15 15:04 index.html
+-rw-r--r--  1 howes  staff   724 Mar 15 14:56 prism-command-line.css
+-rw-r--r--  1 howes  staff  3312 Mar 15 14:58 prism-command-line.js
+-rw-r--r--  1 howes  staff  1243 Mar 15 14:30 prism-command-line.min.js</code></pre>
+
 </section>
 
 <footer data-src="templates/footer.html" data-type="text/html"></footer>
@@ -106,4 +116,4 @@ <h2>Windows PowerShell With Output</h2>
 <script src="components/prism-powershell.js"></script>
 
 </body>
-</html>
+</html>

plugins/command-line/prism-command-line.css

@@ -31,3 +31,7 @@
 .command-line-prompt > span[data-prompt]:before {
 	content: attr(data-prompt);
 }
+
+.command-line-command {
+	color: #3f3;
+}

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

@@ -39,7 +39,8 @@ Prism.hooks.add('complete', function (env) {
 	};
 
 	// Create the "rows" that will become the command-line prompts. -- cwells
-	var lines = new Array(1 + env.code.split('\n').length);
+	var content = env.code.split('\n');
+	var lines = new Array(1 + content.length);
 	var promptText = getAttribute('data-prompt', '');
 	if (promptText !== '') {
 		lines = lines.join('<span data-prompt="' + promptText + '"></span>');
@@ -54,6 +55,26 @@ Prism.hooks.add('complete', function (env) {
 	prompt.className = 'command-line-prompt';
 	prompt.innerHTML = lines;
 
+	var filterContent = getAttribute('data-filter', '');
+	if (filterContent.length > 0) {
+		for (var i = 0; i < content.length; i++) {
+			var line = content[i];
+			if (line.slice(0, promptText.length) == promptText) {
+				// We have a command -- strip off the prompt from the source text and wrap in <span>
+				content[i] = '<span class="command-line-command">' + line.slice(promptText.length + 1) + 
+					'</span>';
+			}
+			else {
+				// We have output -- strip off the prompt tags for the line
+				var node = prompt.children[i];
+				node.removeAttribute('data-user');
+				node.removeAttribute('data-host');
+				node.removeAttribute('data-prompt');
+			}
+		}
+		env.element.innerHTML = content.join('\n');
+	}
+
 	// Mark the output lines so they can be styled differently (no prompt). -- cwells
 	var outputSections = pre.getAttribute('data-output') || '';
 	outputSections = outputSections.split(',');