Command Line: Added span around command and output (#3312)

PrismJS · Feb 2, 2022 · 82d0ca1 · 82d0ca1
1 parent 2cc4660
commit 82d0ca1
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 3 deletions.
diff --git a/plugins/command-line/prism-command-line.js b/plugins/command-line/prism-command-line.js
@@ -130,9 +130,14 @@
 		// Reinsert the output lines into the highlighted code. -- cwells
 		var codeLines = env.highlightedCode.split('\n');
 		var outputLines = commandLine.outputLines || [];
-		for (var i = 0, l = outputLines.length; i < l; i++) {
+		for (var i = 0, l = codeLines.length; i < l; i++) {
+			// Add spans to allow distinction of input/output text for styling
 			if (outputLines.hasOwnProperty(i)) {
-				codeLines[i] = outputLines[i];
+				codeLines[i] = '<span class="token output">'
+					+ outputLines[i] + '</span>';
+			} else {
+				codeLines[i] = '<span class="token command">'
+					+ codeLines[i] + '</span>';
 			}
 		}
 		env.highlightedCode = codeLines.join('\n');

diff --git a/plugins/command-line/prism-command-line.min.js b/plugins/command-line/prism-command-line.min.js