Skip to content

Commit

Permalink
Command Line: Add support for line continuation and improved colors (#…
Browse files Browse the repository at this point in the history
  • Loading branch information
at055612 authored Feb 10, 2022
1 parent f545843 commit 1784b17
Show file tree
Hide file tree
Showing 5 changed files with 83 additions and 21 deletions.
28 changes: 28 additions & 0 deletions plugins/command-line/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,14 @@ <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>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>
Expand Down Expand Up @@ -90,6 +98,26 @@ <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
(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>
Expand Down
12 changes: 11 additions & 1 deletion plugins/command-line/prism-command-line.css
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
letter-spacing: -1px;
margin-right: 1em;
pointer-events: none;
text-align: right;

-webkit-user-select: none;
-moz-user-select: none;
Expand All @@ -14,7 +15,7 @@
}

.command-line-prompt > span:before {
color: #999;
opacity: 0.4;
content: ' ';
display: block;
padding-right: 0.8em;
Expand All @@ -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;
}
60 changes: 42 additions & 18 deletions plugins/command-line/prism-command-line.js
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down Expand Up @@ -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 = [];
Expand Down Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion plugins/command-line/prism-command-line.min.css

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion plugins/command-line/prism-command-line.min.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

0 comments on commit 1784b17

Please sign in to comment.